Opmaak in HTML wordt bereikt met behulp van HTML-tags, die instructies geven aan de webbrowser over hoe de inhoud van een webpagina moet worden weergegeven.
Enkele basisprincipes van Opmaak in HTML
- Tekst opmaak: HTML biedt verschillende tags om tekst op te maken, zoals <strong> voor vetgedrukte tekst, <em> voor cursieve tekst, <u> voor onderstreepte tekst, <h1> tot <h6> voor koppen van verschillende niveaus, en <p> voor alinea’s…
Tekst kan ook worden opgemaakt met CSS (Cascading Style Sheets). Hiermee kun je kleuren, lettertypen, uitlijning en andere visuele aspecten van de tekst bepalen. In de broncode van een webpagina wordt de tekst vaak tussen de openings-tag en sluitings-tag in de HTML-code geplaatst.
Zie onderstaande voorbeelden voor de Opmaak in HTML:
<h1>Dit is de kop boven een artikel</h1><h2>Dit is de kop boven een artikel</h2><h3>Dit is de kop boven een artikel</h3><h4>Dit is de kop boven een artikel</h4><h5>Dit is de kop boven een artikel</h5><h6>Dit is de kop boven een artikel</h6> |
<p>Dit is een <strong>vetgedrukte</strong>tekst.</p> <p>Dit is een <em>cursieve</em> tekst.</p> <p>Dit is een <u>onderstreepte</u> tekst.</p> |
- Lijsten: HTML ondersteunt zowel ongeordende lijsten <ul>, alsook geordende lijsten <ol>, evenals lijstitems <li>. Zie onderstaande voorbeelden:
<ul> <li>Eerste item</li> <li>Tweede item</li> <li>Derde item</li> </ul> |
Het resultaat in de webbrowser:
-
-
- Eerste item
- Tweede item
- Derde item
-
<ol> <li>Eerste item</li> <li>Tweede item</li> <li>Derde item</li> </ol> |
Het resultaat in de webbrowser:
-
-
-
- Eerste item
- Tweede item
- Derde item
-
-
Opmaak in HTML met semantische elementen
Gebruik semantische tags om de structuur en leesbaarheid van je HTML-document te verbeteren. Deze tags geven betekenis aan de verschillende delen van je document.
<header>
: voor de kop van een pagina of sectie<nav>
: voor navigatie links<main>
: voor de hoofdinhoud<article>
: voor een zelfstandig inhoudsblok<section>
: voor secties binnen een document<aside>
: voor inhoud die zijdelings gerelateerd is aan de hoofdinhoud<footer>
: voor de voettekst van een pagina of sectie
Let op! Kies tijdens het kopiëren en plakken van de bovenstaande broncodes, voor plakken zonder opmaak. |
Meer webadressen over Opmaak in HTML | ||
Codecenter | Internet Academy | Wiki Books |
HTML School | Handleiding HTML | Vision2Form |
HTML Totaal | Picqer | Textbroker |