Sinun ei tarvitse käyttää div-tageja joka kerta. Käytä näitä semanttisia HTML-tageja tehdäksesi sivustostasi jäsennellympi ja helppokäyttöisempi.
Ennen semanttisen HTML: n käyttöönottoa kehittäjät käyttivät sisällön järjestämiseen divejä. Div-elementeillä ei ole itsessään merkitystä. Ne tarjoavat vain tavan soveltaa tyylejä ja järjestää sisältöä.
Sana semanttinen tarkoittaa merkitykseen liittyvää. Semanttiset HTML-elementit kuvaavat sisällön tarkoitusta. Ne antavat merkityksen kehittäjälle, käyttäjälle, hakukoneille ja aputekniikoille. Tässä on luettelo suosituista semanttisista HTML-tageista, joita voit käyttää seuraavassa projektissasi.
Mitä Divit ovat?
HTML: ssä div (division) -elementti on lohkotason säilö. Voit ryhmitellä tai jakaa HTML-elementtejä web-sivun osiin div: n avulla. Syntaksi on seuraavanlainen:
<div>
div>
Edut semanttisten HTML-elementtien käytöstä diveihin verrattuna
HTML5 esitteli semanttiset HTML-elementit koodin lukemisen helpottamiseksi. Semantiset elementit antavat verkkosisällölle merkityksen ja rakenteen.
Ne tekevät koodistasi ymmärrettävän muille kehittäjille. Niiden avulla hakukoneiden on myös helpompi löytää sisältösi ja ohjata liikennettä sivustollesi. Tässä on joitain semanttisia elementtejä, joita voit käyttää HTML- ja CSS-projektit.
1.
The -tunniste määrittää asiakirjan otsikko-osan. Yleensä se sisältää sivuston logon, navigoinnin ja sivun otsikon. Se on osa, joka näkyy verkkosivun yläosassa. Voit muokata otsikkoa tarpeidesi mukaan. Syntaksi on seuraava:
<kehon><otsikko>
<h1> Hei siellä!h1>
<s>Olen otsikkos>
otsikko>
kehon>
2.
The -tunniste sisältää sivuston navigointilinkit. Nämä voivat olla valikoita, sisällysluetteloita tai hakemistoja. Se sijoitetaan yleensä sisään tag. Syntaksi on seuraava:
<otsikko><nav>
<ul>
<li>Omat nettisivuni linkitli>
<li><ahref="#"> Kotia>li>
<li ><ahref="#"> Meistä a>li>
ul>
nav>
<h1>Yllä oleva on osa sivustoni navigointia.h1>
otsikko>
Selaimessa se näyttää tältä:
Voit käyttää CSS-asettelumalleja, kuten CSS flexbox kohdistamaan
3.
The -tunniste sisältää verkkosivun pääsisällön. Se erottaa sisällön ylä-, sivupalkista ja alatunnisteesta. Main edustaa hallitsevaa sisältöä osio.
<kehon><otsikko>
<otsikko> Sivuston tosiasiat otsikko>
otsikko>
<pää>
<s> Tämä verkkosivusto on lyhyt esitys päätunnisteen toiminnasta.s>
<s> Se ympäröi verkkosivuston osan hyödyllisellä sisällöllä.s>
pää>
<alatunniste>
<h3> Tämä on alatunniste h3>
alatunniste>
kehon>
Se näyttää tältä:
4.
Käytä -tunniste määrittääksesi asiakirjan tai verkkosivuston itsenäiset osiot. Voit käyttää niitä esimerkiksi blogitekstien, lehtien tai tuotekorttien jäsentämiseen. The elementti voi sisältää muita elementtejä, mukaan lukien muita artikkeleita, osioita ja otsikoita. Oheisten elementtien tulee liittyä artikkelin aiheeseen.
<artikla>
<h1>Vieraampi kuin fiktioh1><artikla>
<h3>Johdantoh3>
<s>Tässä kirjassa kerrotut tapahtumat ja henkilöt ovat fiktiivisiä.s>
artikla>
<artikla>
<h3>Luku yksih3>
<s> Päivä oli kirkas ja aurinko hymyili taivaaltas>
artikla>
artikla>
Se näyttää tältä:
5.
The -tunniste sisältää pääsisältöön liittyvän sisällön. Käytä tätä tunnistetta luodaksesi sivupalkkeja lainauksille, kommenteille tai huutohuutoille. korostaa tietoja, jotka lukija saattaa jäädä huomaamatta. Se erottuu muusta sisällöstä.
html><html>
<tyyli>
body{
taustaväri:#abdbe3;
}
sivuun {
leveys: 30 %;
pehmuste-vasen: 0,5rem;
marginaali vasen: 1rem;
flex: vasen;
box-shadow: upotettu 5px 0 5px -5px vihreä;
font-tyyli: kursivoitu;
väri punainen;
}
sivuun > p {
marginaali: 0,5 rem;
tyyli>
<kehon>
<pää>
<h1> Weaver Birdsh1>
<s>Ploceidae on pienten lintujen heimo. Monia heistä kutsutaan kutojiksi, kutojalintuiksi, kutojapeippoiksi ja piispoiksi.s>
<sivuun>
<s>kuningaskunta: Animalia
Suku: Chordatas>sivuun>
<s>Uusimmissa luokitteluissa Ploceidae on kladi, ei sisällä joitakin lintuja, jotka on historiallisesti sijoitettu sukuun. Jotkut varpuset, mutta sisältää monotyyppisen alaheimon Amblyospizinae.s>
pää>
kehon>
html>
6.
The elementti sisältää osan sivusta, jolla ei ole tiettyä semanttista elementtiä. Osioissa voi olla otsikko, joka esittelee sisällön ja sisältää muita HTML-elementtejä. edustaa verkkosivun osia, kuten kirjan tai blogin lukuja.
html><html>
<kehon>
<h1>Raamattuh1>
<osio>
<h2>Johdantoh2>
<s>Raamattu on kokoelma uskonnollisia pyhiä kirjoituksia kristinuskossa, juutalaisuudessa ja samarialaisuudessa. Raamattu on antologia – kokoelma erimuotoisia tekstejä – kirjoitettu alun perin hepreaksi, arameaksi ja koine-kreikaksi.s>
osio>
<osio>
<h2>Ensimmäinen luku: Genesish2>
<s>Mooseksen kirja on heprealaisen Raamatun ja kristillisen Vanhan testamentin ensimmäinen kirja. Sen heprealainen nimi on sama kuin ensimmäinen sana Bereshit. Genesis on kertomus maailman luomisesta, ihmiskunnan varhaisesta historiasta ja Israelin esivanhemmista ja juutalaisten alkuperästäs>
osio>kehon>
html>
Se näyttää tältä:
7.
The elementti sisältää itsenäisiä piirroksia, kuten kuvia tai kaavioita. Nämä kuvat viittaavat pääsivun sisältöön. Kuvissa on kuvatekstejä, jotka on määritelty elementti. The selittää, mistä kuvassa on kyse. The
html><html>
<kehon>
<pää>
<osio>
<h1>Tietokoneen osath1>
<s> On olemassa useita osia, jotka toimivat yhdessä muodostaen tietokoneens>
<kuva>
<imgsrc="joku-url.jpg"alt="tietokonehiiri">
<kuvateksti>Tämä on tietokoneen hiirikuvateksti>
kuva>
osio>
pää>
kehon>
html>
Voit mennä pidemmälle ja oppia kuinka luoda responsiivisia kuvia HTML: ssä.
The HTML-elementti sisältää tiedot verkkosivun alaosassa. Se on vastakohta elementti. The voi sisältää tietoja sivun omistajasta. Tämä sisältää tekijänoikeustiedot tai linkit sivuston lisätietoihin.
html><html>
<kehon>
<pää>
<osio>
<h1>Tietokoneen osath1>
<kuva>
<imgsrc="joku-url.jpg"alt="tietokonehiiri">
<kuvateksti>Tämä on tietokoneen hiirikuvateksti>
kuva>
osio>
pää>
<alatunniste>
<s> Valmistaja ComputerTech © 2023s>
alatunniste>
kehon>
html>
Yllä oleva koodi lisää alatunnisteen Tietokoneen osat sivu seuraavan kuvan mukaisesti.
Miksi käyttää semanttisia HTML-elementtejä?
Semanttisten HTML-elementtien käyttö antaa koodille kontekstin. Jokainen koodia katsova ymmärtää sen helposti. Tunnisteet helpottavat elementtien muotoilua ja yhteistyötä projekteissa.
Voit käyttää semanttista HTML: ää käyttöliittymäkirjastojen ja -kehysten kanssa. Useimmat nykyaikaiset verkkoselaimet suosivat semanttisia HTML-elementtejä perinteisten elementtien sijaan. Aloita semanttisen HTML: n käyttö ja katso, että koodisi näyttää nykyaikaiselta, luettavalta ja esitettävältä.
