Vad är HTML? Del 4 – Semantisk hiearki och fulHTML
Postad: 23 april 2022 | HTML-guider | No CommentsDivitis och taggsoppa
Tidigare så skrev jag att det neutrala <div>-elementet inte är sematiskt, det betyder inte att du inte kan använda det. Det är mer en fråga om hur man använder dessa divs. Det finns nämligen något som kallas för divitis och taggsoppa.
<div>-taggen är det mest mångsidiga och mest använda HTML-elementet. Själva <div> representerar inte någonting, men samtidigt gör det möjligt för utvecklare att förvandla det till nästan vad som helst. Detta görs genom användning av CSS (för styling), JavaScript (för funktionalitet) och ARIA (för att göra innehåll tillgängligt).
Denna mångsidighet gör att <div> taggar kan användas för flera olika ändamål, men tyvärr kan detta lätt leda till missbruk. När <div>-taggen inte används sparsamt kan resultatet bli en <div> tagg-soppa med innehåll utan semantisk betydelse, interaktiva element som inte är tillgängliga eller någon kombination av dessa dåliga saker.
Eftersom vi har talat om semantik, syntax och hur viktigt att använda rätt element för rätt sak på rätt plats så bör du redan nu upptäcka och förstå eventuella smärre fel. Annars blir det lätt divitis som i exemplet här nedanför.
<div id="news">
<div class="headline"> News item 1 </div>
<div class="newsstory"> story here </div>
<div class="headline"> News item 2 </div>
<div class="newsstory"> story here </div>
</div> <!-- end news div -->Det är mycket bättre om vi skriver om det så här. Dessutom tolkar webbläsarna det lättare och för SEO ger det juice.
<div class="news">
<h2>News Items</h2>
<p>Storyn here</p>
<h2>Another News Intem</h2>
<p>More text</p>
</div>Bäst vore det om vi använde följande struktur (i de fall vi vill utnyttja HTML5s nya semantiska element) men det är inte nödvändigt.
<article>
<section>
<header>
<h1>News Items</h1>
</header>
<p>Storyn here</p>
</section>
</article>
<article>
<section>
<header>
<h1>Another News Item</h1>
</header>
<p>More text</p>
</section>
</article>Divs ska alltså användas till att strukturera upp och gruppera delar av sidan i olika avsnitt, till exempel en toppavsnitt med logotyp och länkar, ett sidofält eller till och med en sidfot. De är generiska gruppelement utan standardstil det vill säga de har ingen border (gränser), padding (stoppning), margin (marginaler) eller fonter (teckensnitt).
<body>
<div class="header">
...
</div>
<div class="main">
...
</div>
<div class="footer">
...
</div>
</body>FulHTML
Exempelkoderna här nedanför innehåller ”fulhtml” och är därför knappast semantiskt korrekta. Bgcolor, html-definitionen för background-color, är enbart tillåtet i tabellceller och även om de nu är tillgängliga htmlkoder så finns det inga som heter background=”strip.jpg”.
Valign=”top” är en positionering som ska styras av CSS genom att ge elementet följande kod i stilmallen: vertical-align:top;. Cell-spacing är överhuvudtaget inte tillåtet.
<table width="92%" border="1" cellspacing="0" cellpadding="40" bordercolor="#000000" background="strip.jpg"></table><table width="50%" border="0" cellpadding="5" cellspacing="0"> <td valign="top" bgcolor="#cccccc">tabellcell</td></table>Skriver vi om dessa med semantiskt rätta element så ser det ut som följande. Observera att jag lägger ut attributen vars värden har hämtats från en presumtiv stilmall.
<table class="one"><tr><td class="td1">tabellcell</td></tr></table>
.one {width:92%; padding:0; border:1px solid #000000; background-image: url(strip.jpg) repeat left top;}
.td1 {padding:40px; margin:0;}
<table class="two"><tr><td class="td2">tabellcell</td></tr></table>
.two {width:50%; border:0; background:url(strip.jpg) repeat left top;}
.td2 {padding:5px; margin:0; background-color:#cccccc; vertical-align:top;}
Mer om CSS och vad selektorer, egenskaper och värden är får du lära dig i mina CSS-guider. Jag rekommenderar dig dock att följa ”läroplanen” genom först att läsa alla HTML-guider. Det underlättar betydligt för förståelsen av samarbetet med CSS.
Så var det ju det där elementet som hade utelämnats. Det var ett paragraph/stycke-element <p> eftersom du får använda det hur många gånger som helt på en och samma sida.