Wat is HTML?


HTML (“Hypertext Markup Language”) is een eenvoudige taal voor opmaakcodes, die wordt gebruikt om content op een webpagina op te maken. U gebruikt de HTML-programmeertaal om webbrowsers te laten weten hoe ze tekst, koppen, afbeeldingen en andere multimedia moeten weergeven in de door u gewenste opmaak voor uw gebruikers. HTML is platformonafhankelijk. Dit betekent dat het webpagina's op elk platform kan weergeven, ongeacht of het Windows, MacOS, Linux of het besturingssysteem van een mobiel apparaat is.

Webcloud_Framework_overview

Waar staat HTML voor?

HTML staat voor Hypertext Markup Language. Om te begrijpen wat HTML programmeren is en de vele verschillende elementen en kenmerken ervan, splitsen we de drie woorden die samen het HTML-acroniem vormen, op als afzonderlijke delen:

Icons/concept/Typing Created with Sketch.

Wat is Hypertext?

Hypertext is "niet-lineair". Dit betekent dat het een bepaalde tekst koppelt aan andere tekst die daar typisch aan gerelateerd is (vaak door de tekst te veranderen in een ). Dit creëert een netwerk van onderling verbonden woorden waar u in willekeurige volgorde en wanneer u maar wilt doorheen kunt bewegen. Met andere woorden, het fungeert als basis voor alle browsen op internet en het vormt de fundering voor hoe een webpagina succesvol kan worden gecreëerd.

 

Icons/concept/Puzzle Created with Sketch.

Wat is Markup?

Markup is in wezen een stijlgids (zoals die door kranten of tijdschriften worden gebruikt om de lay-out van hun inhoud te standaardiseren). Met de syntaxis van HTML vertellen markups aan webbrowsers hoe ze de inhoud van een webpagina horen te presenteren of te ordenen.

Wat is Language?

De HTML-programmeertaal is de wijze waarop u uw instructies communiceert, oftewel uw markups, zodat een webbrowser daadwerkelijk kan begrijpen hoe u uw content wilt indelen. De taal van HTML is eenvoudig te leren, maar biedt echt krachtige functies om content tot leven te brengen op internet.

Icons/concept/User/Person Happy Created with Sketch.

Samen beter

Breng deze drie woorden bij elkaar en u heeft de bouwstenen van de basale HTML-structuur en de HTML-code: een eenvoudige maar krachtige taal die door de meeste makers van websites wordt gebruikt om statische pagina's te genereren. Bij een juiste implementatie presenteert HTML content op een wijze die lezers gemakkelijk kunnen bekijken en volgen; het biedt links naar andere content op internet voor moeiteloos en snel browsen.

Hoe zijn CSS, Javascript en HTML-markup gerelateerd?

Terwijl HTML u helpt de lay-out voor webpagina's te genereren – in feite is het de kapstok voor alle content – kan de HTML-syntaxis ook worden verrijkt met twee andere elementen om de content aantrekkelijker en interactiever te maken. Met CSS (“Cascading Style Sheets”) kunt u bijvoorbeeld meer doen dan met de HTML-basis: hiermee kunt u heel precies de manier bepalen waarop content op een webpagina wordt weergegeven, van spatiëring tot lettertypen.

Verder kan Javascript worden gebruikt om dynamische elementen toe te voegen. Zo kunt u bijvoorbeeld uitgebreidere interactiviteit leveren, wat een immersievere, gebruiksvriendelijkere ervaring voor sitebezoekers creëert, door weer de bestaande structuur van HTML-tags te optimaliseren.

HTML gebruiken

Als u HTML-markup voor uw content wilt maken, dan maakt u een HTML-bestand en importeert u de content voordat u HTML-tags gebruikt om de tekst, afbeeldingen en andere zaken te rangschikken.

3 HTML-tags om alle te regeren

Dit zijn de drie HTML-opmaakcodes die in elke door u gemaakte pagina moeten voorkomen:

<html>

Dit fungeert als de basis van elke pagina die met HTML gemaakt is op het web. Alle andere gebruikte elementen vallen hieronder en deze tag definieert de HTML-basisstructuur van de pagina. Elke pagina begint en eindigt met

.

<head>

Dit bevat de door de webpagina gebruikte metadata. Het is niet echt zichtbaar voor bezoekers van de pagina, maar documenteert essentiële informatie zoals metadata voor SEO, stylesheets en meer. Deze informatie wordt gebruikt door webcrawlers van zoekmachines.

<body>

Dit bevat de content die de bezoeker daadwerkelijk op de webpagina ziet, waaronder tekst, afbeeldingen, koppelingen en meer.

 

Meest voorkomende HTML-tags

