1. HTML

Webpagina's bouw je met HTML. Dat is geen programmeertaal, maar enkel een gestructureerde manier van "schrijven".
Je markeert nauwkeurig alle onderdelen van de pagina.

Met de markeertaal HTML bouw je webpagina's en kan je ze eveneens aan elkaar koppelen (linken). Een webpagina bouw je niet met een tekstverwerker. Je schrijft hem best in code. Een browser (Chrome, Firefox, Internet Explorer, Opera, Safari...) leest die code en zet die om in een weergave voor de mens. Je moet in je HTML-code precies aangeven waar een titel, alinea, link, afbeelding... of wat dan ook staat, want een browser is een stuk software en die software weet anders niet wat voor jou een titel of een alinea is.

Daarom moet je elk onderdeel "selecteren" en aan de browser zeggen: "Kijk, dit is een titel!" Het lijkt een beetje op het studeren van een tekst: je duidt de belangrijkste onderdelen met een markeerstift aan. We kunnen natuurlijk niets met een markeerstift beginnen als we een webpagina bouwen. In HTML (hypertext markup language) markeren we een element door aan te duiden waar het element begint en waar het eindigt. Dit doe je op de volgende manier:

<element>
De inhoud van het element
</element>

Natuurlijk moet je niet "element" invoeren, maar de afgesproken benamingen, meestal afkortingen: zo staat "p" voor "alinea" en "h1" voor een grote "kop". In een webpagina zitten een aantal HTML-elementen. Je hoeft heus niet alles te kennen. Met een beperkt aantal basisonderdelen bouw je zo goed als alle mogelijke webpagina's.

1.1 HTML-markeringen

A. Basisstructuur webpagina

Pagina-onderdelen	Beginmarkering	Eindmarkering	Voorbeeld
Webpagina	<html>	</html>	<html> <head> </head> <body> </body> </html>
Header, algemene informatie	<head>	</head>
Zichtbare deel voor websitebezoekers	<body>	</body>

B. Onderverdeling van de pagina

Pagina-indeling	Beginmarkering	Eindmarkering
Onderverdelingen	<div>	</div>
Hoofdbalk, bannergedeelte (html5)	<header>	</header>
Onderdeel "naast" de hoofdinhoud (html5)	<aside>	</aside>
Navigatiebalk (html5)	<nav>	</nav>
Voetgedeelte (html5)	<footer>	</footer>

C. Titels in een tekst

De elementen hieronder gebruik je enkel binnen het <body></body>-gedeelte:

Titel	Beginmarkering	Eindmarkering	Voorbeelden
Kop 1	<h1>	</h1>	<h1>Deel 1</h1>
Kop 2	<h2>	</h2>	<h2>Hoofdstuk 1</h2>
Kop 3	<h3>	</h3>	<h3>1.1 Eerste titel hoofdstuk</h3>
Kop 4	<h4>	</h4>	<h4>1.1.1 Onderdeel</h4>
Kop 5	<h5>	</h5>	<h5>A. artikel</h5>
Kop 6	<h6>	</h6>	<h6>a.1 klein stukje</h6>
Groep titels	<hgroup>	</hgroup>	<hgroup> <h1>Deel 1</h1> <h2>Hoofdstuk 1</h2> </hgroup>

D. Andere structuurelementen

De elementen hieronder gebruik je enkel binnen het <body></body>-gedeelte:

Tekstonderdeel	Beginmarkering	Eindmarkering	Voorbeeld
Alinea	<p>	</p>	<p>Hier staat de tekst van een alinea.</p>
Artikel	<article>	</article>	<article> <h1>Hoegaarden lanceert nieuw bier</h1> <p>De brouwerij van het bekende Hoegaardenbier...</p> </article>
Rubriek	<section>	</section>	<section> <article> <h1>Hoegaarden lanceert nieuw bier</h1> <p>De brouwerij van het bekende Hoegaardenbier...</p> </article> <article … </article> </section>

1.2 Geneste elementen

In HTML kan je elementen "nesten". Dit wil zeggen dat het ene element in het andere kan zitten. Of beter gezegd: het kan niet alleen, het moet ook! Net zoals je in een grote doos kleinere dozen en in die kleinere dozen nog kleinere of losse elementen. Je moet die elementen dan ook in elkaar steken en niet over elkaar laten hangen.

Zo kan je in een alinea bijvoorbeeld een stukje vetgedrukt maken:

<p>Dit een tekst met <strong>paar zeer belangrijke woorden in</strong>.</p>

In de browser ziet de bovenstaande code er als volgt uit:

Dit is een tekst met een paar zeer belangrijke woorden in.

De HTML-markering (HTML-tag) duidt aan dat (een stukje van) de tekst vetgedrukt moet weergegeven worden. Of je kan nog dieper "nesten" en een deel van die belangrijke woorden ook "schuingedrukt" weergeven.

Dit is een tekst met een paar zeer belangrijke woorden in.

In de browser ziet de bovenstaande code er als volgt uit:

Dit is een tekst met een paar zeer belangrijke woorden in.