Websites met stijl
Naslag: elementen voor opmaak
Op dit naslagblad
Inline-elementen die een stuk tekst een afwijkende opmaak geven:
Cursieve tekst
element i
Het inline element i markeert een een stuk tekst door het cursief te maken.
Html:
Dit is een zin met <i>een cursief stuk</i> erin.
Resultaat:
Dit is een zin met een cursief stuk erin.
element em
Het inline element em markeert een benadrukte tekst.
De tekst wordt cusief getoond
Html:
Dit is een zin met <em>een belangrijk stuk</em> erin.
Resultaat:
Dit is een zin met een belangrijk stuk erin.
Verschil tussen em en i
- em markeert een stuk benadrukte tekst door die cursief te maken.
- i maakt een stuk tekst cursief. Het stuk tekst hoeft niet beklemtoond te zijn.
- Het verschil tussen i en em is alleen van belang voor zoekmachines.
Vette tekst
element b
Het inline element b markeert een een stuk tekst door dat vet te maken.
Html:
Dit is een zin met Tag><b>een vet stuk</b> erin.
Resultaat:
Dit is een zin met een vet stuk erin.
element strong
Het inline element strong markeert een belangrijke tekst.
De tekst wordt vet getoond
Html:
Dit is een zin met <strong>een belangrijk stuk</strong> erin.
Resultaat:
Dit is een zin met een belangrijk stuk erin.
Verschil tussen strong en b
- strong markeert een stuk belangrijke tekst door dat vet te maken.
- b maakt een stuk tekst vet. Het stuk tekst hoeft niet belangrijk te zijn.
- Het verschil tussen b en strong is alleen van belang voor zoekmachines.
Onderstreepte tekst
Het inline element u markeert een een stuk tekst door dat te onderstrepen.
Html:
Dit is een zin met <u>een onderstreept stuk</u> erin.
Resultaat:
Dit is een zin met een onderstreept stuk erin.
Span
Het inline-element span dient om een stuk tekst binnen een element van een afwijkende opmaak te voorzien.
Het span-element heeft op zich geen enkele werking. Maar met behulp van de attributen class of style kan het element een afwijkende opmaak krijgen.
Voorbeelden
Span - voorbeeld 1
In de html:
Dit is een gewone zin met <span class="speciaal"> een afwijkend stukje</span> tekst.
In de css:
.speciaal {background-color: aqua;}
Resultaat:
Dit is een gewone zin met een afwijkend stukje tekst.
Span - voorbeeld 2
In de html:
Dit is een gewone zin met <span style="font-size:2em; font-weight: bold; color: red;"> een afwijkend stukje</span> tekst.
Resultaat:
Dit is een gewone zin met een afwijkend stukje tekst.
Opmerking:
- Ook de elementen i, em, b, strong en u kunnen met behulp van stijlregels een aangepaste opmaak krijgen.
Zo zijn de groene stukjes tekst in deze cursus gemarkeerd met em. Daarvoor heb ik de onderstaande stijlregels gebruikt.
em {
font-style: normal;
color: hsl(120,100%,30%);
}