Vad är HTML? Del 4 – Semantisk hiearki och fulHTML
Postad: 23 april 2022 | HTML-guider | No CommentsSå kom HTML5
Eftersom man traditionellt i HTML/XHTML bara får ha en h1 per sida så används den ofta till sidans huvudrubrik och det är semantiskt riktigt. Fast med de semantiska elementen för HTML5 kom det nya regler för h1. Faktum är med elementen <section> och <article> kan vi använda huvudrubriken h1 flera gånger på en och samma sida.
Det beror på att varje element i HTML5 numer delas in i noll eller fler kategorier som grupperar element med liknande egenskaper i något som benämns flow – flöde. Detta flöde består av nedanstående grupper. Du känner väl igen de flesta av dem?
- Metadata content
- Det som finns inom <head>. Innehåll som presentationen eller beteendet för resten av innehållet. Stilmall, nyckelord mm.
- Flow content
- Innehållet i flödet. De flesta element som används i dokument och applikationer kategoriseras som flödesinnehåll.
- Sectioning content
- Innehållet i varje sektion som definierar omfattningen av rubriker och sidfötter (article aside nav section).
- Heading content
- Definierar rubriken för ett avsnitt (oavsett om det uttryckligt är markerat med sektionsinnehållselement eller underförstått av själva rubrikinnehållet).
- Phrasing content
- Texten i dokumentet, såväl som de element vilka markerar den texten på nivån inom stycket.
- Embedded content
- Inbäddat innehåll. Man importerar en annan resurs till dokumentet eller innehåll från en annat vokabulär som infogas i dokumentet.
- Interactive content
- Innehåll som är specifikt avsett för användarinteraktion.
https://html.spec.whatwg.org/ har en mycket bra interaktiv bild som visar hur grupperna hänger ihop. Jag rekommenderar dig att kika på denna innan du fortsätter här. För bara musen över de olika grupperna så får du se vilka html-element som omfattas.
HTML5 section article och h1
Jag ska inte fördjupa detta här men väl ge en kort förklaring till varför man med dessa element kan använda fler h1 än ett om du skulle träffa på det och bli förvirrad.
I själva verket är allt innehåll under en rubrik ett avsnitt även om vi inte definierar det uttryckligen. De kallas implicita (underförstådda) sektioner. Så här ligger det till, om alla rubriker verkligen börjar/startar en sektion (section), oavsett hur många sektioner vi vill använda, så kommer h1 alltid att vara en egen sektion. HTML-specifikationen inkluderar nämligen begreppet outline som bildas genom att man använder <section>-elementen.
Outline här menas att uppställningen av elementen parsas (renderas/inläses) utifrån DOM – Document Object Model – vilken i sin tur kan liknas vid trädstrukturen hos ett HTML-dokument. Outline för ett sektionsinnehållselement eller ett sektionering av rotelement består av en lista med en eller flera potentiellt kapslade sektioner. Det element för vilken outline skapas sägs vara dess ägare.
By ?Birger Eriksson – Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18034500
Du kan använda länken till HTML5 Outliner för att testa en webbplats outline.
- Använd en uppsättning <h1> taggar per sektionering av rot- eller innehållssektion (section).
- Det bör alltid finnas en <h1>-nivårubrik mellan öppningen <body> och den första sektionen som utmärker det övergripande dokumentet.
- När en<h1>-nivårubrik ska användas för att märka ut en sektion bör det vara den första rubriken som visas i avsnittet eftersom den första rubriken alltid tolkas som avsnittets huvudrubrik.
- Om en <h1>-nivårubrik används för att märka ut ett innehållsavsnitt (section) bör alla andra rubriker som används i det avsnittet vara h2 eller lägre (hiearkin) för att skapa en korrekt dokument-outline.
De flesta moderna webbläsarna idag klarar av att tolka/parsa HTML5-rubriker och avsnittsinnehåll. Nedanstående exempel använder såväl elementen article som section. Observera att man kan nästla section-elementet. Jag rekommenderar dock alltid att du använder <h1> nivå-taggar för att markera artikelinnehåll om du använder section-element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Min blomsida</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<h1>Blomsidan</h1>
<section>
<header>
<h1>Välkommen!</h1>
<p>Logo eller slogan</p>
</header>
</section>
<nav>
<header>
<h2>Navigation</h2>
</header>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
<article>
<section>
<header>
<h1>Rubrik1</h1>
<h2>rubrik2</h2>
</header>
</section>
<section>
<h3>Rubrik3</h3>
<p>text och bilder</p>
<p>text och bilder</p>
</section>
<section>
<h4>Rubrik4</h4>
<p>text</p>
<p>text</p>
</section>
<footer>
<h5>Bio</h5>
<p>text</p>
</footer>
</article>
<article>
<section>
<header>
<h1>Rubrik1</h1>
</header>
<section> <-- nästlad section
<h2>Rubrik2</h2>
<p>text och bilder</p>
</section> <-- avslutad nästlad section
</section>
<section>
<h3>Rubrik3</h3>
<p>text</p>
</section>
<footer>
<p>En slogan och länkar</p>
</footer>
</article>
<aside>
<section>
<ul>...</ul>
</section>
</aside>
<footer>
<section>
<p>copyright och länkar</p>
</section>
</footer>
</body>
</html>Om den primära navigeringen redan är omsluten av ett <nav>-element, överväg då att omsluta nästa navigering i en <section>.
<section>
<ul>
<li><a href="#">Föregående artikel</a></li>
<li><a href="#">Nästa artikel</a></li>
</ul>
</section>
Vi ska fortsätta guiden men vi utelämnar de HTML5-specifika section-elementen för tillfället.
Nu vet du att det finns en hiearki i rubriknivåerna. H1 användas som huvudrubrik. H2 som underrubrik, sedan kommer resten i fallande skala.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
När du ska rubricera något avsnitt bör du såldedes tänka på detta. De rubriker som ska framhållas läggs ofta in mellan h1-h3. Glöm inte att många rubriker ärver egenskaper och värden från stilmallen så de kan alla se olika ut i dokumentet.
Struktur
Strukturen du använder är att h1 är huvudrubriken. Du kanske har en underrubrik h2. Därefter kommer några stycken p. Sedan vill du visa några bilder. Här lägger du in h3 som rubrik för bildavsnittet, därefter bilderna med kanske en bildrubrik h4 till var och en. Sist avslutar du med några fler stycken p. Bra hiearki. Sedan är du nöjd. Se nedanstående förenklade dokument.
Det är semantiskt rätt och färdigt att användas även utan de nya elementen för HTML5. Och det är just det som är det fina i kråksången, du behöver inte använda de nya elementen om du inte vill även om de bidrar till ännu bättre semantik. En bra strukturell hiearki som använder rätt semantiskt element på rätt plats med rätt syntax är även det en väl utformad webbsida i html/html5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Min blomsida</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<h1>Välkommen till min blomsida</h1>
<h2>Om pelargoner</h2>
<p>Så här brukar jag sköta dem....</p>
<p>Billig pelargonjord köpte jag på....</p>
<h3>Mina senaste plantor</h3>
<h4>Mårbacka vita</h4>
<img src="images/vit-marbacka.jpg" alt="Vita Mårbackapelargoner" width="300px" hight="400px"/>
<h4>Mårbacka rosa</ h4>
<img src="images/rosa-marbacka.jpg" alt="Rosa Mårbackapelargoner" width="300px" hight="400px"/>
<h4>Mårbacka röda</ h4>
<img src="images/rod-marbacka.jpg" alt="Röda Mårbackapelargoner" width="300px" hight="400px"/>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
</body>
</html>