1.2: HTML-Elementen / HTML-Labels / HTML-Tags
Zoals elke taal is ook de html-taal die jullie gaan leren opgebouwd uit woorden. De woorden die tot de html-taal behoren noemen we Elementen. In de literatuur komen we ook de naam Labels tegen. In de Engeltalige literatuur wordt er gesproken over Tags.
<html> </html>
Elk document dat we maken begint met <html> en eindigt met </html>. Je ziet dat deze twee elementen precies hetzelfde zijn op de slash ( / ) na. Deze / gaat vooraf aan het eind-element.
De gehele inhoud van het document komt tussen het html begin- en eindelement te staan. Aan dit element herkent de Browser een html-document, oftewel webpagina.
<head> </head>
Het tweede element dat we in ons document opnemen is <head>. Dit element heeft ook een eind-element namelijk: </head>. Tussen dit begin- en eindelement geven we de Browser informatie over het document. Wij gebruiken het voorlopig alleen voor de titel van het document (zie hieronder).
<title> </title>
Met dit element geven we ons document een titel. Het geheel plaatsen we binnen de <head> elementen. Kies de omschrijving van deze titel met zorg. Hij moet niet al te lang zijn, maar wel duidelijk weergeven waar de webpagina over gaat. De titel wordt weergeven in de titelbalk van de Browser, in het betreffende TAB-blad en onderaan in de statusbalk van je Browser. Daarnaast wordt de naam automatisch gebruikt wanneer iemand jouw pagina opneemt in zijn/haar favorieten-lijst (bookmarks).
<body> </body>
Binnen de <body>-elementen komt de zichtbare inhoud van onze webpagina.
Samengevat ziet het minimale document er dus als volgt uit:
<head>
<title>naam van de webpagina</title>
</head>
<body>
hier de inhoud van de webpagina
</body>
</html>
Neem nu bovenstaande elementen over in een html-editor (Offline bijv. Notepad++ of Online bijv. www.codeanywhere.com) en vul tussen de <body>elementen zelf een tekst in. Bewaar dit bestand als index.html. Je eerste pagina is nu klaar. Weliswaar nog zonder enige vormgeving. Zelfs de Enters (regeleinden) doen het niet, maar dat is stof voor een volgende paragraaf in hoofdstuk 1.
Zoals je ziet kunnen elementen elkaar omsluiten. Hiermee bedoelen we dat het begin- en eindelement van de title zich geheel en al bevindt binnen het begin- en eindelement van de head. Het in elkaar bevinden van elementen noemen we nesten. Ze mogen elkaar dus niet overlappen. Dan is er verkeerd genest.
Goed genest is dus:
En fout genest is:
En dit:
<title><head>......</head></title>Wij spreken af dat we de elementen, in het Engels dus TAGS of LABELS genoemd, alléén in kleine letters noteren. Dus <html> </html> is goed en <HTML> </HTML> is fout!