Vad är HTML? Del 4 – Semantisk hiearki och fulHTML
Postad: 23 april 2022 | HTML-guider | No CommentsI tidigare guider så har vi analyserat anatomin på ett HTML-dokument. Vi har kikat på html-element och bekantat oss med attribut och semantik. Det innebär att du nu bör förstå att det finns viktiga strukturella regler att följa när man programmerar HTML. Vi ska koppla detta till det semantiska dokumentet/HTML-hiearkin. Den här guiden är uppdelad på tre sidor för att du bäst ska kunna tillgodose dig all information som en helhet.
Från och med här kommer alla HTML-guider att successivt öka i svårighetsgrad eller omfattning
Målet med den semantiska webben är att göra internetdata maskinläsbar. Semantisk HTML däremot hänvisar till traditionell HTML fast att använda markupen efter dess betydelse snarare än att specificera layoutdetaljer (i vissa fall fulHTML). Ett exempel är användningen av <em> som betecknar ”betoning” snarare än <i>, där den sistnämnda är värdet italic (kursiv stil) i stilmallen.
- Använd inte <i> i brödtexten utan <em> när du vill ha betona något.
- Taggen <i> används ofta för att indikera en teknisk term, en fras från ett annat språk, ett bilnamn osv.
- En skärmläsare kommer att uttala orden inom <em>-taggarna med hjälp av verbal betoning.
- Vid fetstilt text används <strong> och inte <b>.
- <b> står för bold och <i> för italic. Båda är egenskapsvärden i CSS och inte HTML.
Den semantiska hiearkin
Vid programmering hänvisar semantiken till betydelsen av en kod, exempelvis vilken effekt har det att köra den här raden av JavaScript? Eller, vilket syfte eller roll har det här HTML-elementet?
När du ska bygga din sida behöver du alltså fundera på vilken markup du ska använda och kanske fråga dig själv: Vilka element beskriver/representerar bäst det som jag kommer att fylla sidan med?
Kanske är det en lista med data? I så fall ska den vara ordnad eller oordnad? Är det en artikel med sektioner och en sida relaterad information? Är det en bild eller bilder som behöver bildtexter? Ska den ha ett sidhuvud och en sidfot utöver det globala sidhuvudet och sidfoten?
Det finns flera fördelar med att skriva semantiskt.
- Sökmotorerna kommer att betrakta innehållet som viktiga nyckelord för att påverka sidans sökrankning
- Skärmläsare kan använda den som en skylt för att hjälpa synskadade användare att navigera på en sida
- Att hitta block av meningsfull kod är betydligt enklare än att söka igenom massa divs med eller utan semantiska eller namnavgränsade klasser
- Semantisk namngivning speglar korrekt namngivning av anpassade element/komponenter
De vanligaste parsingfelen i HTML
Den som är nybörjare kan ha lätt att koda fel i bara farten, tyvärr så blir det då också samma fart på webbläsaren när dokumentet har skickats upp på nätet, och det vill vi ju inte. De vanligaste felen som görs är följande:
- man har glömt att stänga någon tagg
- oväntade (skriv)tecken som återfinns i eller före attributnamnen
- oväntade (skriv)tecken som finns före Doctype
- att glömma doctype helt och hållet eller ange fel doctype
- oväntade sluttaggar eller felaktigt skrivna sluttaggar
- glömda sluttaggar
- flera html body och head
- felaktigt definierade attribut eller element
- att använda märken eller attribut som inte är tillåtna
- att använda andra programspråk, t ex css, direkt i märkspråket (fulhtml)
Skriva semantiskt
Som jag tidigare har skrivit i guiderna så är de semantiska elementen beskrivande till vad de är ämnade. Men vi har ju också andra element att ta i beaktning. Att använda dem på rätt vis till vad de är ämnade är också semantik. Bra semantik dessutom.
Vi ska nu titta på en uppsättning av felaktiga och korrekt skrivna koder. Ser du mönstret varför vissa är felaktiga? Lägg det på minnet.
| Felaktig | Korrekt |
|---|---|
| <p>solen är gul Man måste ha en stängningstagg. |
<p>solen är gul</p> |
| <p>solen <em>är gul</p><em> Felaktig avslutning i ordningen av elementen. Syntaxfel. |
<p>solen <em>är gul<em></p> |
| <em><p>solen är gul</p><em> p är ett block-element och de kan inte omslutas av ett inline-element. Felaktig semantik. |
<p><em>solen är gul<em></p> |
| <center>solen är gul</center> Egenskaper och värden styrs med CSS. Center är dessutom en position som anges med CSS. |
<p class=”gul”>solen är gul</p> |
| <div align=”gul”>solen är gul</div> Div är ett block-element. Felaktig semantik + att egenskaper och värden styrs med CSS. |
<p class=”gul”>solen är gul</p> |
| <p class=”rubrik”>solen är gul</p> Till större texter används rubriker. Felaktig semantik. |
<h1>solen är gul</h1> |
| img alt=solen är gul Citat-tecken utelämnade. Syntaxfel. |
<img alt=”solen är gul” |
| <p> <a href=”#”>list item1</a> <a href=”#”>list item2</a> <a href=”#”>list item3</a> <p> Listor görs med list-elementet. Felaktig semantik. |
<ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> |
| <p> <ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> <p> Man kan inte nästla in en lista i en paragraph/stycke. Felaktig semantik. |
Se ovan | <align left>solen är gul</align> Det finns inget som heter align left. Egenskaper och värden styrs med CSS. |
<p class=”left”>solen är gul</p |
| <p class=”big”>solen är gul<p> Big betyder större text. Använd rubrik-element. Felaktig semantik. |
<h2>solen är gul</h2> |
Exempel på icke-semantiska element är de neutrala <div> och <span>. De berättar absolut ingenting om sig själva eller innehållet. De semantiska elementen <form> <table> och <article> definierar däremot tydligt sina innehåll. Sådant gillar inte bara webbläsarna utan även sökmotorerna.
Vi börjar med att repetera anatomin av ett grundläggande html-dokument (igen). Ser Du någon skillnad? Vilket element har försvunnit?
| <!DOCTYPE html> | Visar vilket doctype som används |
| <HTML> | HTML rot-element |
| <head> | Innehåller en sidas metadata |
| <title>Min sida<title> | Sidans title-element |
| </head> | |
| <body> | Den del som utgör den visuella delen av sidan |
| <h1>en rubrik</h1> | Rubrik med metataggar |
| </body> | |
| </html> |
En semantisk korrekt markup använder html-element för dess givna syfte. En väl utformad HTML har en semantisk innebörd för ett brett fält av användaragenter (webbläsare utan stilmallar, textbaserade webbläsare, sökmotorer osv.) Då gäller nedanstående regler (från HTML4.0 till XHTML).
- Ett doctype! högst upp på varje sida
- En <html> per sida.
- En <head> per sida
- En <title> per sida
- En <body> per sida
- En <h1> på sidan – men hur många rubriker h2-h6 som helst du vill ha på samma sida.