-s och -s dock, som du behöver inte helt dike dem. De är fortfarande det bästa valet för att gruppera innehåll endast för styling och i andra sista utvägssaker.

Text Semantik i HTML5

HTML5 introducerade många nya semantiska element som möjliggör enkel innehållsorganisation. De hjälper dig inte bara att organisera innehåll på hela dokumentets nivå (se i detaljer i nästa avsnitt), men också inuti textblock, som inline-taggar.

Förmodligen är de mest populära textnivån semantiska taggarna och , men de fanns också före HTML5. Bland de nya inline-semantiska elementen kan vi t.ex. hitta , tagg för humanläsbara datum-tider, och för markerad text.

Se den här listan för alla semantiska element på textnivå som för närvarande används.

Dokumentbeskrivning i HTML5

Dokumentet är strukturen i ett HTML-dokument. Det visar hur element är relaterade till varandra. Dokumentet har genererats enbart genom kartläggningselement, till exempel rubriker, tabeller, formtitlar och andra i tidigare versioner av HTML, som HTML4.01 och XHTML.

I HTML5 har den övergripande algoritmen förbättrats med nya sektionselement, nämligen:

• för sektioner grupperade kring ett specifikt tema
• för kompletta eller självständiga kompositioner till exempel ett blogginlägg eller en widget
• för navigationsblock
• för kompletterande innehåll, såsom sidofält.

Det finns ett femte snittelement i HTML5, men det är inte nytt, det är det märka. De

och Taggar är också nya, men de skapar inte nya avsnitt i ett dokument, de delar upp innehållet inom sektionerna. Detta innebär att varje sektionselement (kropp, artikel, avsnitt, nav och åt sidan) kan ha sin egen rubrik och sidfot.

Tips för semantiskt strukturerat innehåll

Om vi ​​vill skapa en välstrukturerad dokumentbeskrivning måste vi vara uppmärksamma på följande regler:

1. Det yttersta sektionselementet är alltid märka.

2. Sektioner i HTML5 kan nästas.

3. Varje sektion har sin egen rubrik hierarki. Var och en av dem (även den innersta inbädda sektionen) kan ha en h1 märka.

4. Även om dokumentets disposition huvudsakligen definieras av de 5 sektionerna, behöver den också ordentliga rubriker för varje sektion.

5. Det är alltid det första rubrikelementet (låt det vara h1 eller en lägre rangrubriktag) som definierar rubriken i den angivna sektionen. Följande rubriktaggar inom samma avsnitt måste vara relaterade till detta. (Om den första rubriken är en h3 i ett sektionselement, lägg inte en h3 efter det.)

6. De sektioner som definieras av

, och den Taggarna tillhör inte huvudtexten i HTML-dokumentet, de görs vanligen inte initialt av hjälpteknik.

7. Varje sektion (kropp, sektion, artikel, åt sidan, nav) kan ha sin egen

och taggar som definierar rubriken (t.ex. logotyp, författarens namn, datum, metadata, etc.) och sidfoten (upphovsrätt, anteckningar, länkar, etc.) i den sektionen.

Exempel: En semantisk disposition

Låt oss se ett exempel på en semantisk dokumentvy för att se tydligare hur det fungerar. Vår exemplar kod kommer att resultera i följande dokumentstruktur:

Och här är koden med ordentlig semantisk sektion:

  
 
Välkommen på vår hemsida!
 
Här är vår logotyp och slogan.
 
  
 
 
Titel på artikel
 
Subtitle of Article
 
 
 
Första logiska delen (t ex "teori")
 
Punkt 1 i första avsnittet
 
Något annat underrubrik i första avsnittet
 
Punkt 2 i första avsnittet
 
 
 
Andra logiska delen (t ex "övning")
 
Punkt 1 i andra delen
 
Punkt 2 i andra delen
 
  
    

Om du tittar på kodavsnittet ovan ser du att rubriker och sidfot är valfria, vi kan fritt välja om vi vill använda dem eller inte, men det är rekommenderas starkt att alltid inkludera en rubrik för varje avsnitt, annars kommer sektionen att vara “Ofrälse” i dokumentets översikt.

Lyckligtvis finns det många bra verktyg över hela internet som gör att vi kan kontrollera dokumentets översikt, den här gången använder vi verktyget Outliner av html5.org.

Om vi ​​sätter in vårt kodbitar i formuläret som tillhandahålls av outliner och klickar på “Skissera detta!” knappen kommer vi att se följande resultat:

Det här är dokument skiss över vår provkod, så ser sökmotorerna på det, och skärmsläsare läser det till sina synskadade användare. Det är semantiskt, välstrukturerat, och det finns ingen otäck “Ofrälse” sektioner i den.

Om du vill se hur en Untitled-sektion ser ut i Outliner, raderar du bara några av rubrikkoderna i exemplet.

Andra aspekter av webbsemantik

Semantiska HTML-taggar och dokumentutskrifter är bara en liten del av webbsemantik. Innehållet på en webbsida kan göras ännu mer meningsfullt med hjälp av WAI-ARIA-tillgänglighetsprotokollet och strukturerad data som kan användas tillsammans med RDFa-protokollet, mikrodata eller JSON-LD-märkning.