| Element | Uitleg | Demonstratie |
|---|---|---|
| Les 1 - Inleiding HTML | ||
| <html> | Hiermee kun je een HTML document aanmaken | n.v.t. |
| <head> | Hier plaats je alle informatie over de pagina | n.v.t. |
| <body> | Hier plaats je de feitelijke content van de pagina | n.v.t. |
| <title> | Wordt gebruikt om je pagina een titel te geven (voor het tabblad) | (zie tabblad) |
| <p> | Hiermee kun je een paragraaf aanmaken | Dit is een paragraaf. |
| <br> | Om een nieuwe regel te beginnen | Nieuwe regel beginnen. |
| <strong> | Hiermee kun je tekst als belangrijk markeren | tekst met strong |
| <em> | Hiermee kun je tekst als benadrukt markeren | tekst met em |
| Les 2 - Teksten | ||
| <meta> | Hier plaats je metagegevens plaatsen (vooral voor SEO) | n.v.t. |
| <h1> t/m <h6> | Met deze elementen kun je headings (kopjes) maken | Dit is een h3-heading |
| <del> | Streept tekst door | |
| <ins> | Onderstreept tekst | Tekst met ins |
| <sup> | Plaatst tekst in super script, boven | Tekst met sup |
| <sub> | Plaatst tekst in sub script, onder | Tekst met sub |
| <q> | Plaatst quotes om tekst | Tekst met q |
| <blockquote> | Plaats tekst ingesprongen en kan met bron aangegeven worden wie het heeft gezegd of waar het vandaan komt | Een blockquote |
| <abbr> | Geeft een afgekort word een title waar de betekenis staat | Tekst met een:abbr |
| Les 3 - Lijsten | ||
| <ul> | unsorted list, lijst zonder nummering |
|
| <li> | lijst item | zie boven en onder |
| <ol> | ordered list, lijst met nummering |
|
| <dl> | description list |
|
| <dt> | term/naam | zie boven |
| <dd> | beschrijving | zie boven |
| Les 4 - hyperlinks | ||
| <a> | standaard link | link |
| Les 5 - afbeeldingen | ||
| <img> | plaats een afbeelding | ![]() |
| <map> | maakt een selectie map voor afbeeldingen | |
| <area> | de specifieke selectie gebeiden voor <map> | |
| <object> | voor svg afbeeldingen | |
| <svg> | om een svg te maken in browser | voorbeeld onder |
| <rect> | vierkant in svg | |
| <circle> | cirkel in svg | |
| <ellipse> | ellipse in svg | |
| <line> | lijn in svg | |
| <polygon> | polygon in svg | |
| <polyline> | lijn met meerdere punten | |
| Les 6 - tabellen | ||
| <table> | basis voor tabel | voor alle tabel tags zie deze website |
| <tr> | tabel rij | |
| <th> | tabel titel | |
| <td> | tabel data | |
| <caption> | een titel of beschrijving van de info in de tabel | |
| <thead> | hoofd van de tabel | |
| <tbody> | midden van tabel | |
| Les 7 - metagegevens | ||
| <meta> | meta tag voor meta informatie veel verschillende opties | |
| <link> | relatie tussen bestand en externe bron | |
| <script> | linkt javascript aan html document | |
| Les 8 - formulieren | ||
| <form> | basis voor formulier | zie onder |
| <label> | geeft naam aan input methode | zie onder |
| <input> | input voor veel opties | |
| <datalist> | voor een dropdown menu | |
| <fieldset> | plaats een verdeling in een formulier | |
| <legend> | geeft de fieldset een naam | |
| <optgroup> | voor select, om een lijst te verdelen in stukken | |
| <select> | dropdown menu selectie | |
| Les 9 - media | ||
| <audio> | om audio aftespelen of plaatsen op de site | |
| <video> | om video aftespelen of te plaatsen | |
| <iframe> | een frame op de site die van bron verandert kan worden | |
| <canvas> | een canvas waar via javascript op gewerkt kan worden | |
| Les 10 - divisies | ||
| <header> | hoofd van de site | |
| <section> | een onafhankelijke sectie van de site | |
| <article> | delen die met elkaar een relatie hebben, kan binnen sectie of andersom | |
| <footer> | de voet van de site | |
| <aside> | extra info die niet nodig is voor de sections of content | |