Kennisbank
Basis HTML Content Elementen
HTML kent veel elementen, maar in dit artikel worden alleen content elementen benoemd die ook te gebruiken zijn in editors van websites.
Inhoud
1. Kopelementen
De kopelementen zorgen ervoor dat je delen van de inhoud een titel kunt geven. Net zoals een boek zijn op een HTML-pagina ook titels en ondertitels. De elementen lopen van H1 t/m H6, maar je gebruikt er vaak maar drie of vier. Hoe lager het getal, hoe groter de kop. De H1 tag is het belangrijkste kopelement en de H6 tag is het minst belangrijk.
Voorbeeld:
<h1>Dit is een titel voor mijn artikel</h1>
<h2>Dit is een titel voor een hoofdstuk binnen mijn artikel</h2>
<h3>Dit is een ondertitel</h3>
<h4>Een ondertitel die onder mijn ondertitel staat</h4>
Dit is een titel voor mijn artikel
Dit is een titel voor een hoofdstuk binnen mijn artikel
Dit is een ondertitel
Een ondertitel die onder mijn ondertitel staat
Kopelementen bestaan om de pagina van een website een duidelijke structuur te kunnen geven, hierdoor kan een bezoeker gemakkelijker informatie vinden. Daarnaast worden de kopelementen tegenwoordig ook gebruikt door zoekmachines om te bepalen of er relevante content op een pagina staat.
2. Paragrafen
Paragrafen worden gebruikt om tekst in te plaatsen. De <p></p> tag wordt gezien als een alinea. Browsers voegen margins (witruimte) toe aan elke alinea zodat het makkelijk uit elkaar te halen is.
Voorbeeld:
<p>Dit is een alinea</p>
<p>Dit is een nieuwe alinea</p>
<p>Dit is nog een alinea</p>
Dit is een alinea
Dit is een nieuwe alinea
Dit is nog een alinea
3. Lijsten
In HTML-documenten kun je verschillende soorten lijsten toepassen. De meest gebruikte zijn de ongeordende en de geordende lijst. Een lijst kan worden aangemaakt door als eerste de tag van de ongeordende (ul) of geordende (ol) te gebruiken, met daarin de lijstitems (li).
De ongeordende lijst (unordered list)
Bij de ongeordende lijst zijn de items niet genummerd, maar hebben ze een bolletje aan de zijkant. De ongeordende lijst wordt gemaakt met de elementen <ul></ul>.
Voorbeeld:
<ul>
<li>Eerste item</li>
<li>Tweede item</li>
<li>Derde item</li>
</ul>
- Eerste item
- Tweede item
- Derde item
De geordende lijst (ordered list)
In een geordende lijst zijn de items genummerd met een getal of met een letter. De geordende lijst wordt gemaakt met de elementen <ol></ol>.
Voorbeeld:
<ol>
<li>Eerste item</li>
<li>Tweede item</li>
<li>Derde item</li>
</ol>
- Eerste item
- Tweede item
- Derde item
4. Dikgedrukte tekst
Het strong element wordt gebruikt voor de belangrijke elementen, zoals een waarschuwing of een titel.
Voorbeeld:
<strong>Waarschuwing:</strong> Hier mag je niet duiken!
Waarschuwing: Hier mag je niet duiken!
5. Cursieve tekst
De <i> en <em> elementen zorgen dat de tekst schuingedrukt komt te staan. <em> markeert een stuk benadrukte tekst door die cursief te maken. De <i> tag maakt een stuk tekst cursief. Het verschil tussen de i en de em tag is alleen van belang voor zoekmachines.
Voorbeeld:
Dit is <i>een stukje tekst</i> als voorbeeld
Dit is een stukje tekst als voorbeeld
6. Onderlijning
Om een stuk tekst een onderlijning te geven moet je inline stijling gebruiken. Dit kun je doen door “text-decoration: underline;” of <u></u> te gebruiken.
Voorbeeld:
<p>
Dit is <span style="text-decoration: underline;">een stukje tekst</span> als voorbeeld
</p>
<p>Dit is <u>een stukje tekst</u> als voorbeeld</p>
Dit is een stukje tekst als voorbeeld
Dit is een stukje tekst als voorbeeld
7. Afbeeldingen
Om een afbeelding op de pagina te krijgen moet je de <img> tag gebruiken. Het is een leeg element, dus dat betekent dat er bijvoorbeeld geen </img> achter hoort te komen. Je kunt het afsluiten met een “/>”.
Een afbeelding kun je ophalen door de attribuut src, ook wel de “source”.
Voorbeeld:
<img src=”logo.png” />
Het kan zijn dat je de afbeelding in een mapje hebt gezet, zoals “images”. De reden waarom je dit zou kunnen doen is omdat je dan makkelijker op Google te vinden bent.
Voorbeeld:
<img src=”/images/logo.png” />
8. Hyperlinks
Met hyperlinks kun je jouw website doorlinken naar een nieuwe pagina. Dit doe je met de <a> tag. Je kunt het ook gebruiken om naar een andere website te gaan. Om de bezoeker niet te verliezen als ze op de link klikken, kun je target=”_blank” gebruiken. Dit zorgt ervoor dat de website in een nieuw tabblad wordt geopend.
Voorbeeld:
<a href=”https://www.memo-ict.nl” target=”_blank”>Dit is een stukje tekst die doorlinkt naar een andere website</a>