HTML5 意义元素

Semantiek (van oorsprong uit het oude Griekenland) kan worden gedefinieerd als het onderzoek naar de betekenis van taal.

Semantische elementen zijn elementen met betekenis.

Wat zijn semantische elementen?

Semantische elementen beschrijven duidelijk hun betekenis aan browsers en ontwikkelaars.

Niet-semantischVoorbeelden van elementen: <div> en <span> - kunnen geen informatie over hun inhoud verstrekken.

SemantiekVoorbeelden van elementen: <form>, <table> en <img> - definiëren hun inhoud duidelijk.

Browserondersteuning

Ja Ja Ja Ja Ja

Alle moderne browsers ondersteunen HTML5 semantische elementen.

Daarnaast kunt u oude browsers helpen om 'onbekende elementen' te verwerken.

Bekijk dit hoofdstuk in een HTML5-browser om meer te leren.

Nieuwe semantische elementen in HTML5

Vele websites bevatten HTML-code voor navigatie, kop en voettekst, zoals deze: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 biedt nieuwe semantische elementen om verschillende delen van een pagina te definiëren:

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

HTML5 意义元素

HTML5 意义元素

HTML5 <section>-element

Het <section>-element definieert een sectie in een document.

Volgens de HTML-documentatie van W3C: 'Een sectie is een groep inhoud met een thema, die meestal een titel heeft'.

Het startscherm van een website kan worden opgedeeld in secties zoals introductie, inhoud, contactinformatie enz.

Voorbeeld

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

Probeer het zelf uit

HTML5 <article>-element

Het <article>-element definieert onafhankelijke, inclusieve inhoud.

Een document heeft zijn eigen betekenis en kan afzonderlijk van de andere inhoud van de website worden gelezen.

Toepassingsscenario's van het <article>-element:

  • Forum
  • Blog
  • Nieuws

Voorbeeld

<article>
   <h1>Wat doet de WWF?</h1>
   <p>De missie van de WWF is om de verslechtering van het natuurlijke milieu van onze planeet te stoppen,</p>
  en bouw een toekomst op waarin mensen in harmonie met de natuur leven.</p>
</article>

Probeer het zelf uit

Geïntegreerde semantische elementen

In de HTML5-norm wordt het <article>-element gedefinieerd als een zelfstandige, inclusieve blok van relevante elementen.

Het <section>-element wordt gedefinieerd als een blok van relevante elementen.

Kunnen we beslissen hoe we elementen kunnen nesten met deze definitie? Nee, we kunnen dat niet!

Op het internet vindt u HTML-pagina's waarin <section>-elementen <article>-elementen bevatten, en pagina's waarin <article>-elementen <sections> bevatten.

U zult ook <section>-elementen vinden die <section>-elementen bevatten, en <article>-elementen die <sections> bevatten.

HTML5 <header>-element

Het <header>-element definieert de koptekst voor een document of sectie.

Het <header>-element moet worden gebruikt als een container voor inleidend materiaal.

Een document kan meerdere <header>-elementen bevatten.

Hier is een voorbeeld van een document dat een koptekst definieert:

Voorbeeld

<article>
   <header>
     <h1>Wat doet de WWF?</h1>
     <p>De missie van de WWF:</p>
   </header>
   <p>De missie van de WWF is om de verslechtering van het natuurlijke milieu van onze planeet te stoppen,</p>
  en bouw een toekomst op waarin mensen in harmonie met de natuur leven.</p>
</article>

Probeer het zelf uit

HTML5 <footer>-element

Het <footer>-element definieert de voettekst voor een document of sectie.

Het <footer>-element moet informatie bieden over de elementen die het bevat.

De voettekst bevat meestal de auteur van het document, copyrightinformatie, links naar gebruiksvoorwaarden, contactinformatie, enz.

U kunt meerdere <footer>-elementen gebruiken in een document.

Voorbeeld

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

Probeer het zelf uit

HTML5 <nav> element

Het element <nav> definieert een verzameling navigatielinks.

Het element <nav> is bedoeld om grote navigatielinkblokken te definiëren. Niet alle links in een document hoeven echter in het element <nav> te staan!

Voorbeeld

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

Probeer het zelf uit

HTML5 <aside> element

<aside> is een element dat bepaalde inhoud bevat die buiten de hoofdinhoud van de pagina staat (bijvoorbeeld een zijbalk).

De inhoud van aside moet gerelateerd zijn aan de omringende inhoud.

Voorbeeld

<p>Mijn familie en ik hebben deze zomer The Epcot center bezocht.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is een pretpark in Disney World, Florida.</p>
</aside>

Probeer het zelf uit

HTML5 <figure> en <figcaption> elementen

In boeken en kranten is het zeer gebruikelijk om titels te zien die met afbeeldingen zijn gecombineerd.

De rol van de titel (caption) is om een zichtbare uitleg toe te voegen aan de afbeelding.

Met HTML5 kunnen afbeeldingen en titels worden gecombineerd in <figure> in het element:

Voorbeeld

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

Probeer het zelf uit

<img> Het element definieert een afbeelding,<figcaption> Het element definieert een titel.

Waarom HTML5-elementen gebruiken?

Als je HTML4 gebruikt, zullen ontwikkelaars hun favoriete attribuutnamen gebruiken om de stijl van de pagina-elementen in te stellen:

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

Op deze manier kan de browser de juiste inhoud van de website niet herkennen.

En door HTML5-elementen zoals: <header> <footer> <nav> <section> <article>, dit probleem wordt opgelost.

Volgens W3C, Semantisch Web:

“Toestaan van het delen en hergebruiken van gegevens over verschillende applicaties, bedrijven en groepen.”

Semantische elementen in HTML5

Hieronder worden de nieuwe semantische elementen van HTML5 in alfabetische volgorde vermeld.

Deze links verwijzen naar de volledige HTML referentiehandleiding.

Tag Beschrijving
<article> Definieer een artikel.
<aside> Definieer inhoud buiten de pagina.
<details> Definieer extra details die de gebruiker kan bekijken of verbergen.
<figcaption> Definieer de titel van het <figure> element.
<figure> Bepaal inheemse inhoud, zoals illustraties, grafieken, foto's, codelijsten, enz.
<footer> Definieer de voet van het document of de sectie.
<header> Bepaal de kop van het document of de sectie.
<main> Bepaal het hoofdinhoud van het document.
<mark> Definieer belangrijke of benadrukte tekst.
<nav> Definieer navigatielinks.
<section> Definieer een sectie in het document.
<summary> Definieer de zichtbare titel van het <details> element.
<time> Definieer datum/tijd.