HTML -zelfstudie

HTML HOME HTML-introductie HTML-editors HTML basis HTML-elementen HTML-kenmerken HTML-koppen HTML-alinea's HTML-stijlen HTML-opmaak HTML-citaten HTML-opmerkingen HTML-kleuren HTML-CSS HTML-links HTML-afbeeldingen HTML-favicon HTML-tabellen HTML-lijsten HTML-blok en inline HTML-klassen HTML-ID HTML-iframes HTML-JavaScript Paden voor HTML-bestanden HTML-kop HTML-indeling HTML-responsief HTML-computercode HTML-semantiek HTML-stijlgids HTML-entiteiten HTML-symbolen HTML-emoji's HTML-tekenset HTML-URL-codering HTML versus XHTML

HTML -formulieren

HTML-formulieren HTML-formulierkenmerken HTML-formulierelementen HTML-invoertypen HTML-invoerkenmerken Kenmerken HTML-invoerformulier

HTML -afbeeldingen

HTML-canvas HTML-SVG

HTML- media

HTML-media HTML-video HTML-audio HTML-plug-ins HTML-YouTube

HTML API's

HTML-geolocatie HTML slepen/neerzetten HTML-webopslag HTML-webwerkers HTML-SSE

HTML- voorbeelden

HTML-voorbeelden HTML-quiz HTML-oefeningen HTML-certificaat HTML-samenvatting HTML-toegankelijkheid

HTML- verwijzingen

HTML-taglijst HTML-kenmerken Algemene HTML-kenmerken Ondersteuning voor HTML-browser HTML-gebeurtenissen HTML-kleuren HTML-canvas HTML-audio/video HTML-documenttypen HTML-tekensets HTML-URL-codering HTML-taalcodes HTTP-berichten HTTP-methoden PX naar EM-omzetter Toetsenbord sneltoetsen

HTML -semantische elementen


Semantische elementen = elementen met een betekenis.


Wat zijn semantische elementen?

Een semantisch element beschrijft duidelijk de betekenis ervan voor zowel de browser als de ontwikkelaar.

Voorbeelden van niet-semantische elementen: <div>en <span>- Zegt niets over de inhoud ervan.

Voorbeelden van semantische elementen: <form>, <table>, en <article>- Definieert duidelijk de inhoud.


Semantische elementen in HTML

Veel websites bevatten HTML-code zoals: <div id="nav"> <div class="header"> <div id="footer"> om navigatie, koptekst en voettekst aan te geven.

In HTML zijn er enkele semantische elementen die kunnen worden gebruikt om verschillende delen van een webpagina te definiëren:  

  • <artikel>
  • <terzijde>
  • <details>
  • <figcaption>
  • <figuur>
  • <voettekst>
  • <kop>
  • <hoofd>
  • <mark>
  • <nav>
  • <sectie>
  • <samenvatting>
  • <tijd>
HTML-semantische elementen


HTML <sectie>-element

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

Volgens de HTML-documentatie van W3C: "Een sectie is een thematische groepering van inhoud, meestal met een kop."

Voorbeelden van waar een <section>element kan worden gebruikt:

  • hoofdstukken
  • Invoering
  • Nieuwsberichten
  • Contactgegevens

Een webpagina kan normaal gesproken worden opgesplitst in secties voor introductie, inhoud en contactgegevens.

Voorbeeld

Twee secties in een document:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>


HTML <article>-element

Het <article>element specificeert onafhankelijke, op zichzelf staande inhoud.

Een artikel moet op zichzelf logisch zijn en het moet mogelijk zijn om het onafhankelijk van de rest van de website te verspreiden.

Voorbeelden van waar het <article>element kan worden gebruikt:

  • Forumberichten
  • Blog berichten
  • Gebruikerscommentaar
  • Productkaarten
  • Krantenartikels

Voorbeeld

Drie artikelen met onafhankelijke, op zichzelf staande inhoud:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

Voorbeeld 2

Gebruik CSS om het element <article> op te maken:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>

<article> nesten in <section> of vice versa?

Het <article> element specificeert onafhankelijke, op zichzelf staande inhoud.

Het <section>element definieert sectie in een document.

Kunnen we de definities gebruiken om te beslissen hoe we die elementen nesten? Nee we kunnen niet!

U vindt dus HTML-pagina's met <section>elementen die <article>elementen bevatten en <article>elementen die <section>elementen bevatten.


HTML <header>-element

Het <header>element vertegenwoordigt een container voor inleidende inhoud of een set navigatielinks.

Een <header>element bevat meestal:

  • een of meer kopelementen (<h1> - <h6>)
  • logo of icoon
  • auteurschap informatie

Opmerking: u kunt meerdere <header>elementen in één HTML-document hebben. Kan echter <header>niet binnen een <footer>, <address>of een ander <header>element worden geplaatst.

Voorbeeld

Een header voor een <article>: 

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

HTML <footer>-element

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

Een <footer>element bevat meestal:

  • auteurschap informatie
  • informatie over copyright
  • contactgegevens
  • sitemap
  • terug naar boven links
  • gerelateerde documenten

U kunt meerdere <footer>elementen in één document hebben.

Voorbeeld

Een voettekstsectie in een document:

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

HTML <nav>-element

Het <nav>element definieert een set navigatielinks.

Merk op dat NIET alle links van een document in een <nav>element zouden moeten staan. Het <nav>element is alleen bedoeld voor grote blokken navigatielinks.

Browsers, zoals schermlezers voor gebruikers met een handicap, kunnen dit element gebruiken om te bepalen of de initiële weergave van deze inhoud moet worden weggelaten.

Voorbeeld

Een set navigatielinks:

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

HTML <aside>-element

Het <aside>element definieert wat inhoud naast de inhoud waarin het is geplaatst (zoals een zijbalk).

De <aside>inhoud moet indirect gerelateerd zijn aan de omringende inhoud.

Voorbeeld

Geef wat inhoud weer naast de inhoud waarin het is geplaatst:

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

Voorbeeld 2

Gebruik CSS om het <aside>-element op te maken:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

HTML <figuur> en <figcaption> Elementen

De <figure>tag specificeert op zichzelf staande inhoud, zoals illustraties, diagrammen, foto's, codelijsten, enz.

De <figcaption>tag definieert een bijschrift voor een <figure>element. Het <figcaption>element kan als eerste of als laatste kind van een <figure>element worden geplaatst.

Het <img>element definieert de eigenlijke afbeelding/illustratie. 

Voorbeeld

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

Waarom semantische elementen?

Volgens het W3C: "Met een semantisch web kunnen gegevens worden gedeeld en hergebruikt tussen applicaties, ondernemingen en gemeenschappen."


Semantische elementen in HTML

Hieronder vindt u een lijst van enkele semantische elementen in HTML.

Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .