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>
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.
Schrijf in de juiste volgorde de gevraagde HTML-structuurelementen. Let goed op of het gaat over een klasse of id of gewoon een HTML tag.
Download de grid01.pdf
Download de grid02.pdf