HTML staat voor Hyper Text Markup Language
HTML is de standaard opmaaktaal voor het maken van webpagina's
HTML beschrijft de structuur van een webpagina
HTML bestaat uit een reeks elementen
HTML-elementen vertellen de browser hoe de inhoud moet worden weergegeven
HTML-elementen labelen stukken inhoud,
bijvoorbeeld 'dit is een kop', 'dit is een alinea', 'dit is een link', enzovoort.
De <!DOCTYPE html>
declaratie definieert dat dit document een HTML5-document is.
Het <html> element is het rootelement van een HTML-pagina.
Het <head> element bevat metagegevens over de HTML-pagina.
Het <title> element specificeert een titel voor de HTML-pagina
(die wordt weergegeven in de titelbalk van de browser
of in het tabblad van de pagina).
Het <body> element definieert de hoofdtekst van
het document en is een container voor
alle zichtbare inhoud, zoals koppen, alinea's, afbeeldingen,
hyperlinks, tabellen, lijsten, enzovoort.
Het <h1> element definieert een grote kop.
Het <p> element definieert een alinea.
Een HTML-element wordt gedefinieerd door een starttag,
wat inhoud en een eindtag:
< tagname > Inhoud komt hier... < / tagname >
Het HTML- element omvat alles van de begin- tot de eindtag:
< h1 > Mijn eerste kop < /h1 >
< p > Mijn eerste alinea. < / p >
Hieronder ziet u een visualisatie van een HTML-paginastructuur:
HTML-koppen worden gedefinieerd met de <h1>to- <h6>tags.<h1> definieert de belangrijkste kop. <h6>definieert de minst belangrijke kop
Een HTML-link maak je met de <a> tag.
De href geeft aan waar de link naartoe gaat.
Voorbeeld:
<a href="https://voorbeeld.nl">Klik hier</a>
Afbeeldingen voeg je toe met de <img> tag.
Je gebruikt het src attribuut voor de locatie,
en alt voor beschrijving van de afbeelding.
Voorbeeld:
<img src="foto.jpg" alt="Beschrijving">
Er zijn twee soorten lijsten:
• <ul> voor ongeordende lijsten (bolletjes)
• <ol> voor geordende lijsten (nummers)
Voorbeeld:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Tabellen maak je met <table>.
Een rij is <tr>, een cel is <td> of <th> (titel).
Voorbeeld:
<table>
<tr>
<th>Naam</th>
<th>Leeftijd</th>
</tr>
<tr>
<td>Jan</td>
<td>15</td>
</tr>
</table>
Formulieren gebruik je om gegevens te versturen.
Het <form> element bevat invoervelden zoals <input>.
Voorbeeld:
<form>
<label>Naam:</label>
<input type="text">
<button type="submit">Verstuur</button>
</form>
| HTML-element | Beschrijving |
|---|---|
| <!DOCTYPE html> | Definieert documenttype (HTML5) |
| <html> | Root-element van een HTML-document |
| <head> | Bevat metadata en links naar externe bronnen |
| <title> | Titel van de webpagina |
| <meta> | Metadata zoals charset of viewport |
| <link> | Koppeling naar externe bestanden zoals CSS |
| <style> | CSS-stijlen direct in het HTML-document |
| <body> | Bevat alle zichtbare inhoud van de pagina |
| <h1> - <h6> | Koppen van groot (<h1>) tot klein (<h6>) |
| <p> | Alinea tekst |
| <br> | Regelafbreking |
| <hr> | Horizontale lijn/scheiding |
| <a href=""> | Hyperlink naar andere pagina of locatie |
| <img src="" alt=""> | Afbeelding invoegen |
| <audio> | Audio afspelen |
| <video> | Video afspelen |
| <iframe> | Ingesloten andere webpagina |
| <ul> / <ol> / <li> | Lijsten: ongeordend (ul) of geordend (ol) |
| <table> / <tr> / <td> / <th> | Tabellenstructuur: rijen, cellen en koppen |
| <thead> / <tbody> / <tfoot> | Groeperen van tabelkop, inhoud en voettekst |
| <div> | Container voor secties of layout |
| <span> | Inline container voor tekst of kleine elementen |
| <form> | Formulier voor gebruikersinput |
| <input> | Invoerveld in formulier |
| <label> | Label koppelen aan een invoerveld |
| <button> | Knop in formulier of pagina |
| <select> / <option> | Dropdown menu |
| <textarea> | Meerregelig tekstveld |
| <fieldset> / <legend> | Groeperen van formulierinvoer met titel |
| <strong> | Belangrijke, vetgedrukte tekst (semantisch) |
| <b> | Vetgedrukte tekst (niet semantisch) |
| <em> | Belangrijke, cursieve tekst (semantisch) |
| <i> | Cursieve tekst (niet semantisch) |
| <small> | Kleine tekst |
| <mark> | Gemarkeerde tekst |
| <code> | Programmacode |
| <pre> | Vooraf opgemaakte tekst / behoudt witruimte |
| <blockquote> | Geciteerde tekst |
| <q> | Korte citaten inline |
| <sup> | Superscript (boven tekst) |
| <sub> | Subscript (onder tekst) |
| <abbr> | Afkorting |
| <cite> | Bron of titel citeren |