HTML-semantikk handler om å bruke HTML-elementer som gir mening til innholdet ditt. 📄 I stedet for å bruke generiske <div>-elementer, kan semantiske elementer som <header>, <article>, og <footer> forbedre både tilgjengelighet, lesbarhet, og søkemotoroptimalisering (SEO). ♿ 📖 🔍
Division
<div>-taggen blir mye brukt i HTML. Er det noe galt i det?
Før vi svarer på det la oss gå litt mer inn på hva det er og hva det gjør. Et <div>-element er et av de mest grunnleggende og allsidige HTML-elementene som har vært der siden starten. <div>-elementer har ingen semantisk betydning, noe som kan påvirke tilgjengeligheten og SEO. Den definerer en divisjon eller en seksjon i et HTML-dokument. Den hjelper deg å strukturere innhold på siden din og lar deg style og scripte dette innholdet. Dette er jo helt supert for å få på plass det meste av det du har lyst på siden din. Så, hvorfor ber jeg deg redusere bruken av den? 🤔💭
Bruk semantisk HTML!
Hva er semantisk HTML, egentlig? Med det mener vi hvilke hovedelementer vi har på en nettside med tagger. Da blir det enklere å forstå hvordan nettsiden er satt sammen.
Under skal vi se på et eksempel på en side som er skrevet stort sett ved bruk av <div>, og et eksempel med semantisk bruk av HTML. Jeg går så inn på hvorfor sistnevnte er en bedre metode.
Uten semantisk HTML
Her har vi en side laget med vanlige <div>-elementer.
<body>
<div>
<h1>Hei</h1>
<p>Velkommen til min side</p>
<div><!--Lenker til andre undersider--></div>
</div>
<div>
<h2>Forklaring av HTML-elementer</h2>
<div>
<div>header, main, footer</div>
<div>Top-, hoved- og bunninnhold.</div>
<div>aside</div>
<div>Sideinnhold eller sidebar.</div>
</div>
<div>
<h2>Seksjon</h2>
<p>Det som er her har noe med hverandre å gjøre</p>
<div>
<h3>HTML</h3>
<p>HTML (HyperText Markup Language) brukes til å strukturere innholdet på en nettside.</p>
</div>
<div>
<h3>CSS</h3>
<p>CSS (Cascading Style Sheets) brukes til å style og legge til design på en nettside.</p>
</div>
</div>
</div>
<div>
<h2>Mer informasjon</h2>
<p>Under kommer det et nytt innhold.</p>
<div>
<h2>Article eksempel</h2>
<p>Dette eksempelet kan tas ut av denne siden og plasseres på en annen side og fortsatt gi mening.</p>
</div>
</div>
<div>
<p>Opphavsrett <div>2024-11-12</div></p>
</div>
</body>Semantisk HTML
Her har vi den samme siden, men <div>-ene er erstattet av semantiske elementer.
<body>
<header>
<h1>Hei</h1>
<p>Velkommen til min side</p>
<nav><!--Lenker til andre undersider--></nav>
</header>
<main>
<h2>Forklaring av HTML-elementer</h1>
<dl>
<dt>header, main, footer</dt>
<dd>Top-, hoved- og bunninnhold.</dd>
<dt>aside</dt>
<dd>Sideinnhold eller sidebar.</dd>
</dl>
<section>
<h2>Seksjon</h2>
<p>Det som er her har noe med hverandre å gjøre</p>
<div>
<h3>HTML</h3>
<p>HTML (HyperText Markup Language) brukes til å strukturere innholdet på en nettside.</p>
</div>
<div>
<h3>CSS</h3>
<p>CSS (Cascading Style Sheets) brukes til å style og legge til design på en nettside.</p>
</div>
</section>
</main>
<aside>
<h2>Mer informasjon</h2>
<p>Under kommer det et nytt innhold.</p>
<article>
<h2>Article eksempel</h2>
<p>Dette eksempelet kan tas ut av denne siden og plasseres på en annen side og fortsatt gi mening.</p>
</article>
</aside>
<footer>
<p>Opphavsrett <date>2024-11-12</date></p>
</footer>
</body>Nå har vi gått gjennom hvordan man bruker semantisk HTML i praksis. La oss se på hvilke fordeler dette tar med seg.
Universell Utforming ♿
Semantisk HTML gjør nettsider mer tilgjengelige for brukere med funksjonsnedsettelser. Skjermlesere kan tolke og navigere innholdet mer effektivt når semantiske elementer brukes. Dette er viktig for å sikre at alle brukere har lik tilgang til informasjonen på nettsiden din.
I det første kode-eksempelet ser vi mange <div>-er. Dette vil ikke skjermleseren legge noe spesielt merke til, og den vil heller lese opp innholdet i dem uten å gi noen kontekst.
Over på det andre kode-eksempelet ser vi hovedelementer som <header> og <footer>. Disse blir derimot fanget opp og forstått av skjermleseren. Den vil da gi brukeren en bedre forståelse om hvor noe begynner og hvor noe slutter på siden. Skjermleseren vil dessuten enkelt kunne hoppe frem og tilbake på de ulike delene av siden uten å måtte lese opp selve innholdet på veien.
Semantiske elementer lar altså skjermleseren presentere innholdet på siden til leseren på en mer logisk og organisert måte. Skjermleseren forstår strukturen og innholdet bedre, noe som gir en bedre brukeropplevelse for alle. 🎧
Lesbarhet for utviklere 📖
Semantisk HTML gjør det også enklere for utviklere å forstå og vedlikeholde koden. Når vi ser på koden, ser vi en klar struktur. og det er tydelig hva hver del av siden gjør. Elementene <header>, <main>, <aside> og <footer> kan bli brukt som landemerker. Dette kan spare oss tid, og det kan redusere feil når vi jobber med store prosjekter. 👩💻👨💻
I større filer kan det dessuten bli utfordrende å se hvilket nivå du er på. Er vi flinkere til å bruke semantisk HTML, gjør vi det lettere å se hva som er hvor, og vi reduserer dermed risikoen for feil. 🐛
Hvilket av eksemplene synes du er lettest å lese?
SEO og søkemotor-effektivitet 🔍
Søkemotorer bruker HTML-strukturen til å forstå innholdet på en nettside. Semantiske elementer gir søkemotorer informasjon om hva som er viktig på siden. Dette kan så forbedre rangeringen i søkeresultater og gjøre innholdet mer synlig. 📈
I eksempelet over vil <header> indikere topp-innhold, mens <main> viser hovedinnholdet, og så videre. Dette gjør det enklere for søkemotorer å indeksere siden korrekt. Søkemotorer vurderer konteksten og relevansen av innholdet. Når du bruker semantiske HTML-elementer forteller du tydelig hvilke deler av innholdet som er viktigst, noe som videre kan bidra til bedre rangering i søkeresultatene. 🌟
Honorable mentions 🫡
Bedre fremtidssikring: Ved å bruke semantiske elementer, sikrer du at koden din blir mer fremtidssikker og forenelig med nye teknologier og standarder. Dette betyr at nettsiden din vil være enklere å oppdatere og vedlikeholde fremover. 🔮
Forbedret ytelse: Semantisk HTML kan bidra til bedre ytelse ved å redusere mengden unødvendig kode og gjøre det lettere for nettleseren å tolke innholdet. Overflødig bruk kan til og med føre til noe vi kaller divits. Dette er et begrep som refererer til en <div>-wrapper rundt elementer som ikke trenger det.
Under ser vi et eksempel på divits rundt en tabell.
<div>
<table>
<thead>
<tr>
<th>Dill</th>
<th>Dall</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</tbody>
</table>
</div>Dersom vi kvitter oss med slike unødvendige <div>-er, vil vi få raskere lastetid og en bedre brukeropplevelse. 🚀
Å bruke semantisk HTML gir mange fordeler, fra bedre tilgjengelighet og lesbarhet til forbedret SEO. Det finnes totalt 142 HTML-elementer – og så bruker du fortsatt bare <div>? Kanskje det er på tide å oppgradere til semantiske elementer der det gir mening. 🌟
Men; husk å ikke bruk de foreldede elementene da. Vedlagt i bunnen av artikkelen.