Html: De taal van een webpagina

De html-code bepaalt hoe een browser een tekst weergeeft. De structuur van een tekst, maar ook de opmaak van een pagina.

Html of 'HyperText Markup Language' is de opmaaktaal voor webpagina's. De meeste schrijvers van webpagina's zijn zich totaal niet bewust van deze taal. Meestal maken ze gebruik van een programma die dit voor hen automatisch aanmaakt. Een basiskennis van deze taal is volgens mij noodzakelijk om er voor te zorgen dat teksten goed leesbaar blijven voor alle browsers en zoekrobotten.

De broncode van een webpagina kan je zien door binnen de tekst op de rechtermuisknop te klikken en vervolgens in het keuzemenu 'Paginabron bekijken' te kiezen.

Wat is een element?

Html gebruikt 'elementen' om te praten met de browser. Een element is, op enkele uitzonderingen na, opgebouwd uit twee tags. Een tag om het element te openen en een tag om het element te sluiten. De tags zijn opgebouwd uit wiskundige tekens en de Engelse benaming voor de inhoud. Een 'start tag' begint met het teken 'is kleiner dan' en eindigt met het teken 'is groter dan'. Een 'end tag' begint met het teken 'is kleiner dan' en 'schrap' of 'slash' en eindigt met het teken 'is groter dan'.

Hoe maak je een lege html-pagina?

Op onderstaande afbeelding zie je een lege webpagina. Op de eerste twee lijnen vertelt de code aan de browser dat dit een webpagina is in xhtml. Dit gebeurt in het element '!DOCTYPE'. Op de derde lijn zegt de code waar de inhoud zich bevindt met het element 'HTML'. Binnen het element 'HTML' vertelt de code waar de inhoud voor programma's begint met het element 'HEAD' en waar de inhoud voor de lezer begint met het element 'BODY'.

Voorbeeld

Het HEAD element

Wanneer mensen in artikels praten over meta's, dan zie je die meta's staan in de sectie HEAD tussen het element 'META'. Dit stukje bevat algemene informatie over de pagina en de website. 

Het TITLE element

Bij het maken van een webpagina moet je een titel opgeven voor jouw pagina. Een titel in de sectie HEAD en in de sectie BODY. De eerst titel zie je verschijnen in de titelbalk van de browser, de tweede titel in jouw pagina. Zoekrobotten gebruiken de eerste titel in de zoekresultaten.

In mijn artikel over PageRank liet ik weten dat bots niet houden van lange linken. Gebruik drie sleutelwoorden als titel en pas daarna de titel aan. Niet alleen bots houden niet van lange titels, ook de titelbalk en de broodkruimel (Breadcrumb) zijn niet zo dol op lange titels, zelfs Google breekt de titels af.

Het BODY element

De inhoud van jouw artikel komt dus in het element 'BODY' terecht. Een webpagina wordt in verschillende zones verdeelt, een beetje vergelijkbaar met tabellen, alleen gebruikt html daar geen tabellen voor maar 'divisions', aangeduid met het element 'DIV'. De opbouw van een pagina in verschillende zones noemt men het maken van een framework. Meestal bestaat dit uit een hoofding (header), drie kolommen (left, middle, right) omringd door een zone (content) en een voetnoot (footer).

Voorbeeld

Webredacteurs maken meestal gebruik van een 'editor' die het toelaat om webpagina's te maken zonder in de code te werken. Sommige editors geven de mogelijkheid om te kiezen. In de broncode kan je zien hoe die editor alles omzet. Er zijn heel wat editors op de markt en voor een webmaster is het soms een hele zoektocht om de juiste te vinden, want allemaal hebben ze hun voor en nadelen.

De titels

Kop 1 of header 1 is de hoofdtitel van jouw pagina. Een goed gestructureerd document heeft slechts één hoofdtitel en meerdere subtitels. Google zal de woorden in deze titels analyseren als belangrijke woorden (net zoals meta's) bestempelen.

Voorbeeld

Laat je niet leiden door de opmaak, maar door de structuur.

Kop 2 is titel 1, 2, 3, enz
Kop 3 is subtitel 1.1, 1.2 maar ook 2.1, 2.2, enz

En mooie titelstructuur is bijvoorbeeld:

Titel 1 (Heading 2)

Titel 1.1. (Heading 3)

Titel 1.2. (Heading 3)

Titel 2 (Heading 2)

Titel 2.1. (Heading 3)

Titel 2.2. (Heading 3)

In html-code worden koppen of headings aangeduid met het element Hx, waar x het getal 1 tot 6 kan zijn.

Alinea

In html-code wordt een alinea aangeduid met het element 'p'. De eerste alinea is de inleiding. De inleiding krijgt niet overal evenveel ruimte, het aantal karakters varieert. Het is dus belangrijk om de eerste zin de juiste woorden te geven. 

Html is normaal enkel geschikt om de structuur van een pagina te bepalen. Toch kent html ook een paar tags die de opmaak van een tekst bepaald. Die drie tags geven ons de mogelijkheid om tekst in het vet of bold te zetten, in het schuin of italic en onderstreept of underline. Sommige editors lossen dit op door een stijl toe te voegen. Hou er rekening mee dat lezers een streep vaak als een link aanschouwen, dus wees zuinig met het onderlijnen als opmaak.

"Met welke versie van html ben jij begonnen?"