Tags en elementen

Een element bestaat meestal uit drie dingen achter elkaar: een openende tag, wat inhoud en een afsluitende tag met een schuine streep.

De delen van een element

Kijk naar <p>Bread is ready.</p>. De openende tag <p> zegt dat hier een alinea begint. De afsluitende tag </p>, met een schuine streep na de eerste punthaak, zegt dat hij eindigt. Alles ertussen is de inhoud. Het geheel, tags plus inhoud, is het element. Mensen zeggen vaak tag als ze element bedoelen, en in een gesprek is dat prima, maar het verschil helpt als je documentatie leest: een tag is het stukje tussen punthaken, een element is het afgemaakte stuk van de pagina.

Attributen voegen details toe

Een openende tag kan attributen bevatten, extra instellingen geschreven als name="value". In <a href="menu.html">Menu</a> zegt het attribuut href waar de link heen gaat. In <html lang="en"> geeft het attribuut lang de taal aan. Zet de waarde tussen dubbele aanhalingstekens; de standaard staat sommige waarden zonder aanhalingstekens toe, maar aanhalingstekens veroorzaken nooit problemen. Meerdere attributen worden gescheiden door spaties, en hun volgorde maakt niet uit. Een paar attributen, zoals required op een formulierveld, zijn booleaans: de naam alleen schrijven zet ze aan.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

Nesten: sluit in omgekeerde volgorde

Elementen gaan in andere elementen. In het voorbeeld hierboven zit <strong> in <p>. De regel is dezelfde als bij haakjes in de rekenkunde: wat het laatst is geopend, moet het eerst sluiten. <p><strong>7 am</p></strong> is fout omdat de alinea sluit terwijl het element strong nog open is. Browsers raden wat je bedoelde, maar verschillende fouten leiden tot verschillende gissingen. Kindelementen met twee spaties inspringen, zoals de voorbeelden in deze cursus doen, maakt het nesten goed zichtbaar.

Lege elementen

Sommige elementen kunnen geen inhoud hebben, dus ze hebben geen afsluitende tag. Dat zijn lege elementen (void elements). De bekendste zijn <br> (een regeleinde), <hr> (een thematische scheiding), <img>, <input>, <meta> en <link>. Je ziet ze misschien ook met een schuine streep geschreven, zoals <br />; in HTML is de streep toegestaan en wordt hij genegeerd, dus beide vormen werken.

Betekenis, niet uiterlijk

In een alinea kun je woorden markeren met <strong> voor sterk belang en <em> voor nadruk, het soort dat verandert hoe een zin wordt uitgesproken. Browsers tonen strong als vet en em als cursief, maar het gaat om de betekenis. Een schermlezer leest ze misschien met een andere stem, en een zoekmachine behandelt ze als belangrijke woorden. Wil je alleen vette tekst als decoratie, dan is dat werk voor CSS. <b> en <i> bestaan nog voor tekst die wordt afgezonderd zonder extra belang, zoals een scheepsnaam of een vreemd woord.

Speciale tekens en commentaar

Omdat < een tag begint, kun je het niet als gewone tekst typen. Schrijf in plaats daarvan een tekenverwijzing: < voor kleiner dan, > voor groter dan en & voor het ampersand zelf. Een commentaar, <!-- like this -->, wordt door de browser genegeerd en is handig voor notities aan jezelf. Tot slot klapt HTML witruimte samen: tien spaties of drie regeleinden in je bestand verschijnen als één spatie. De opmaak komt van elementen en CSS, niet van het indrukken van de spatiebalk.