11. Nieuwe structuurelementen

1. Semantische elementen

2. Kenmerken van elk element

3. Oefeningen op grid

4. Taak

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

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

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

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

<Article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<mainv
<mark>
<nav>
<section>
<summary>
<time>

web
web

Voor meer details surf naar w3schools

Allereerst gaan we ons verdiepen over de kenmerken van elk element. Dit is heel
belangrijk om dit voor ogen te houden wanneer je breedte en hoogtes insteld, alsook
margin en padding toevoegt in de opmaak.

Een block element zal na het element automatisch een nieuwe lijn beginnen, alsof
er een 'enter' achter is geplaatst. Het houdt ook rekening met de
marges en de padding van het element.
Standaard: article, header, aside, hgroup, blockquote, body, canvas, caption, col, colgroup, dd,
div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h*, header, hgroup, hr, li
map, object, ol, output, p, pre, projgress, section, table, tbody, textarea, tfoot, th,
thead, tr, ul , video.
Inline elementen plaatsen zichzelf naast elkaar in de rij. Er kan geen hoogte en breedte op ingesteld worden. De ingestelde linker en rechter marges (+padding)
worden gerespecteerd, maar de boven en onder marges (+padding) worden
genegeerd.
Standaard: b, big, i, small, tt, abbr, acronym, cite, code, dfn, em kbd, strong, samp, var, a, bdo, br,
img, map, object, q, script, span, sub, sup, button, input, label, select, textarea.
Standaard bestaan er geen inline-block elementen, al wordt deze handige
eigenschap wel vaak aan elementen toegekend via display: inline-block.
Voorbeeld is onze navigatie die we via li { display: inline-block; } naast elkaar
plaatsen.