Vad är HTML? Del 3 – Semantisk HTML
Postad: 22 april 2022 | HTML-guider | No CommentsSemantisk markup är ett sätt att skriva och strukturera din HTML för att beskriva innehållets strukturella semantik eller betydelse, inte hur det visuellt presenterar innehållet. Med andra ord, HTML fokuserar bara på strukturen på din webbsida och CSS fokuserar på stilen i innehållet på din webbsida. Att använda semantisk markup resulterar i en standardiserad kod eftersom koden är organiserad på ett logiskt vis.
En av de viktigaste funktionerna i HTML5 är dess semantik. Semantisk HTML hänvisar till syntax som gör HTML mer begriplig genom att bättre definiera de olika sektionerna och layouten på webbsidan. Det gör dem mer informativa och anpassningsbara vilket gör att webbläsare och sökmotorer kan tolka innehållet bättre. Istället för att använda div id=”header” kan du använda header-taggen <header>.
Syntax inom programspråken innebär att det finns en regelordning om hur attribut och märken ska behandlas och placeras i förhållande till varandra. Varje programspråk har en uppsättning regler för hur olika programkonstruktioner och uttryck ska se ut.
Semantisk HTML är alltså användningen av HTML-markup för att förstärka semantiken, eller innebörden av informationen på webbsidor och webbapplikationer, än att bara definiera dess presentation eller utseende. Semantisk HTML bearbetas av traditionella webbläsare såväl som av många andra användaragenter.
I semantisk HTML får semantiskt neutrala taggar som <div> och <span> stå tillbaka eftersom det finns mer semantiskt beskrivande taggar (HTML5) som kan göra samma sak. Se några exempel här nedan.
<header>, <nav>, <main>, <section>, <footer>, <article>Elementen <div> och <span> är dock inte förbjudna att användas bara för att de inte är förklarande element utan det är ju här vi använder attributen som en beskrivning till vad elementet ska utföra.
En märkbar fördel med att använda semantiska taggar är att sökmotorerna enkelt kan indexera webbsidan eller webbplatsen, vilket i gengäld förbättrar din SEO. Dessutom blir en webbplats som använder semantik mer informativ, anpassningsbar och tillgänglig för dem som använder skärmläsare för att komma åt webbplatser. En så kallad väl utförd – well formed – webbplats följer dessutom standarden för webben.
Anatomin handlar om hur ett html-dokument är uppbyggt. De semantiska elementen/taggarna använder vi för att bygga det visuella innehållet och vad det är tänkt att innehålla. Detta görs i <body> men innan vi går in närmare på det så granska uppställningen av ett semantiskt html5-dokument och dess element.
Semantiska taggar – vad gör de?
- <header> definierar den inledande delen av en webbsida. Den innehåller objekt som logotyp, navigering och sökfält.
- <nav> anger navigeringsobjekten på sidan som home, contact, about och så vidare.
- <main> innehåller huvudsektionerna av HTML-dokumentet förutom <header> och <footer>. Helst ska det bara finnas en av dessa i hela HTML-dokumentet.
- <section> är ett semantiskt element för att skapa fristående sektioner på en webbsida. Sektionselementet ska endast användas om det inte finns ett mer specifikt element som representerar det relaterade innehållet. Du kan använda flera section i ett enda HTML-dokument.
- <article> representerar en en speciell del av en webbsida som förmedlar viss information. Det kan vara en kombination av text, bilder, videor och inbäddningar. Se det här elementet som ett fristående blogginlägg på en sida som innehåller utdrag (excerpt) om andra blogginlägg.
- <aside> Som namnet antyder representerar detta ett sidofält på en webbsida. Det är vanligtvis en del av webbsidan som inte är direkt relaterad till huvudinnehållet. En del använder denna till vertikala navigeringar.
- <footer> rymmer objekt som snabblänkar, upphovsrättsinformation eller annan information som är relaterad till hela webbplatsen eller webbsidan.
Vad är skillnaden på <section> och <article> i HTML5?
Både section och article är semantiska element i HTML5. Det betyder att de förmedlar innebörden av de element som de innehåller vilket i sin tur hjälper sökmotorer, webbläsare, hjälpmedel och andra utvecklare att förstå de olika delarna av en webbsida.
Så när är det vettigt att använda en article istället för en section?
En artikel (article) bör användas för att representera den del av innehållet på en webbsida som i princip skulle kunna existera på egen hand eller återanvändas. Ett blogginlägg, foruminlägg, tidnings- eller tidningsartikel bör använda <article>.
Ett avsnitt (section) bör däremot användas för att representera en del av ett dokument som inte oberoende eller återanvändas kan utdelas. De används till sektioner som är grupperade kring ett specifikt tema. Introduktionen, nyheterna och kontaktinformationen på en hemsida till exempel är teman som bör markeras med avsnittselement.
Vi repeterar anatomin av ett html-dokument
| <!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 |
| <p>Lite text</p> | en paragraph (stycke) med metataggar |
| </body> | |
| </html> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Min blomsida</title>
</head>
<body>
<h1>En rubrik</h1>
<p>Lite text</p>
<img src="images/solrosor.jpg" alt="solrosor" width="300px" hight="200px"/>
</body>
</html>Jämför nu noga detta med hur det kommer att ser ut när vi dels applicerar de semantiska elementen i anatomin på vårt tidigare html-dokument och dels länkar till en extern stilmall (external style sheet).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Min blomsida</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<main>
<header>
<img src="logo.jpg" alt="kaxig logo" width="200px" hight="200px"/>
</header>
<nav>
<ul id="primary_nav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<article>
<header>
<h1>En rubrik</h1>
</header>
<section>
<p>Lite text</p>
<img src="images/solrosor.jpg" alt="solrosor" width="300px" hight="200px"/>
</section>
</article>
<aside>
<section>
<p>Lite text</p>
</section>
<ol>
<li>en ordnad lista</li>
</ol>
</aside>
<footer>
<section>
<p>© Copyright kaxigt.com All Rights Reserved</p>
</section>
</footer>
</main>
</body>
</html>
Varför ska vi använda semantisk markup?
Det främsta skälet är för att kunna gynna alla som använder datorer och internet genom att göra den tillgänglig och användbar!
Med en semantisk rätt html-sida följer man standarden för webben vilket innebär att man dels öppnar för både användbarhet och tillgänglighet, dels klarar webbläsarna att rendera (parsa) sidans innehåll på ett korrekt vis och dels får det sökmotorerna att ranka sidan högt.
Fördelarna du får av att använda semantiska taggar är precis det jag skrev ovanför. Semantik hjälper dig att bygga bättre webbplatsstrukturer, förbättra prestanda i sökmotorer och de kan på allvar förbättra tillgängligheten.
Här avslutar jag guiden Vad är HTML del 3. Du är välkommen till del 4 där jag tar mer upp om semantisk hiearki och ”ful-html”.
Vi ses där!