4.1 Elementen, tags en attributen

HTML bestaat uit code, waarbinnen onder andere de content staat. En die code kan bestaan uit tags, elementen en attributen. Dat leggen we hieronder allemaal uit.

HTML-tags

Een stukje tekst op een webpagina bestaat uit (1) de tekst die we kunnen lezen en (2) HTML-code, die om de tekst heen staat. Bij een alinea staat er voor de tekst de HTML-tag <p>. De 'p' is van het Engelse paragraph, wat alinea betekent.

HTML-elementen

De begin- en eindtag vormen samen het HTML-element. In het vorige voorbeeld heb je dus het element p en de begintag <p> en de eindtag </p>.

Een ander belangrijk element zijn headings, zoals de h1. De 'h' staat hier voor heading.

Er is niet altijd een begintag en een eindtag. Sommige elementen hebben geen eindtag. Dit is bijvoorbeeld het geval bij het element voor een afbeelding, het element img:

En bij het br-element

HTML-attributen

Een element kan ook 'attributen' hebben. In het voorbeeld hierboven heeft het img-element het attribuut 'src'. Elk element heeft bepaalde attributen. Zo heeft de afbeelding ook het attribuut voor een alternatieve tekst, het alt-attribuut:

Commentaar in HTML

In HTML kun je tekst ook markeren als commentaar. Het wordt dan niet op de website getoond, je kunt het alleen zien in de broncode.

Hiervoor gebruik je '<!--' aan het begin en '-->' aan het eind van de tekst die je niet wil tonen. De code hiervoor is:

Samenvattend

• 'p' is het element voor een alinea.
• <p> is de begintag voor een alinea.
• </p> is de eindtag voor een alinea.
• Een element kan attributen hebben, zoals "src" bij een img-element.
• De meeste elementen hebben een begin- én een eindtag: <p>tekst</p>
• Sommige elementen hebben geen eindtag, zoals het img-element.

4.2 Enkele HTML-elementen (HTML5)

p (paragraph)

Betekenis	alinea (en GEEN paragraaf)
HTML-code	<p>Dit is een voorbeeld.</p>
Voorbeeld	Dit is een voorbeeld.

ul – ongeordende opsomming (unordered list)

Betekenis	ongeordende opsomming
HTML-code	<ul> <li>Olifanten</li> <li>Apen</li> </ul>
Voorbeeld	Olifanten Apen

ol – geordende opsomming (ordered list)

Betekenis	geordende opsomming
HTML-code	<ol> <li>Tel eerst tot 10.</li> <li>Geef dan je mening.</li> </ol>
Voorbeeld	Tel eerst tot 10. Geef dan je mening.

h1 (heading 1)

Betekenis	Kop 1 (of titel van een pagina)
HTML-code	<h1>Franse wijnen</h1>
Voorbeeld	Franse wijnen

h2

Betekenis	Kop 2 (kop van een paragraaf)
HTML-code	<h2>Bordeaux</h2>
Voorbeeld	Bordeaux

br

Betekenis	nieuwe regel (break)
HTML-code	The Internet Academy<br> Jaarbeursplein 6<br> 3521 AL Utrecht
Voorbeeld	The Internet Academy Jaarbeursplein 6 3521 AL Utrecht

img

Betekenis	afbeelding
Attributen	src – adres van de afbeelding (source) alt – alternatieve tekst (alternative)
HTML-code	<img src="images/retriever.jpg" alt="Retriever">
Voorbeeld

4.3 Andere code in de HTML

In de HTML is ook bijna altijd andere code opgenomen, zoals JavaScript of CSS. Vaak staat deze code in aparte bestanden en wordt er in de HTML verwezen naar deze bestanden:

4.4 Semantiek en HTML

Tot nu toe hebben we vooral aandacht besteed aan de opmaak van de teksten. Maar de elementen (zoals heading 1 of h1) en de waarde van attributen (zoals class="author") doen nog iets heel belangrijks: ze maken ook duidelijk wat de betekenis is van de tekst. Het gaat hierbij om semantiek: het toevoegen van betekenis via HTML-code.

Als een regel tekst tussen <h1>-tags staat, betekent dit dat deze tekst de titel van de pagina is.

Zo hebben de meeste tags ook een betekenis.

Het semantisch opmaken van je teksten heeft 2 belangrijke voordelen:

• Zoekmachinevriendelijkheid: zoekmachines weten zo wat de betekenis is van teksten.
• Toegankelijkheid: mensen die de opmaak van de tekst vanwege een visuele beperking niet kunnen zien, begrijpen zo toch de betekenis van de teksten.

4.5 Verschillende HTML-versies

HTML kent ook versies. De nieuwste versie is HTML5. De oudere versies – HTML 4 en XHTML 1 – worden bijna niet meer gebruikt.

In een HTML-versie zijn de 'grammaticale' regels van de HTML vastgelegd. In de allereerste regel code van een webpagina is aangegeven welke HTML-versie gebruikt wordt. Zo weten browsers hoe ze de HTML moeten vertalen naar zichtbare content. Dit proces van vertalen wordt "parsing" genoemd.

De HTML-versie is aangegeven met de tag DOCTYPE.

Het gebruiken van een moderne versie van HTML biedt een site de mogelijkheid om gebruik te maken van de nieuwste technologieën.

4.6 Testen op correcte HTML