01. structuur
Last updated
Last updated
Als je een krant bekijkt staan erop een blad verschillende elementen die telkens weer terugkeren: een hoofdtitel, een chapeau, een tussentitel, paragrafen enz. Voor elk artikel is er een kop, wat tekst en eventueel één of meerdere paragrafen. Structuur helpt lezers de artikels in de krant te begrijpen. Er bestaan nog andere documenttypes, bijvoorbeeld een verzekeringsformulier. Verzekeringsformulieren hebben verschillende rubrieken, elk met een kop en een vragenlijst met invulvakken of selectievakjes om aan te vinken.
HTML beschrijft de structuur van webpagina's. HTML is de afkorting van HyperText Markup Language. We maken gebruik van HTML-elementen (tags) om de verschillende soorten inhoud van elkaar te onderscheiden. Voor elk van de meest voorkomende soorten inhoud bestaat er een specifiek HTML-element.
De betekenis van een zin in een taal is de semantiek van de zin. De betekenis van de zin kan pas blijken als we alle woorden van de zin hebben gelezen of gehoord, en de structuur van de zin tot ons is doorgedrongen. Een syntactisch correcte zin als: 'Geef de naam van de achtste dag van de week.' heeft geen betekenis en is dus semantisch gezien fout want een week heeft slechts zeven dagen.
Semantische HTML legt enkel de nadruk op de overeenkomst tussen de naam van het element en de inhoud ervan. De naam van een semantisch element drukt duidelijk zijn betekenis uit, zowel voor de ontwikkelaar als voor de browser.
Een klassiek HTML-element bestaat uit 3 belangrijke onderdelen: de opening, inhoud en sluiting. Zowel de opening als de sluiting beginnen met het teken < en eindigen met het teken >. Tussen deze tekens staat de naam van het element. De naam van het opening- en sluitingselement zijn altijd hetzelfde. Vóór de naam van de sluitingstag wordt een schuine streep geplaatst (/). In het codevoorbeeld hieronder vind je al enkele van deze elementen terug.
Tekst indelen houdt in dat je stukken of onderdelen van die tekst moet kunnen benoemen, zodat de browser weet hoe de tekst in zijn geheel moet worden weergegeven Om de structuur van een webpagina te beschrijven voegen we code toe aan de woorden die op de pagina moeten verschijnen. Die toegevoegde code worden ook metagegevens genoemd.
Als je schrijft voor het web moet je metagegevens aan de tekst toevoegen om de indeling ervan aan te geven. In HTML worden die metagegevens voorgesteld als tags. HTML is niet hoofdlettergevoelig. Er geldt een algemene afspraak om alle html code in kleine letters te schrijven.
Om een HTML-pagina te starten heb je enkele belangrijke basiselementen die steeds terugkomen.
De <!DOCTYPE> declaratie wordt helemaal bovenaan de pagina geplaatst. En is dus het eerste HTML-element dat je nodig hebt om een webpagina te maken. Dit element is uniek in zijn soort, want het was/is het enige element dat je in hoofdletters moe(s)t schrijven.
De HTML5-versie is gemakkelijk te gebruiken:
Voorafgaan aan HTML5 was dat wel even anders (ter info enkele voorbeelden):
Het <!DOCTYPE> element voor HTML van vroeger, is een erfenis van SGML, en bestond uit drie hoofdonderdelen: de codenaam, de openbare id-reeks en de DTD (Document Type Definition) URL. Het is een vreemde mix van hoofdletters, kleine letters, aanhalingstekens en schuine strepen, en een URL naar een nog minder leesbaar bestand.
De browser maakt gebruik van het doctype-element om te weten hoe de webpagina gerenderd moet worden. Het element was vroeger van groot belang om te bepalen welke versie van (x)HTML er gebruik werd. De HTML 5-specificatie stelt dat de <!doctype> niet hoofdlettergevoelig is. Maar eerdere versies van HTML vereisen dat <!doctype> in hoofdletters staat. Je zal merken dat veel van HTML5 achterwaarts compatibel is met eerdere versies. De overgrote meerderheid van browsers op de markt herkennen de nieuwe <!doctype> tag en herkennen die als gewoon "standards-modus". Met behulp van de achterwaarts compatibele versie van de <!doctype> kan je nu al HTML5 gebruiken en toch compatibel zijn met browsers van het verleden!
Het <html> element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. Dit element wordt ook wel het root-element genoemd.
Een HTML-document bestaat uit twee delen: de <head> en de <body>.
In het voorbeeld zie je het juiste gebruik van het lang-attribuut. Dit attribuut wordt voornamelijk gebruikt door zoekmachines die webpagina's indexeren en door voorleessoftware om te kunnen achterhalen hoe ze de tekst moeten uitspreken.
Het <head> element bevat informatie over de webpagina die niet in het documentvenster wordt weergegeven. Die informatie zijn bijvoorbeeld instructies aan de browser over hoe het document verwerkt of weergegeven moet worden.
In het <head> element van elke pagina moet in ieder geval het <title> element worden opgenomen. Hiermee wordt een titel vastgelegd welke in de meeste browsers te zien is in de titelbalk van het venster (tab bovenaan). Deze titel wordt ook gebruikt door zoekmachines om de pagina van een naam te voorzien in de zoekresultaten.
Deze elementen bevatten informatie over de webpagina zoals de gebruikte karakterset en keywords. Het is belangrijk dat het charset meta element altijd voorzien is. Dit zorgt er namelijk voor dat de browser weet welke karakterset hij moet tonen. Het meta element met de naam 'keywords' is ook altijd aangeraden om beter gevonden te worden door zoekmachines.
meer info: https://www.w3schools.com/tags/tag_meta.asp try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_meta
Het body element bevat alle zichtbare informatie. Hierin wordt de paginastructuur, die voor de bezoekers zichtbaar wordt, opgemaakt.
In programmeertalen kan commentaar toegevoegd worden aan de broncode. Commentaar heeft als voornaamste doelstelling de werking van de broncode toe te lichten. Bij het verwerken van de broncode wordt deze commentaar genegeerd en dus door de browser niet uitgevoerd.
Code wordt door de browser gelezen, commentaar is bedoeld voor de programmeur. Commentaar beschrijft hoe de code precies in mekaar steekt en maakt het gemakkelijker om code met andere programmeurs te delen en in de toekomst te bewerken.
Commentaar in HTML begint met <!-- en eindigt met --> .
Emmet: ctrl /
HTML5 is voorzien van enkele elementen die kunnen gebruikt worden voor de opmaak van het document. Deze gedragen zich zoals het div element, maar hebben een afgesproken plaats op de webpagina. Deze plaats zal nog wel zelf moeten worden toegewezen met CSS. De layout elementen dienen gebruikt te worden volgens volgende afbeelding:
meer info: https://www.w3schools.com/html/html5_semantic_elements.asp
Het header element is een container voor "een groep van inleidende of navigatiehulpmiddelen."
try it yourself header: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_header
<nav> heeft tot doel de HTML-code die gebruikt wordt om de navigatie te creëeren te omsluiten.
Het nav element is een div met een specifieke semantiek (bedoeling/betekenis). Het is een blokelement, dus paginabreed, waarin je de navigatie van je pagina plaatst.
Het <nav>-element omsluit een blok met koppelingen die voor de navigatie instaan. Dit kan bijvoorbeeld een navigatiemenu van een website zijn.
Spraaksynthesizers kunnen bijvoorbeeld dit element overslaan bij het voorlezen, zodat de gebruiker sneller de daadwerkelijke inhoud van het document te horen krijgt.
try it yourself nav: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_nav
<main> specificeert de hoofdinhoud van de <body> van een document.
De inhoud in het <main>element moet uniek zijn voor het document. Het mag geen inhoud bevatten die in documenten wordt herhaald, zoals zijbalken, navigatielinks, copyrightinfo, logo's en zoekformulieren.
Een sectie een gespecialiseerd deel (component, onderdeel) van een groter geheel.
Het element <section> beschrijft een sectie van de applicatie of van het document. Een sectie bevat een bij elkaar horende groep elementen met inhoud. Een sectie kan een eigen koptekst hebben maar dat is niet verplicht. Voorbeelden van secties van een pagina zijn tabbladen van een tabbladgroep, of genummerde elementen van een opsomming. Een webpagina kan meerdere <section> elementen bevatten.
Het <section> element is een semantisch element en gebruik je niet voor styling. Het <section> is geen algemene containertag zoals het <div> element.
Het <section> element is een semantisch element en is bedoeld om logisch bij elkaar horende elementen op een pagina te groeperen. Elke nieuwe <section> maakt een nieuwe tak in de documentstructuur. Bij een <div> gebeurt dat niet. Alle <section> elementen worden opgenomen in de documentstructuur (document outline) van het document.
meer info: http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article/ try it yourself section: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_section
Een <article> is iets dat afzonderlijk beschouwd kan worden, maar toch deel uitmaakt van een geheel. Een <article> groepeert inhoud die bij elkaar hoort en deel uitmaakt van een groter geheel maar tegelijkertijd ook op zich zelf kan bestaan. Bijvoorbeeld een blogartikel (dat bijvoorbeeld in een reader getoond kan worden zonder omliggende inhoud van de site), een nieuwsbrief- of krantenartikel, een commentaar bij een artikel of elke andere op zich zelf bestaande vorm van inhoud.
De inhoud van een <article> is een betekenisvol en op zichzelf bestaand geheel (entiteit) en kan in zijn geheel uit de website gelicht worden om in andere context gebruikt of verspreid te worden.
Is dat laatste niet nodig gebruik je voor de indeling van je pagina beter <section>.
try it yourself acticle: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_article
Het aside element is een div met een specifieke semantiek (bedoeling/beketenis). Het is een blokelement, dus paginabreed, waarin je info aan de zijkant van je pagina plaatst.
In het <aside> element worden elementen op een pagina geplaatst die zijdelings bij een hoofdartikel of -sectie horen. De inhoud van <aside> … </aside> hoort bij het ouderelement waarbinnen het wordt ingebed. Het <aside> element is geschikt voor quotes, video's, advertenties en bijvoorbeeld blokken met gerelateerde berichten of hyperlinks. De naam <aside> heeft niets te maken met de positie of visuele weergave van de inhoud.
Als je een <aside> niet opneemt binnen een ander structuurelement zoals <section> of <article>, is het top-levelelement (body ) het ouderelement van de betreffende <aside> en slaat de inhoud ervan op de hele pagina. Dat kan de bedoeling zijn, maar meestal heeft dat semantisch gezien, geen enkel nut. Let er dus op dat de <aside>-tags binnen de juiste structuurtags worden geplaatst.
try it yourself aside: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_aside
Het footer element is een div met een specifieke semantiek (bedoeling/betekenis). Het is een blokelement, dus paginabreed, waarin info onderaan een pagina wordt geplaatst.
Het onderste gedeelte van een webpagina is een voettekst of footer. Dit gebied bevat meestal de naam van de onderneming of organisatie die de website publiceert, met inclusief info over auteursrechten (copyright), privacy policy en GDPR.
try it yourself footer: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_footer
Attributen worden gebruikt om elementen extra functionaliteiten te geven. Attributen worden altijd in de openingstag opgegeven en worden met een spatie gescheiden van de elementnaam. Eén element kan meerdere attributen bevatten.
De waarde van het lang attribuut geeft aan in welke taal onze HTML-pagina wordt opgesteld, namelijk het Nederlands uit België.
Het id attribuut kan worden toegekend aan eender welk html element. Het wordt gebruikt om gebruikte elementen apart te kunnen identificeren. Je kan zowel vanuit CSS als vanuit javascript elementen aanspreken. Het is van belang dat geen 2 elementen hetzelfde id hebben anders is dit niet meer uniek.
meer info: https://www.w3schools.com/html/html_id.asp
Het class attribuut wordt voornamelijk gebruikt om elementen te klasseren. bvb: Het onderscheid maken tussen een p-element gebruikt voor een artikel en een p-element gebruikt voor een reactie.
meer info: https://www.w3schools.com/html/html_classes.asp
In html wordt er een onderscheid gemaakt tussen blok en in-lijn elementen. Een blok-element neemt zonder opmaak de volledige breedte van de pagina in beslag. Blok-elementen zullen dus steeds onder elkaar verschijnen.
Voorbeelden van blok-elementen:
p, pre, blockquote, address, div, center, h1..h6, br, hr, ul, ol, li, dl, dt, dd, table en form
Tegenover blok-elementen staat in-lijn elementen die zoals tekst achter elkaar verschijnen. Ze bezetten de breedte van hun eigen inhoud. Voorbeelden van inline-elementen:
a, img, font, span, iframe, q, <input>
Het is mogelijk om meerdere elementen te groeperen in 1 blok element. Hiervoor wordt gebruik gemaakt van het <div> element. Dit element kunnen we dus als een container gebruiken om meerder elementen in te steken en deze dan later te manipuleren als zijnde 1 blok.
Het is ook mogelijk om elementen in-lijn te groeperen. Hiervoor wordt gebruik gemaakt van het <span> element.
