Semantische html-elementen

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 Document Outline

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.

Een website kun je ontleden in een aantal onderdelen.

Bovenaan de site vind je bijna altijd het logo en de naam van het bedrijf.

Hieraan kun je herkennen van wie de website is.

Meestal volgt dan direct de navigatiebalk.

Dat is natuurlijk een heel belangrijk onderdeel van de pagina.

Want vanuit hier moet je alle pagina's snel kunnen vinden en bezoeken.

Helemaal onderaan de pagina vind je de algemene en juridische gegevens van het bedrijf.

Hier staan vaak de bedrijfs- en adresgegevens.

Samen met links naar de copyright, algemene voorwaarden en overige algemene bedrijfsinformatie.

Het gebied tussen de navigatie en de footer.

Wordt dan gebruikt om de daadwerkelijke informatie van de pagina te plaatsen.

Voor elk van deze gebieden zijn er specifieke semantische html-elementen.

Je hebt de -header-, -main- en de -footer-.

Deze elementen geven betekenis aan de inhoud ervan.

In de -header- plaats je zaken als de bedrijfsnaam, het logo en soms ook de navigatiebalk.

Het element -main- wordt voor de inhoudelijke informatie van de pagina gebruikt.

Deze informatie wisselt natuurlijk op elke pagina.

Terwijl de inhoud van de header en de footer meestal voor de gehele site hetzelfde is.

Voor de algemene & juridische informatie gebruik je de -footer-.

Dankzij deze semantische html-elementen kan deze pagina door zoekmachines goed geïndexeerd worden.

Maar hiermee zijn we er nog niet.

De hoofdnavigatie van een website plaats je altijd in het nav-element.

De zoekmachines gebruiken links binnen het nav-element om meer context te geven aan de zoekresultaten.

En meer te weten te komen over de inhoud van de website.

Kijk maar onder het resultaat in Google staan hier ook de links vermeld

die door mensen het meest bezocht worden.

De daadwerkelijke inhoud van een pagina maak je op met -sections- en -articles-.

Een -article- is een op zichzelf staand verhaal.

De inhoud ervan heeft een kop en een staart.

En moet ook zonder de verdere aanwezigheid van de website

publicatiewaarde hebben en begrepen kunnen worden.

Maar binnen een -section- kunnen ook weer -articles- voorkomen.

Dat maakt het voor webdesigners soms moeilijk

om de -section- en -article- op de juiste manier toe te passen.

Ik kom hier op een latere video nog op terug.

Het aside-element is altijd een kind van een Parent.

Meestal van de het main-element.

Je gebruikt dit element voor zijdelingse of aanvullende informatie.

De -aside- moet wel direct te maken hebben met de informatie die ernaast wordt aangeboden.

Anders mag het geen -aside- zijn.

Zo dit is even in grote lijnen hoe een webpagina gestructureerd moet worden.

In de komende video's licht ik al deze onderdelen extra toe.