Het -article- & -section- element

uit de cursus Basiskennis HTML5 (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: De -aside-

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML5 (2019)

perm_identity Belinda | video_library 55 video's | query_builder 3:02:53

Webpagina’s maken met HTML

Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Doelgroep van deze cursus

Iedereen die wil leren hoe je statische websites maakt of haar/zijn kennis wil uitbreiden van webdesign-technieken in het algemeen. Heb je bijvoorbeeld al ervaring met het maken van websites met een CMS als WordPress. Dan nog is het bijna onmisbaar om voldoende begrip te hebben van de broncode.

Wat ga je leren

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. Je krijgt uitgebreid uitleg en inzicht in de juiste wijze waarop je de html-tags toepast.

Je leert hoe de juiste mappenstructuur voor webproducties in de zogeheten Local Root Folder. je krijgt uitleg over de semantische betekenis van de html-tags en leert hoe je pagina’s structureert conform de regels van het W3C.

Eventuele vervolgcursus

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen specifieke voorkennis nodig. Algemene kennis van de computer is wel belangrijk.

Dan ga ik nu proberen het verschil uit te leggen tussen een article- en een section-element.

Ik zeg niet voor niets proberen want het zijn lastige elementen.

Vooral omdat je soms sections plaatst in een article maar het kan ook omgekeerd.

Dus je bent echt afhankelijk van goed inzicht in de bedoeling en de betekenis van deze elementen.

Allereerst het article-element.

Onthoud dat een -article- altijd alleen toegepast mag worden voor een compleet verhaal.

Je moet je afvragen of je deze apart zou kunnen publiceren.

Dat het hele verhaal dan begrepen kan worden, dat het een kop en staart heeft.

Het section-element gebruik je om verschillende informatieblokken of onderwerpen van elkaar te scheiden.

Op deze pagina staat een artikel over de drie fundamentele wegtechnieken.

Die drie technieken zijn html, css en JavaScript.

Deze onderwerpen horen dus bij elkaar.

Je plaatst dus al deze bij elkaar horende onderwerpen samen in een article-element.

Maar omdat hier ook drie duidelijk verschillende onderwerpen betreft.

Kun je deze scheiding opgeven als section-elementen.

Jammer genoeg kun je niet altijd als stelregel nemen dat section-elementen...

...altijd alleen maar binnen article-elementen vallen.

Dat zou het makkelijkste zijn. Maar zo is het niet.

Kijk maar eens naar dit voorbeeld.

Op deze pagina bevinden zich twee duidelijke onderwerpen.

De een behandelt onderwerpen van WebDesign. De andere gaat over DTP & Vormgeving.

Om een scheiding aan te brengen zou je elk onderwerp in een section-element willen plaatsen.

Als het onderwerp op zich dusdanig compleet is dat je deze los zou kunnen publiceren.

Dan plaats je deze in een article-element.

En binnen dat article-element zou je dan weer een scheiding kunnen aanbrengen voor de verschillende onderwerpen...

Met het section-element.

Om te kunnen bepalen wat een -article- en een -section- is moet je inzicht hebben in het verhaal.

Je moet de inhoud van de pagina analyseren en dan pas beslissen wat je gaat doen.

Met dit in het achterhoofd pas ik deze elementen toe op onze pagina index-section.html.

Om deze oefening wat leuker te maken.

Heb ik in de -head- van dit document stiekem een paar css-stijlen geschreven.

Als je mij volgt met deze oefening dan wordt al doende een kleine layout zichtbaar in de browser.

We gaan beginnen.

Het verhaal in zijn geheel is een article. Deze start ik op na het main-element.

En moet ik weer afsluiten na de laatste paragraaf van het artikel en dat is hier.

De fundamentele technieken ga ik scheiden met section-elementen.

Dat is dus het onderwerp HTML, dan CSS en als laatste JavaScript.

Ik start elk onderwerp op voor de kop van het onderwerp.

En sluit deze na de laatste paragraaf van het onderwerp weer af.

En als het goed is zie je dan vanzelf deze layout verschijnen in de browser.

Let op! Het tekstblok 'Leer de fundamentele webtechnieken'.

Behoort tot een andere categorie. Daar leg ik je uit in de volgende video.