Op Youtube: praktijkdemo
![](img/03_links/youtube-links.png)
Blocklevel tekst
<p> |
paragraaf | ![]() |
<h1>...<h6> |
titels | ![]() |
<blockquote> |
quote, pull quote | ![]() |
|
ongeordende lijst van gelijkaardige items (ook gebruikt voor menu's) | ![]() |
|
geordende lijst van gelijkaardige items | ![]() |
|
definitielijst met term/data paren | ![]() |
|
basisstructuur tabel |
Inline tekst
<em> |
nieuwe term, spreek trager uit |
<strong> |
belangrijke term, spreek luider uit |
<small> |
meestal in footer: "kleine lettertjes" (voorwaarden, copyright info...) |
<sup> |
superscript, b.v. m2 |
<sub> |
subscript, b.v. H2O |
<cite> |
referentie naar een werk: schilderij, boek, publicatie... |
<code> |
code blok, b.v. in programmeerblogs |
<abbr> |
afkorting |
<br> |
line break |
< > © — ... | karakter entiteiten: < > © — ... |
<address> |
primaire contactinformatie (hoeft geen fysiek adres te zijn) |
Links
<a href="...">...</a> |
hyperlink |
<a href="..." title="...">...</a> |
hyperlink met beschrijving |
<a href="mailto:...">...</a> |
email link |
<a href="tel:...">...</a> |
telefoon of gsm link |
<a href="#ref1">...</a>
<p id="ref1">...</p>
|
anker (interne link in de pagina) |
|
typische code voor logo |
|
typische code voor menu |
Media
<img src="..." alt="..."> |
image |
|
one or more images with caption |
|
image with alternative sources |
|
audio element |
|
audio with alternative sources |
|
video element |
|
video with alternative sources |
Structural
document
<!DOCTYPE html> |
HTML document type |
<html> |
HTML document |
<head> |
invisible meta content |
<title> |
document title |
<meta charset="utf-8"> |
UTF8 characterset declaration |
<style>...</style> |
internal stylesheet |
<link rel="stylesheet" href="..."> |
linked stylesheet |
<script></script> |
internal script |
<script src=""></script> |
linked script |
<head> |
invisible meta content |
<body> |
visible content |
divisions
<div> |
blocklevel division (part of document) |
<span> |
inline span (part of text) |
<section> |
groups a title and content |
<nav> |
main navigation block |
<article> |
self-contained independent content |
<main> |
main page content |
<header> |
introductory content (page or section) |
<aside> |
related content (page or section) |
<footer> |
closing content (page or section) |
Forms
form structure
<form action="...">...</form> |
basic form |
|
control group |
|
checkboxlist |
|
radiobutton group |
controls
<input type="text"> |
text field |
<textarea>...</textarea> |
text area |
<input type="passwoord"> |
password field |
<input type="email"> |
email field |
<input type="tel"> |
telephone field |
<input type="url"> |
url field |
<input type="date"> |
datepicker field |
<input type="color"> |
colorpicker field |
<input type="range" min="1" max="10"> |
slider field |
|
dropdown list |
buttons
<input type="submit" value="send"> |
submit button |
<button type="submit">send</button> |
submit button, alternative syntax |
<input type="reset" value="clear form"> |
reset button |
attributes
<input ... placeholder="..."> |
set watermark text |
<input ... value="..."> |
set input value |
<input ... disabled> |
control is disabled |
<input ... autofocus> |
autofocus on this control |
<input ... required> |
value is required |
<input type="radio" checked>
|
radiobutton is aangevinkt |
<option selected>...</option> |
optie is aangevinkt |