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 <h1> och brödtext delas in i olika stycke <p>. Innehållet sorteras upp på detaljnivå.

Nästa steg blir att strukturera upp hemsidan på en större nivå i olika byggblock som t.ex. i meny, 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>
  • Kontaktinformation mm. i sidfoten längst ner i elementet <footer>

Taken med att ha olika element som byggblock eller ”containers” 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.

Lite historia

Normalt brukar jag hoppa över historian (i grundkursen) 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:

Tidigare skrev vi <div id="header"> i HTML5 skriver vi istället <header> och menyn skrevs som <div id="menu"> nu använder vi <nav>. Sidfoten skrevs ofta som <div id="footer"> istället för som nu <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) analyserades massor av hemsidor och element skapades från hur en majoritet var byggda.

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