Om de inhoud in op te maken, gebruikt u een structuur met HTML-tags om aan te geven hoe u de informatie op het scherm wilt weergeven. Bijvoorbeeld:

<h1>

Dit is een kop op het eerste niveau van de webpagina, dat wil zeggen de hoofdtitel. U kunt nog andere titels, van <h2> tot <h6>, implementeren. Ze zijn alle in een hiërarchische structuur ingedeeld en worden voor subkoppen gebruikt. Bijvoorbeeld: ‘Wat is HTML?’ Is de <h1> van deze pagina met 'Waar staat HTML voor?' ingesteld als <h2> en de onderliggende subkoppen (zoals 'Wat is Hypertext?') hebben <h3> als markup. Wanneer we een nieuwe sectie introduceren – ‘HTML gebruiken’ – schakelen we terug naar <h2>.

<p>

Deze HTML-opmaakcode wordt gebruikt om een alinea in de inhoud van de pagina aan te geven. De vuistregel? U wilt bezoekers van uw site nooit met een muur van tekst confronteren, want ze zullen gewoon wegbrowsen. Gebruik alinea's om de inhoud leesbaarder, begrijpelijker en toegankelijker te maken.

<a>

Deze HTML-opmaakcode wordt toegepast op een woord of zinsnede – zoals kies uw programmeertaal – en creëert een koppeling, waarop de bezoeker kan klikken om naar een andere webpagina te browsen. Dit kan op een pagina van dezelfde site of elders op internet zijn.

<img>

Hiermee kunt u een afbeelding invoegen, een populaire manier om tekst op te delen en bezoekers bij de content te betrekken.

<u>

Deze tag onderstreept de geselecteerde tekst/het geselecteerde teken.

<em>

Deze tag cursiveert de geselecteerde tekst/het geselecteerde teken.

<strong>

Met deze tag wordt de geselecteerde tekst/het geselecteerde teken vetgedrukt.

<ul>

Deze tag creëert een lijst met tekstuele items die niet in een bepaalde volgorde staan.

<ol>

Deze tag creëert een lijst met tekstuele items in numerieke volgorde.

<button>

Met deze HTML-opmaakcode maakt u op de webpagina een knop op het scherm. De bezoeker kan hierop klikken om een actie uit te voeren. Bij bedrijven wordt dit vaak gebruikt voor Call to Action-knoppen, zodat de lezer het product op de webpagina in meer detail kan bekijken, een specifiek product kan bekijken, enzovoorts.

 

<script>

Deze tag wordt gebruikt om JavaScript-code aan de webpagina toe te voegen. Zoals al gezegd, wordt deze code gebruikt om de pagina's dynamischer te maken.

<style>

Dit wordt gebruikt om CSS-regels toe te passen op de webpagina, die definiëren hoe belangrijke elementen zoals lettertypen, lay-out en andere zaken op pagina's moeten worden weergegeven.

HTML-code definiëren

Hier is een voorbeeld van een basale HTML-structuur met enkele van de hierboven vermelde HTML-tags:

<html>
<head>
  <title>
Dit is de hoofdtitel</title>
</head>
<body>
  <h1>Titre principal</h1>
  <p>
Dit is een <em>alinea</em> van tekst met <u>onderstreepte</u> en <strong>vetgedrukte</strong>woorden.</p>
  <h2>
Dit is een subtitel</h2>
  <p>
Meer tekst staat hier.</p>
  <img src="image.jpg" alt="
Beschrijving afbeelding">
  <a href="https://www.exemple.com">
Klik hier om voorbeeld te bezoeken</a>
  <ul>
    <li>
Item 1</li>
    <li>
Item 2</li>
    <li>
Item 3</li>
  </ul>
  <ol>
    <li>
Eerste item</li>
    <li>
Tweede item</li>
    <li>Derde item</li>
  </ol>
  <button onclick="window.location.href='https://https://www.ovhcloud.com/nl/';">Call ti Action</button>
</body>
</html>

Hoeveel versies van HTML zijn er?

Zoals alle ontwikkeltalen heeft de HTML-programmeertaal verschillende versies doorlopen sinds deze voor het eerst in 1993 officieel werd uitgebracht als HTML 1.0. Het is gecreëerd door Tim Berners-Lee, een Britse computerwetenschapper, en elke HTML-versie heeft nieuwe functies toegevoegd.

HTML 2.0 introduceerde in 1995 bijvoorbeeld formulieren, koppen en lijstelementen, terwijl 3.2 het in 1997 mogelijk maakte om gegevenstabellen in te bouwen. In 1999 voegden HTML 4 en 4.01 ondersteuning toe voor CSS. De nieuwste versie – HTML 5 – werd officieel goedgekeurd in 2014 en introduceerde een reeks betere of nieuwe functiesets, waaronder video/audio en andere zaken.

