Voor een goede structuur binnen een website zijn de HTML tags en elementen onmisbaar. Zowel voor de opbouw van een eigen website als voor de zoekmachineoptimalisatie hiervan. Het grootste deel van de genoemde tags gebruiken we nauwelijks maar het is toch wel handig om hier een overzicht van te hebben.

Lees verder

HTML Tags

<!--...-->: De puntjes kan je vervangen door een extra notitie welke niet zal worden weergegeven door de webbrowser.
<!DOCTYPE>: Document Type.
<a>: Een Hyperlink oftwel een klikbare link in een website.
<abbr>: Definieert een afkorting of acroniem.
<address>: Definieert contact informatie over de schrijver van het document.
<area>: Definieert een gebied binnen een image-map.
<article>: Definieert een artikel.
<aside>: Definieert inhoud naast de pagina-inhoud.
<audio>: Definieert geluidsinhoud.
<b>: Definieert vetgedrukte tekst.
<base>: Specificeert de basis-URL / doel voor alle relatieve URL's in een document.
<bdi>: Isoleert een deel van de tekst dat in een andere richting kan worden opgemaakt dan de andere tekst erbuiten. Bijvoorbeeld een Arabisch of Heebreeuws woord in een verder Nederlandse tekst.
<bdo>: Overschrijft de huidige tekstrichting.
<blockquote>: Definieert een sectie die is geciteerd uit een andere bron.
<body>: Definieert de body van het document.
<br>: Definieert een enkele regeleinde. Deze tag sluit zichzelf door <br/>.
<button>: Bepaalt een klikbare knop.
<canvas>: Wordt gebruikt om afbeeldingen te tekenen, op de pagina zelf, via scripting (meestal JavaScript).
<caption>: Definieert een tabelbijschrift.
<cite>: Definieert de titel van een werk.
<code>: Definieert een stukje computercode.
<col>: Specificeert kolomeigenschappen voor elke kolom binnen een <colgroup> element.
<colgroup>: Specificeert een groep van een of meer kolommen in een tabel voor opmaak.
<data>: Verbindt de gegeven inhoud met een machinaal leesbare vertaling.
<datalist>: Hiermee geeft u een lijst met vooraf gedefinieerde opties voor invoerbesturingselementen op.
<dd>: Definieert een beschrijving / waarde van een term in een beschrijvingslijst.
<del>: Definieert tekst die uit een document is verwijderd.
<details>: Definieert aanvullende details die de gebruiker kan bekijken of verbergen.
<dfn>: Vertegenwoordigt de definiërende aanleg van een term.
<dialog>: Definieert een dialoogvenster.
<div>: Definieert een sectie in een document.
<dl>: Definieert een beschrijvingslijst.
<dt>: Definieert een term / naam in een beschrijvingslijst.
<em>: Definieert benadrukte tekst.
<embed>: Definieert een container voor een externe (niet-HTML) applicatie.
<fieldset>: Groepeert gerelateerde elementen in een formulier.
<figcaption>: Definieert een bijschrift voor een <figure>: element.
<figure>: Specificeert zelfstandige inhoud.
<footer>: Definieert een voettekst (footer) voor een document of sectie.
<form>: Definieert een HTML-formulier.
<h1> tot en met <h6>: Definieert HTML-koppen (headers).
<head>: Definieert informatie over het document.
<header>: Definieert een koptekst voor een document.
<hr>: Definieert een thematische verandering in de inhoud.
<html>: Definieert de basis van een HTML-document.
<i>: Bepaalt een deel van de tekst in een alternatieve stem of stemming.
<iframe>: Definieert een inline frame.
<img>: Definieert een afbeelding.
<input>: Definieert een invoer.
<ins>: Definieert een tekst die in een document is ingevoegd.
<kbd>: Bepaalt toetsenbordinvoer.
<label>: Definieert een label voor een <input>: element.
<legend>: Definieert een bijschrift voor een <fieldset>: element.
<li>: Definieert een lijstitem.
<link>: Definieert de relatie tussen een document en een externe bron (meestal gebruikt om naar stylesheets te linken).
<main>: Specificeert de hoofdinhoud van een document.
<map>: Definieert een afbeelding aan de gebruikerszijde.
<mark>: Bepaalt gemarkeerde / gemarkeerde tekst.
<meta>: Definieert metagegevens over een HTML-document.
<meter>: Definieert een scalarmeting binnen een bekend bereik.
<nav>: Definieert navigatielinks.
<noscript>: Definieert een alternatieve inhoud voor gebruikers die geen scripts aan de gebruikerszijde ondersteunen.
<object>: Definieert een ingesloten object.
<ol>: Definieert een geordende lijst.
<optgroup>: Definieert een groep verwante opties in een vervolgkeuzelijst.
<option>: Definieert een optie in een keuzelijst.
<output>: Definieert het resultaat van een berekening.
<p>: Definieert een alinea / paragraaf.
<param>: Definieert een parameter voor een object.
<picture>: Definieert een container voor meerdere afbeeldingsbronnen.
<pre>: Definieert voorgeformatteerde tekst.
<progress>: Vertegenwoordigt de voortgang van een taak.
<q>: Definieert een kort citaat.
<rp>: Definieert wat te zien in browsers die geen ondersteuning bieden aan ruby annotaties.
<rt>: Definieert een verklaring / uitspraak van tekens (voor Oost-Aziatische typografie).
<ruby>: Definieert een ruby annotaties (voor Oost-Aziatische typografie).
<s>: Definieert tekst die niet langer correct is.
<samp>: Definieert voorbeelduitvoer van een computerprogramma.
<script>: Definieert een script aan de gebruikerszijde.
<section>: Definieert een sectie in een document.
<select>: Definieert een keuzelijst.
<small>: Definieert kleinere tekst.
<source>: Definieert meerdere mediabronnen voor media-elementen (<video>: en <audio>: ).
<span>: Definieert een sectie in een document.
<strong>: Definieert belangrijke tekst.
<style>: Definieert stijlinformatie voor een document.
<sub>: Definieert subscript.
<summary>: Definieert een zichtbare kop voor een <details>: element.
<sup>: Definieert superscript.
<svg>: Definieert een container voor SVG-afbeeldingen.
<table>: Bepaalt een tabel.
<tbody>: Groepeert de inhoud van het lichaam in een tabel.
<td>: Definieert een cel in een tabel.
<template>: Definieert een template.
<textarea>: Definieert een meerregelig invoerbesturingselement (oftewel een tekstvak).
<tfoot>: Groepeert de footer-inhoud in een tabel.
<th>: Definieert een headercel in een tabel.
<thead>: Groepeert de inhoud van een header in een tabel.
<time>: Definieert een datum / tijd.
<title>: Definieert een titel voor het document.
<tr>: Definieert een rij in een tabel.
<track>: Definieert teksttracks voor media-elementen(<video>: en <audio>: ).
<u>: Definieert tekst die stilistisch anders moet zijn dan de normale tekst.
<ul>: Definieert een ongeordende lijst.
<var>: Definieert een variabele.
<video>: Definieert een video of film.
<wbr>: Definieert een mogelijke regelafbreking.

