HTML

HTML, wat staat voor Hypertext Markup Language, is de standaardtaal die wordt gebruikt om webpagina's te maken. Het vormt de ruggengraat van elke webpagina die je op het internet tegenkomt. HTML biedt de structurele framework voor het organiseren van inhoud zoals tekst, afbeeldingen, links en multimedia-elementen.

In de kern bestaat HTML uit elementen, elk weergegeven door een tag, die de structuur en semantiek van een webpagina definiëren. Deze elementen werken samen met technologieën zoals Cascading Style Sheets (CSS) en JavaScript om dynamische en visueel aantrekkelijke webervaringen te creëren.

Korte geschiedenis van HTML

De oorsprong van HTML gaat terug tot de vroege dagen van het world wide web. In 1991 bedacht Tim Berners-Lee, een Britse computerwetenschapper, het idee van een systeem waarmee documenten aan elkaar gekoppeld konden worden via hypertext. Dit legde de basis voor wat uiteindelijk HTML zou worden.

In de loop der jaren heeft HTML verschillende revisies ondergaan, waarbij HTML5 de nieuwste en breedst aangenomen versie is. HTML5 introduceerde nieuwe elementen en attributen, waardoor ontwikkelaars meer geavanceerde en interactieve webapplicaties konden maken.

Het begrijpen van HTML is essentieel voor iedereen die een aanwezigheid op het web wil opbouwen en onderhouden, of het nu gaat om een persoonlijke blog, een bedrijfswebsite of een geavanceerde webapplicatie. In de volgende secties zullen we dieper ingaan op de syntaxis en structuur van HTML, zodat je de kennis verwerft om je webinhoud te maken en aan te passen.

HTML-syntaxis en -structuur

Het begrijpen van de syntaxis van HTML is cruciaal, omdat dit de basis vormt voor het maken van alle webinhoud.

Tags en elementen

HTML werkt met een systeem van elementen, elk aangeduid met een tag. Tags zijn omgeven door deze tekens < > en komen meestal in paren voor: een openings-tag en een sluitings-tag. De openings-tag geeft het begin van een element aan, terwijl de sluitings-tag het einde aangeeft. Bijvoorbeeld, je zou de <h1> openings-tag en de </h1> sluitings-tag gebruiken om een kop te maken.

Elementen kunnen ook binnen elkaar genest worden, waardoor complexe structuren kunnen worden gemaakt. Deze nesting is een essentieel aspect van de hiërarchische organisatie van HTML.

Attributen

Naast tags kunnen elementen attributen hebben die extra informatie over het element geven. Attributen worden gespecificeerd binnen de openings-tag en vormen naam-waardeparen. Bijvoorbeeld, het src attribuut in een afbeeldings-tag (`<img>`) wordt gebruikt om het bronbestand op te geven.

Basis HTML-tags

Deze basis HTML-tags leggen de basis voor het organiseren van inhoud op een webpagina.

Kop-tags

Kop-tags definiëren de koppen of titels van secties binnen een webpagina. Er zijn zes niveaus van kop-tags, variërend van <h1> voor het hoogste niveau van belangrijkheid tot <h6> voor het laagste. Bijvoorbeeld, <h1> wordt meestal gebruikt voor de hoofdtitel van een pagina, terwijl <h2> wordt gebruikt voor subsections.

<h1>Hoofdtitel</h1>
<h2>Subsectietitel</h2>

Paragrafen-tags

Paragrafen-tags, aangeduid met <p> en </p>, structureren tekst in paragrafen. Ze zijn essentieel voor het creëren van leesbare en georganiseerde inhoud.

<p>Dit is een paragraaf tekst.</p>
<p>Hier is nog een paragraaf.</p>

Lijst-tags (geordend en ongeordend)

HTML biedt twee soorten lijsten: geordende en ongeordende. Geordende lijsten (`<ol>`) worden gebruikt voor items met een specifieke volgorde of reeks, terwijl ongeordende lijsten (`<ul>`) worden gebruikt voor items zonder een gedefinieerde volgorde.

<ol>
  <li>Eerste Item</li>
  <li>Tweede Item</li>
</ol>
 
<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Formatteren en stylen met HTML

Het begrijpen van hoe je tekst kunt formatteren en links en afbeeldingen kunt incorporeren, is cruciaal voor het creëren van boeiende en interactieve webpagina's.

Tekstformatterings-tags

HTML biedt een scala aan tags om tekst te formatteren, zodat je bepaalde woorden of zinnen kunt benadrukken. Twee veelgebruikte tags zijn <strong> voor sterke nadruk en <em> voor cursieve nadruk.