Wat zijn de voor- en nadelen van HTML?

Voordelen van HTML

    • Hypertext Markup Language helpt u online te gaan en websites te maken die geïnteresseerden aantrekken, klanten ondersteunen en fantastische gebruikerservaringen creëren die omzet genereren en merkentrouw opbouwen.
    • Dit is allemaal mogelijk doordat het relatief eenvoudig is om in HTML te programmeren. De basale HTML-code is snel te leren, dus mensen die bereid zijn wat tijd erin te steken, kunnen snel pagina’s maken.
    • De HTML-taal heeft een grote community achter zich, mensen die zich allemaal inzetten om HTML nu en in de toekomst te verbeteren.
    • Er zijn massa's resources die gebruikt kunnen worden om HTML-structuur en HTML-syntaxis te verbeteren. Als u een probleem heeft of een functie wilt opnemen, is de kans groot dat er een resource – of community – is om u te helpen dit te bereiken.

Nadelen van HTML

    • De HTML-structuur is van nature statisch. Dit betekent dat u, als u dynamischere ontwerpelementen en functies wilt introduceren, een taal zoals Javascript of CSS, of server-side tech zoals Node.js of PHP moet implementeren.
    • Hoewel u hiermee rechtstreeks krachtigere functies op een webpagina kunt leveren, zijn ze alle complexer en moeilijker te leren dan basale HTML-code en dus duurder, omdat er mogelijk specialistische vaardigheden vereist zijn.
    • Hoewel HTML platformonafhankelijk is, kunnen de prestaties variëren. Dit is niet de fout van het HTML-document of de HTML-markup, maar hangt eigenlijk af van de browser die de eindgebruiker gebruikt. Browsers kunnen bijvoorbeeld zelf de belangrijkste HTML-gegevensstandaarden op verschillende manieren interpreteren en implementeren, wat beïnvloedt hoe pagina's op het scherm worden getoond.
    • Daarnaast kunnen oudere browserversies sommige van de nieuwste vormen van HTML-syntaxis mogelijk niet weergeven. Dit betekent dat de gebruiker ervoor moet zorgen dat hij de recentste versie van de browser gebruikt, zodat de pagina's correct worden weergegeven.
    • Als een bedrijf verwacht dat gebruikers hun browsers bijwerken, is dat wel veel gevraagd. Een gebruiker is eerder geneigd om simpelweg ergens anders heen te browsen en naar een concurrent te gaan die wel zijn browser ondersteunt.

Welke resources zijn beschikbaar om HTML te leren?

Er zijn veel online trainingscursussen en tools beschikbaar om zowel beginners als ontwikkelteams te helpen HTML-programmeertaal voor bedrijven te leren en te gebruiken. De beste professionele trainingservices bieden een uitstekende en betrouwbare reeks resources, die alle aspecten van het HTML-proces beschrijven: van wat HTML is en wat een HTML-bestand is tot diepgaande informatie over de HTML-syntaxis.

Beginners worden ook goed bediend met start-up tutorialresources met gemakkelijk te begrijpen voorbeelden en quizzen om zaken te leren en uw HTML-programmeervaardigheden aan te scherpen – evenals officiële cursussen die certificeringen toekennen als ze succesvol zijn voltooid. Sommige bieden ook een 'hands-on' leerervaring waarbij uw HTML-basiscode live op het scherm wordt weergegeven, zodat u onmiddellijk kunt zien of uw code werkt – of dat u een helpende hand van een AI live assistent nodig heeft die een 'on-the-fly' tutorial kan bieden.
 

Wat zijn voor bedrijven de voordelen van programmeren in HTML?

HTML-programmeertaal kan ondernemingen meer mogelijkheden bieden, doordat u snel en kosteneffectief een website kunt opzetten. E-commerceoplossingen en contentmanagementsystemen worden ook ondersteund door HTML en er zijn volledige optimalisatiefuncties inbegrepen, zoals een optimale weergave bieden aan gebruikers van mobiele apparaten.

Belangrijk is dat er essentiële inzichten beschikbaar zijn, waarmee u het gedrag en de kenmerken van gebruikers kunt volgen en kunt beoordelen hoe succesvol marketingcampagnes zijn geweest. Tot slot kan uw site door een provider als OVHcloud gehost worden, waardoor u de noodzaak van het onderhoud van de back-end, de infrastructuur en beveiligings-/gegevensbescherming-protocollen uit handen wordt genomen, zodat u zich uitsluitend op de content van uw website kunt richten.