6 – Semantisk HTML

Ett av målen med att lägga in ditt innehåll i HTML är att strukturera upp det. Rubriker markeras som rubriker och brödtext delas in i olika stycke (paragrafer). Innehållet sorteras upp på detaljnivå.

Nästa steg blir att strukturera upp hemsidan på en övergripande nivå t.ex. i menyer, sidhuvud, innehåll eller sidfot.

De flesta delarna eller byggblocken på en hemsida har färdiga HTML-element och i de fall det inte finns något passande kan man markera ut dem ändå.

En enkel layout består av följande byggblock:

  • Logotypen, överst i elementet <header>
  • Menyn precis nedanför i elementet <nav>
  • Huvudinnehållet i elementet <article>
  • Längst ned lägger vi en sidfot i <footer>

Taken med att ha olika element som containrar runt innehållet är att gruppera det. Sätter vi en bakgrundsfärg på vårt sidhuvud kan vi göra en annan på sidfoten. Innehållet i de olika delarna ärver egenskapen från sin container. Ändringar kan lätt göras för texten i t.ex. sidfoten utan att texten i sidhuvudet ändras.

Vi kan även sätta storlekar på de olika delarna eller att den ena ska vara placerad till vänster om den andra. Menyn skulle kunna placeras till vänster om innehåller.

Är din HTML byggd ordentligt kan man ändra mellan dessa två layouter bara genom att ändra i CSS.

En annan vanlig men enkel webblayout är att lägga menyn på vänster
En annan vanlig men enkel webblayout är att lägga menyn på vänster

De semantiska byggstenarna förklarar för webbläsaren vilken del som innehåller vad. För en vanlig webbanvändare är det kanske inte så viktigt men tänk vilken fördel det är för en synskadad att veta redan på förhand vilken del som är menyn. Innan hen lyssnar igenom hela sidan för att hitta den.

Här kommer lite historia. Normalt brukar jag hoppa över historian bakom men här behövs det.

Det finns även ett generell container-element som heter <div>. Fram till ganska nyligen (innan HTML version 5, ca 2013) fanns inte de olika specifika elementen utan vi använde olika varianter på <div>. Det används fortfarande mycket men mindre och mindre. De vanliga bygg-stenarna skulle då kunna skrivas som:

  • Sidhuvudet skrivs som <div id="header">
  • Menyn skrivs som <div id="menu">
  • Innehållet skrivs som <div id="content">
  • Sidfoten skrivs som <div id="footer">

Ni ser att alla inte är exakt samma men lika. Vi använde tidigare attributet ID för att sätta olika namn på de olika byggblocken. Idag har de istället blivit till egna element. När de semantiska byggstenarna skapades (till HTML5) utgick man från hur folk jobbade med webben och försökte förenkla arbetet genom att lägga till de mest använda elementen.

De olika byggstenarna eller containrarna brukar kallas för semantiska element. Det finns många fler 🙂 Läs på MDN eller W3Schools.

Övningar

  • Uppdatera ditt största HTML-dokument så att de olika delarna av dokumentet ligger i sina respektive semantiska byggstenar.
  • Testa att med CSS ändra bakgrundsfärger på de olika.
  • Ändra bredderna på dina byggstenar.
  • Testa att justera storlek med max-width på din sidebar och innehållsdel.
    • Hamnar de bredvid varandra?
    • Varför? Varför inte?
    • Testa i debuggern

Skapa följande layout. Börja med mobilversionen och försök få den att anpassa sig till datorskärm. Du bör komma ganska långt (eller kanske hela vägen) med de verktyg du har idag.

mobil-dator-version