<p>Dit is <strong>belangrijke</strong> informatie.</p>
<p>Vergeet niet om dit te <em>cursiveren</em>.</p>

Links (`<a>`-tag)

De <a>-tag wordt gebruikt om hyperlinks te maken, zodat gebruikers tussen pagina's en bronnen op het web kunnen navigeren. Het vereist een href attribuut dat de bestemmings-URL specificeert.

<a href="https://www.example.com">Bezoek de Voorbeeldwebsite</a>

Afbeeldingen (`<img>`-tag)

Afbeeldingen zijn een integraal onderdeel van webinhoud. De <img>-tag toont afbeeldingen en vereist het src attribuut om de locatie van het afbeeldingsbestand op te geven.

<img src="image.jpg" alt="Beschrijving van de afbeelding">

Structurele elementen

Het begrijpen van deze structurele elementen stelt je in staat om complexere en interactievere webpagina's te creëren.

Divisies (`<div>`-tag)

De <div>-tag is een veelzijdige container die je in staat stelt om inhoud te groeperen en te organiseren. Het wordt vaak gebruikt voor lay-outdoeleinden en het toepassen van stijlen met CSS.

<div>
  <h3>Sectietitel</h3>
  <p>Inhoud gaat hier.</p>
</div>

Span (`<span>`-tag)

Vergelijkbaar met de <div>-tag, wordt de <span>-tag gebruikt voor het groeperen van inhoud. Het is echter een inline-element, wat betekent dat het geen nieuwe regel creëert. Het wordt vaak gebruikt om stijlen of scripts toe te passen op een specifiek stuk tekst.

<p>Dit is <span style="color: red;">geaccentueerde tekst</span>.</p>

Tabellen (`<table>`-tag)

Tabellen stellen je in staat om gegevens in een gestructureerd rasterformaat weer te geven. Ze bestaan uit rijen (`<tr>`), die cellen bevatten (`<td>` voor gegevenscellen en <th> voor headers).

<table>
  <tr>
    <th>Kop 1</th>
    <th>Kop 2</th>
  </tr>
  <tr>
    <td>Gegevens 1</td>
    <td>Gegevens 2</td>
  </tr>
</table>

Formulieren (`<form>`-tag)

Formulieren zijn essentieel voor het verzamelen van gebruikersinvoer op een webpagina. Ze kunnen invoerelementen bevatten zoals tekstvelden, selectievakjes en knoppen.

<form action="/submit" method="post">
  <label for="username">Gebruikersnaam:</label>
  <input type="text" id="username" name="username"><br><br>
  <input type="submit" value="Verzenden">
</form>

Semantisch HTML

Semantisch HTML verwijst naar het gebruik van HTML-elementen om de betekenis en structuur van inhoud over te brengen, in plaats van alleen het uiterlijk. Deze aanpak maakt je code leesbaarder en is gunstig voor toegankelijkheid en zoekmachineoptimalisatie.

Semantische elementen

HTML5 introduceerde een reeks semantische elementen die specifieke betekenis geven aan verschillende delen van een webpagina. Deze elementen zijn onder andere <header>, <nav>, <section>, <article>, <footer> en meer.

<header>
  <h1>Website Header</h1>
  <p>Slogan of beschrijving gaat hier.</p>
</header>
 
<section>
  <h2>Sectietitel</h2>
  <p>Inhoud voor deze sectie.</p>
</section>
 
<article>
  <h3>Artikel Titel</h3>
  <p>Inhoud van het artikel.</p>
</article>
 
<footer>
  <p>&copy; 2023 Jouw Website</p>
</footer>

HTML en CSS-integratie

Cascading Style Sheets (CSS) regelen de visuele presentatie van HTML-elementen. Je kunt stijlen consistent toepassen op je hele website door een extern CSS-bestand aan je HTML-document te koppelen.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Inline stijlen

Naast externe stylesheets kun je stijlen rechtstreeks binnen HTML-elementen toepassen met inline stijlen. Dit kan nuttig zijn voor specifieke, eenmalige aanpassingen.

<p style="color: blue; font-size: 16px;">Geformatteerde paragraaf.</p>

Interne stijlen

Met de <style>-tag binnen de <head>-sectie kun je ook stijlen rechtstreeks in het HTML-document opnemen. Deze aanpak is nuttig voor kleinere projecten of wanneer stijlen specifiek voor een enkele pagina moeten zijn.

<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>

Door te begrijpen hoe HTML en CSS samenwerken, kun je visueel aantrekkelijke en goed ontworpen webpagina's maken. In de volgende secties zullen we ingaan op toegankelijkheidsaspecten en best practices.