Semanttiset HTML-elementit ovat sellaisia, jotka kuvaavat selvästi niiden merkityksen ihmisen ja koneella luettavalla tavalla.

Elementit, kuten , ja pidetään kaikkia semanttisina, koska ne kuvaavat tarkasti elementin tarkoitusta ja sisällön tyyppiä, joka on niiden sisällä.

Mitä ovat semanttiset elementit?

HTML luotiin alun perin merkintäkielenä kuvaamaan asiakirjoja varhaisessa Internetissä. Internetin kasvaessa ja yhä useamman omaksuttua sen tarpeet muuttuivat.

Kun Internet oli alun perin tarkoitettu tieteellisten asiakirjojen jakamiseen, nyt ihmiset halusivat jakaa myös muita asioita. Hyvin nopeasti ihmiset alkoivat haluta tehdä verkosta näyttävämmän.

Koska verkkoa ei alun perin rakennettu suunniteltavaksi, ohjelmoijat käyttivät erilaisia ​​hakkereita saadakseen asiat järjestettyä eri tavoin. Sen sijaan, että käyttäisit

kuvaamaan tietoja taulukon avulla, ohjelmoijat käyttävät niitä sijoittamaan muita elementtejä sivulle.

Visuaalisesti suunniteltujen asettelujen käytön edetessä ohjelmoijat alkoivat käyttää yleistä "ei-semanttista" tagia . He antoivat usein näille elementeille classtai idmääritteen kuvaamaan tarkoitustaan. Esimerkiksi tämän sijaan kirjoitettiin usein nimellä .

Koska HTML5 on edelleen suhteellisen uusi, ei-semanttisten elementtien käyttö on edelleen hyvin yleistä verkkosivustoilla nykyään.

Luettelo uusista semanttisista elementeistä

HTML5: ään lisätyt semanttiset elementit ovat:

Elementtejä kuten , , , , , ja toimivat enemmän tai vähemmän kuin elementtejä. Ne ryhmitellään muut elementit sivuosioiksi. Jos tunniste voi sisältää minkä tahansa tyyppistä tietoa, on kuitenkin helppo tunnistaa, millainen tieto menisi semanttiselle alueelle.

Esimerkki w3schoolsin semanttisten elementtien asettelusta

Miksi käyttää semanttisia elementtejä?

Tässä on kaksi HTML-koodin osaa tarkastellaksesi semanttisten elementtien etuja. Tämä ensimmäinen koodilohko käyttää semanttisia elementtejä:

Vaikka tämä toinen koodilohko käyttää ei-semanttisia elementtejä:

Ensinnäkin se on paljon helpompi lukea . Tämä on luultavasti ensimmäinen asia, jonka huomaat tarkastellessasi ensimmäistä koodilohkoa semanttisia elementtejä käyttäen. Tämä on pieni esimerkki, mutta ohjelmoijana voit lukea satoja tai tuhansia koodirivejä. Mitä helpompaa on lukea ja ymmärtää koodi, sitä helpompaa se tekee työstäsi.

Sillä on parempi saavutettavuus . Et ole ainoa, jonka semanttiset elementit ovat helpommin ymmärrettävissä. Hakukoneet ja aputekniikat (kuten näytönlukijat näkövammaisille käyttäjille) pystyvät myös ymmärtämään paremmin verkkosivustosi kontekstia ja sisältöä, mikä tarkoittaa parempaa kokemusta käyttäjillesi.

Semanttiset elementit johtavat myös johdonmukaisempaan koodiin . Luotaessa otsikon käyttämällä ei-semanttinen osia, eri ohjelmoijat voisi kirjoittaa tämä , , , tai yksinkertaisesti . Voit luoda otsikkoelementin niin monella tapaa, ja ne kaikki riippuvat ohjelmoijan henkilökohtaisista mieltymyksistä. Luomalla tavallinen semanttinen elementti, se tekee siitä helpompaa kaikille.

