HTML5 语义元素

Semantik (af græsk oprindelse) kan defineres som studiet af sprogets betydning.

Semantiske elementer er elementer med semantik.

Hvad er semantiske elementer?

Semantiske elementer beskriver klart deres betydning for både browsere og udviklere.

Ikke-semantiskEksempler på elementer: <div> og <span> - kan ikke give nogen information om indholdet.

SemantikEksempler på elementer: <form>, <table> og <img> - definerer indholdet klart.

Browser-understøttelse

Ja Ja Ja Ja Ja

Alle moderne browsere understøtter HTML5 semantiske elementer.

Derudover kan du "hjælpe" gamle browsere med at håndtere "ukendte elementer".

Lær mere om dette kapitel i en HTML5-browser.

Nye semantiske elementer i HTML5

Mange websider indeholder HTML-kode til at indikere navigationsmenu, header og footer, f.eks. disse: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 tilbyder nye semantiske elementer til at definere forskellige dele af en side:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 语义元素

HTML5 语义元素

HTML5 <section>-elementet

<section>-elementet definerer en sektion i dokumentet.

Ifølge W3Cs HTML-dokumentation: 'En sektion er en gruppe af indhold med et tema, som normalt har en titel'.

Hjemmesiden kan opdeles i sektioner som introduktion, indhold, kontaktinformation osv.

Eksempel

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Prøv det selv

HTML5 <article>-elementet

Elementet <article> definerer uafhængigt, selvindkapslende indhold.

Dokumenter har deres egen betydning og kan læses uafhængigt af andre indhold på webstedet.

Anvendelsesscenarier for <article>-elementet:

  • Forum
  • Blog
  • Nyheder

Eksempel

<article>
   <h1>Hvad gør WWF?</h1>
   <p>WWF's mission er at stoppe forringelsen af vores planets naturlige miljø,</p>
  og byg et fremtid hvor mennesker lever i harmoni med naturen.</p>
</article>

Prøv det selv

Indlejrede semantiske elementer

I HTML5-standarden defineres elementet <article> som en komplet, selvindkapslende blok af relaterede elementer.

Elementet <section> defineres som en blok af relaterede elementer.

Kan vi bruge denne definition til at bestemme, hvordan vi skal indlejre elementer? Nej, vi kan ikke!

På internettet vil du finde HTML-sider med <section>-elementer, der indeholder <article>-elementer, samt sider med <article>-elementer, der indeholder <sections>-elementer.

Du vil også finde <section>-elementer, der indeholder <section>-elementer, samt <article>-elementer, der indeholder <sections>-elementer.

HTML5 <header>-elementet

Elementet <header> definerer rubrikken for dokumentet eller afsnittet.

Elementet <header> skal bruges som en container for introducerende indhold.

Et dokument kan have flere <header>-elementer.

Her er et eksempel på, hvordan man definerer en rubrik for et artikel:

Eksempel

<article>
   <header>
     <h1>Hvad gør WWF?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission er at stoppe forringelsen af vores planets naturlige miljø,</p>
  og byg et fremtid hvor mennesker lever i harmoni med naturen.</p>
</article>

Prøv det selv

HTML5 <footer>-elementet

Elementet <footer> definerer fodnoten for dokumentet eller afsnittet.

Elementet <footer> skal give information om de indeholdte elementer.

Foden indeholder ofte forfatteren, copyright-information, brugervilkårslinjer, kontaktinformation osv. for dokumentet.

Du kan bruge flere <footer>-elementer i et dokument.

Eksempel

<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Prøv det selv

HTML5 <nav>-elementet

<nav>-elementet definerer en samling af navigationslinks.

<nav>-elementet er designet til at definere store navigationslinkblokke. Men ikke alle links i dokumentet skal være placeret i <nav>-elementet!

Eksempel

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Prøv det selv

HTML5 <aside>-elementet

<aside>-elementet indeholder visse indhold (f.eks. sidebjælke) uden for hovedindholdet på siden.

Indholdet i aside skal være relateret til det omkringliggende indhold.

Eksempel

<p>Min familie og jeg besøgte The Epcot Center denne sommer.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center er en temapark i Disney World, Florida.</p>
</aside>

Prøv det selv

HTML5 <figure> og <figcaption>-elementer

I bøger og aviser er det almindeligt at se titler sammen med billeder.

Titlen (caption) fungerer som en synlig forklaring på billedet.

Gennem HTML5 kan billeder og titler kombineres i <figure> i elementet:

Eksempel

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norge.</figcaption>
</figure>

Prøv det selv

<img> Elementet definerer et billede,<figcaption> Elementet definerer en titel.

Hvorfor bruge HTML5-elementer?

Hvis du bruger HTML4, vil udviklere bruge deres foretrukne attributnavne til at sætte stil på websideelementer:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

På denne måde kan browseren ikke genkende det korrekte indhold på websiden.

Og gennem HTML5-elementer som: <header> <footer> <nav> <section> <article>, dette problem løses nemt.

Ifølge W3C, Semantisk netværk:

“Tillader deling og genbrug af data mellem applikationer, virksomheder og grupper.”

Semantiske elementer i HTML5

Nedenfor er en liste over HTML5s nye semantiske elementer, sorteret alfabetisk.

Disse links peger på den fulde HTML Referencemanual.

Tag Beskrivelse
<article> Definer et artikel.
<aside> Definer indhold uden for siden.
<details> Definer yderligere detaljer, som brugeren kan se eller skjule.
<figcaption> Definer titlen for <figure>-elementet.
<figure> Fastlæggelse af indhold uden for siden.
<footer> Definer dokumentets eller sektionens fodnote.
<header> Fastlæggelse af dokumentets eller sektionens rubrik.
<main> Fastlæggelse af hovedindholdet i dokumentet.
<mark> Definer vigtig eller fremhævet tekst.
<nav> Definer en navigationslink.
<section> Definer en sektion i dokumentet.
<summary> Definer den synlige titel for <details>-elementet.
<time> Definer dato/tid.