Home / Kennisbank / Basis HTML Content Elementen

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
2. Paragrafen
3. Lijsten
4. Dikgedrukte tekst
5. Cursieve tekst
6. Onderlijning
7. Afbeeldingen
8. Hyperlinks

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>

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.

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

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>

1. Eerste item
2. Tweede item
3. Derde item

Het strong element wordt gebruikt voor de belangrijke elementen, zoals een waarschuwing of een titel.

Voorbeeld:

<strong>Waarschuwing:</strong> Hier mag je niet duiken!

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

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

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” />

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>