Lees verder

Tag afsluiten

Vergeet niet dat de tags die hierboven staan alleen de openende tags zijn. Ze zullen dus ook weer afgesloten moeten worden. Gebruik je bijvoorbeeld <b> dan zal je deze met </b> weer af moeten sluiten omdat anders de rest van je tekst ook vetgedrukt zal zijn.
Uitzonderingen hierop zijn <meta>, <img>, <wbr> en <br> (of <br/>) welke je niet af sluit. Je kan deze tags herkennen aan het feit er geen tekst na volgt waarna de tag afgesloten zou moeten worden. De <img>-tag wordt bijvoorbeeld gevuld met elementen die de webbrowser vertellen welke afbeelding geopend moet worden en eventueel de afmetingen. voorbeeld:

<!DOCTYPE html>
<html>
<head>
<title>Pagina titel</title>
</head>
<body>

<h1>Je eerste heading.</h1>
<p>Je eerste alinea.</p>
<img src="afbeelding.jpg" alt="alternatieve titel" height="60" width="80">

</body>
</html>

Hierbij wordt de <img>-tag gevolgt door meerdere atributen welke de webbrowser vertellen welke afbeelding te gebruiken, welke alternatieve tekst gebruikt moet worden als de afbeelding niet geladen kan worden en als laatste de afmetingen.

Lees verder