Verder naar De basis van een HTML 5 document
HTML5 is eigenlijk niet meer dan een upgrade van HTML4, als je het hebt over de markeertaal HTML.
HTML5 wordt echter ook gebruikt als verzamelnaam voor webtechnieken om moderne (mobiele) webapplicaties te bouwen.(bijvoorbeeld toegang tot onderdelen van de browser of smartphone (via API) en aanvullende technieken zoals CSS, JavaScript, XML, JSON en SVG. Deze horen niet bij de HTML5 standaard zelf.
HTML is geen programmeertaal maar een markeertaal. (markeertaal voor hypertekst) Hypertekst is tekst met hyperlinks naar andere tekst, afbeeldingen, audio, video en meer.
De hyperlinks, samen met alle andere onderdelen van een webpagina, zijn de elementen van HTML en die worden gemarkeerd met tags. Om met HTML te kunnen werken moet je weten welke elementen er zijn en welke tags daarbij horen.
Voorbeeld van een artikel:<article>
<h1>Dit artikel gaat over HTML</h1>
<p>Dit is een alinea binnen het artikel. In de alinea staat <i>schuingedrukte</i> tekst.</p>
</article>
Een artikel wordt in een HTML pagina aangeduid met het article element en staat binnen de openingstag <article> en de sluittag </article>. Zo zie je dat de koptekst (h1), de schuingedrukte tekst (i) en de alinea (p) ook een open- en sluittag hebben. HTML bevat meer dan 100 elementen, op deze website probeer ik ze allemaal toe te lichten.
- Met HTML wordt de structuur van de webpagina gemarkeerd (bijvoorbeeld met kopteksten, links, afbeeldingen, formulieren en dergelijke)
- Met CSS wordt het uiterlijk van de webpagina ingesteld. (lettertype, kleur, regelafstand, marges) voor alle HTML elementen.
Om aan de slag te gaan met het maken van een webpagina heb je niet veel nodig, namelijk een editor om HTML en CSS bestanden te schrijven en een browser om pagina te kunnen bekijken. (bijvoorbeeld Chrome, Firefox, Edge, Safari)
Opbouw van een HTML element
<a href="https://www.lovingfood.nl">Kookboek voor lekkere recepten</a>
Bovenstaande is een hyperlink element, hierin staan de volgende onderdelen:
- de opentag <a href="https://www.lovingfood.nl">
- het HTML-element a
- het attribuut href met de waarde https://www.lovingfood.nl
- de tekst Kookboek voor lekkere recepten
- de sluittag </a>
Lege elementen
Er zijn HTML-elementen die geen sluittag hebben, dit noemen we lege elementen, voorbeelden hiervan zijn de <img> (afbeelding), <br> (regeleinde), <hr> (horizontale lijn) tag.
<img src="afbeelding.png" height="100" width="200" alt="beschrijving van de afbeelding">
De img tag is zelfsluitend en bevat alleen attributen. In dit voorbeeld geeft het src attibuut de source (bron) aan zodat de browser weet waar de afbeelding vandaan gehaald moet worden. Het height en width attribuut geeft de weer te geven hoogte en breedte van de afbeelding aan en het alt attribuut is de verplichte alternatieve tekst van de afbeelding.
Speciale tag voor commentaar
Om in de HTML pagina commentaar te kunnen geven voor de ontwikkelaar hebben we in HTML een speciale tag.
Alles wat binnen <!-- en --> staat wordt door de webbrowser genegeerd.
Elementen nesten
Elementen kunnen ook andere elementen bevatten, bijvoorbeeld:
<p>Dit is een alinea met <b>vetgedrukte</b> tekst!</p>
of
<a href="http://www.mijnsite.nl">
<img src="mijnlogo.png" alt="naar de homepagina van mijnsite">
</a>
NB:
- het is belangrijk om geneste tags in de juiste volgorde af te sluiten!
- het is een goede gewoonte om tags en attributen in kleine letters te schrijven. Uitzondering is de eerste tag boven in je HTML pagina, het DOCTYPE (<!DOCTYPE html>)
- het laten inspringen van je code bij geneste elementen maakt je code beter leesbaar.
- attributen geven geven een element functionaliteit.
Verder naar De basis van een HTML 5 document