4. HTML

Een webpagina is geschreven in de codetaal HTML. In principe zorgt de HTML voor alles behalve de vormgeving van teksten en afbeeldingen. Deze vormgeving staat in zogenaamde 'Cascading Style Sheets' (CSS).

Omslag van ''

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 2 delen:

  • de tekst die we kunnen lezen
  • 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.

<p>Dit is een stukje tekst.</p>

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:

<img src="plaatje.gif">

En bij het br-element

Postbus 12<br>1224 AA Aalsmeer

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:

<img src="12345.gif" alt="Golden Retriever">

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:

<!-- Deze tekst is even uitgezet. –->

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

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
  1. Tel eerst tot 10.
  2. 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 Retriever

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:

<link rel="stylesheet" href="https://books.theinternetacademy.nl/css/normalize.css">

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.

In de 1e regel in de HTML-code staat het 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

  • Ga naar de pagina die je wilt testen.
  • Ga naar Web Developer » Tools » Validate HTML.
  • Bekijk de errors en eventueel de warnings.

Wat vind je van dit hoofdstuk?

Naar boven