kaxigt.com

Jag skriver om webben för webben

Vad är HTML? Del 3 – Semantisk HTML

Postad: 22 april 2022 | HTML · html-guider | No Comments
Lästid: 4 minuter
Det här är del 3 i en omarbetad artikelserie. Här tar jag upp vad som menas med semantisk HTML och betydelsen av det.
Guiderna till höger bygger på denna artikelserie. De är utformade för en stegvis inlärningskurva. Vill du få den bästa lärandeprocessen rekommenderar jag Dig därför att läsa dem efter att denna artikelserie är avslutad.

Semantisk 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>.

Semantik avser det vetenskapliga studiet av språklig betydelse eller studiet av teckensystems innebörd och tolkning. Inom programmeringen innebär det regler för hur man i ett språk sätter samman enskilda enheter såsom ord till fraser, satser och meningar.

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.

Att skriva semantisk markup innebär att förstå hierarkin för ditt innehåll och hur både användare och datorer kommer att läsa det. Enklast förklarat kan man säga att en semantisk HTML innebär att dina HTML-taggar (element) förmedlar den faktiska innebörden av vad de ska användas till, som exempelvis h1-h6 till rubriker.

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.

HTML5 semantic elements

Semantiska taggar – vad gör de?

  1. <header> definierar den inledande delen av en webbsida. Den innehåller objekt som logotyp, navigering och sökfält.
  2. <nav> anger navigeringsobjekten på sidan som home, contact, about och så vidare.
  3. <main> innehåller huvudsektionerna av HTML-dokumentet förutom <header> och <footer>. Helst ska det bara finnas en av dessa i hela HTML-dokumentet.
  4. <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.
  5. <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.
  6. <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.
  7. <footer> rymmer objekt som snabblänkar, upphovsrättsinformation eller annan information som är relaterad till hela webbplatsen eller webbsidan.
Observera att eftersom semantiska element förmedlar faktisk mening och vad visst innehåll faktiskt gör (som nav för navigering, aside för ett sidofält och så vidare) så placeras dessa element inte automatiskt där de ska vara. Du måste fortfarande göra det med CSS.

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).

html5 semantik


<!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>
De semantiska taggarna ska alltså INTE förväxlas med de element som utgör anatomin av ett html-dokument. <head> är inte samma sak som <header>

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.

Semantik handlar om struktur och mening. Att använda semantisk markup för att bygga sina webbsidor innebär att skapa mer meningsfulla webbsidor som både användare och datorer kan komma åt.

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!