Lokakuusta 2014 lähtien HTML4 päivitettiin HTML5: ksi yhdessä uusien "semanttisten" elementtien kanssa. Jotkut meistä saattavat edelleen olla hämmentyneitä siitä, miksi niin monet erilaiset elementit, jotka eivät näytä osoittavan merkittäviä muutoksia.

ja

"Mitä eroa on?", Voit kysyä. Molempia elementtejä käytetään sisällön leikkaamiseen, ja kyllä, niitä voidaan ehdottomasti käyttää keskenään. Kyse on tilanteesta. HTML4 tarjosi vain yhden tyyppisen konttielementin, joka on . Vaikka tämä on edelleen käytössä HTML5, HTML5 antoi meille ja siten korvata .

Ja elementit ovat käsitteellisesti samanlaisia ja vaihdettavissa keskenään. Ota huomioon seuraavat seikat päättääksesi, mikä näistä sinun pitäisi valita:

1. Tuote on tarkoitettu itsenäisesti jaettavaksi tai uudelleenkäytettäväksi.
2. Osa on temaattinen sisältöryhmittely.

Top Stories
News
 Story 1 Story 2 Story 3   
Sport
 Story 1 Story 2 Story 3  

ja

Elementti on yleensä löytyy yläosassa dokumentin, osa tai artikkelin ja sisältää yleensä pääotsikko ja joidenkin navigointiin ja hakutyökalut.

Company A
    

     
Home
     
About
     
Contact us
    

Elementti olisi käytettävä aina kun haluat pääotsikko yhden tai useamman alanimikkeiden.

Heading 1
Subheading 1
Subheading 2

MUISTA, että elementti voi sisältää mitä tahansa sisältöä, mutta elementti voi sisältää vain muita otsikoita, ts

että

ja mukaan lukien .

Elementti on tarkoitettu sisältöä, joka ei osaa tekstin sujuvuutta, joissa se esiintyy kuitenkin edelleen liittyvät jollain tavalla. Tämä on sivupalkki pääsisältöön.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Ennen HTML5: tä valikot luotiin

ja
• on. Nyt yhdessä näiden kanssa voimme erottaa valikkokohteet tähdellä sivujen välillä liikkumista varten. Sivulla voi olla mikä tahansa määrä elementtejä, esimerkiksi yleinen navigointi ylhäällä (in ) ja paikallinen navigointi sivupalkissa ( elementissä).

  
         
  
          
  Home
          
  About
          
  Contact us
         

  Jos on, on oltava . A löytyy yleensä asiakirjan, osan tai artikkelin alaosasta. Aivan kuten sisältö on yleensä metainformaatiota, kuten tekijän tiedot, oikeudelliset tiedot ja / tai linkit asiaan liittyviin tietoihin. On myös kelvollista sisällyttää alatunnisteeseen elementtejä.

  ©Company A

  Elementti näyttäytyy usein sisällä tai elementti, joka tavallisesti sisältävät tekijänoikeuksia tietoja tai vastuuvapautuslausekkeet, yms hienoa tulosta. Tämän ei kuitenkaan ole tarkoitus tehdä tekstiä pienemmäksi. Se vain kuvaa sen sisältöä, ei määrätä esitystä.

  ©Company A Date

  Elementin avulla yksiselitteisesti ISO 8601 mennessä kiinnitettäväksi ihmisen luettavaan versio kyseisestä päivästä.

  Tuesday, 31 October 2017

  Miksi vaivautua ? Vaikka ihmiset voivat lukea aikaa, joka voi erota asiayhteydestä normaalilla tavalla, tietokoneet voivat lukea ISO 8601 -päivämäärän ja nähdä päivämäärän, kellonajan ja aikavyöhykkeen.

  ja

  on käärittävä kuvasisältösi sen ympärille ja on kuvateksti kuvasi.

   Cover art for Middle-earth: Shadow of Mordor 

  Lisätietoja uusista HTML5-elementeistä:

  • w3schools tarjoaa yksinkertaisen ja selkeän kuvauksen monista uutiselementeistä ja siitä, miten / missä niitä tulisi käyttää.
  • MDN tarjoaa myös erinomaisen viitteen kaikille HTML-elementeille ja menee syvemmälle niihin.