Tekstgerelateerde tags
Dit artikel legt tekstgerelateerde tags uit.
De uitleg is opgedeeld in semantische en niet-semantische tags.
YouTube Video
CSS maken voor voorbeeldweergave
html-tags.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 20px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29}
30
31p, pre {
32 margin: 10px 0;
33 padding: 0;
34}
35
36ul, ol, dl, menu {
37 margin: 0;
38}
39
40pre {
41 background-color: #f0f0f0;
42 border-left: 4px solid #ccc;
43 padding: 10px;
44 overflow-x: auto;
45}
46
47p.sample, .sample {
48 background-color: #e7f4e9;
49 padding: 10px;
50 border-left: 4px solid #7bbd82;
51 color: #333;
52}
53
54p.sample-error, .sample-error {
55 background-color: #f4e7e7;
56 padding: 10px;
57 border-left: 4px solid #bd827b;
58 color: #333;
59}
60
61p.sample-warn, .sample-warn {
62 background-color: #f4f1e7;
63 padding: 10px;
64 border-left: 4px solid #bda97b;
65 color: #333;
66}
67
68code {
69 padding: 2px 4px;
70 border-radius: 4px;
71 font-family: monospace;
72}
73
74span {
75 font-weight: bold;
76}
77
78main {
79 padding-bottom: 100px;
80}
81
82article {
83 background-color: white;
84 padding: 20px;
85 margin-bottom: 10px;
86 border-radius: 8px;
87 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
88}
89
90section {
91 margin-bottom: 20px;
92}
93
94table {
95 width: 100%;
96 border-collapse: collapse;
97}
98
99th, td {
100 border: 1px solid #ddd;
101}Basis tekstgerelateerde tags
<div> tag
1<div>This is a division of content.</div>-
De
<div>tag is een blokniveau-element dat wordt gebruikt om verdelingen binnen HTML te maken. -
De
<div>tag is een niet-semantische tag.Wanneer de focus ligt op semantische HTML, kunnen betekenisvolle tags (zoals
<section>,<article>) worden gebruikt. Dit helpt zoekmachines en schermlezers om de inhoud van de pagina beter te begrijpen. -
Door het te combineren met CSS en JavaScript, kunt u het uiterlijk en gedrag van de pagina beheersen.
De
<div>-tag wordt gebruikt om inhoud op een pagina te groeperen als een blokniveau-element. Het wordt voornamelijk gebruikt in combinatie met CSS en JavaScript om de paginalay-out en -stijl aan te passen en elementen te manipuleren.
<p> tag
This is a paragraph of text.
1<p>This is a paragraph of text.</p>- De
<p>-tag is een element dat wordt gebruikt om een alinea in HTML te definiëren. De<p>vertegenwoordigt een alinea en wordt voornamelijk gebruikt om tekst te groeperen en weer te geven. Het helpt de inhoud gemakkelijker leesbaar te maken door tekstgedeelten visueel te scheiden. - Je kunt geen andere blokniveau-elementen zoals een andere
<p>-tag of een<div>-tag binnen een<p>-tag plaatsen. Dit is verboden volgens de HTML-specificatie. Als je dat doet, sluit de browser de tag automatisch en wordt deze niet correct weergegeven.
<a> tag
1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>-
De
<a>-tag wordt gebruikt om links te maken.De
<a>-tag wordt gebruikt om links naar andere pagina's, externe sites of bestanden te maken. Hethref-attribuut wordt gebruikt om de bestemming van de link te specificeren. -
Het kan worden gebruikt voor tekst- of afbeeldingslinks, en met
target="_blank"wordt de link in een nieuw tabblad geopend. -
Het
targetattribuut wordt gebruikt om te specificeren hoe de gelinkte bestemming wordt weergegeven._self(standaard): Opent de link in het huidige venster of tabblad._blank: Opent de link in een nieuw venster of tabblad._parent: Opent de link in het bovenliggende frame._top: Opent de link in het volledige venster, waarbij frames worden genegeerd.
-
Het
title-attribuut wordt gebruikt om een tool-tip op een link weer te geven. Wanneer een gebruiker met de muis over de link beweegt, wordt de gespecificeerde titel weergegeven.
1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>- De
<a>-tag wordt ook gebruikt om naar specifieke locaties binnen dezelfde pagina te springen. Om dit te bereiken, stel je eenid-attribuut in op het doelelement en gebruik je dezeidin hethref-attribuut van de link.
<span> tag
1Here is some <span style="color: red;">highlighted text-
De
<span>tag is een inline-element.De
<span>-tag is een inline-element, dus het breekt de regel niet wanneer het wordt gebruikt tussen tekst, links, afbeeldingen of andere inline-elementen. Het past natuurlijk in de stroom van de pagina. -
Je kunt specifieke stijlen gedeeltelijk toepassen.
Wanneer je een stijl alleen op een deel van het document wilt toepassen, kun je de
<span>-tag gebruiken om een CSS-klasse of ID toe te wijzen en stijlen toe te passen op een specifiek bereik. -
De
<span>-tag is een niet-semantisch element.Omdat de
<span>-tag geen specifieke betekenis of structurele rol heeft, wordt deze puur gebruikt voor stijling of scriptingdoeleinden. Wanneer semantische nadruk nodig is, is het geschikter om semantische tags zoals<strong>of<em>te gebruiken, die later zullen worden geïntroduceerd.
<br>-tag
line break.
1Here is some text with a <br> line break.-
De
<br>-tag is een inline-element.Omdat de
<br>-tag een inline-element is, neemt het niet het gehele blok in beslag en creëert het een regeleinde in de tekst waar het wordt geplaatst. Terwijl de<p>-tag marge boven en onder toevoegt om alinea's te scheiden, creëert de<br>-tag een regeleinde zonder marge toe te voegen. -
Het is een zelfsluitende tag, dus een sluitende tag (
</br>) is niet nodig. -
Het is het beste om overmatig gebruik te vermijden en
<p>-tags of CSS te gebruiken voor alinea-onderbrekingen of lay-outaanpassingen.Bij het indelen van tekst in alinea's is het gepaster om de
<p>-tag te gebruiken. Het wordt ook aanbevolen om CSS te gebruiken voor lay-outaanpassingen. Bijvoorbeeld, door dewhite-space-eigenschap in CSS te gebruiken, kunnen regeleinden en spaties in tekst worden weergegeven zoals ze verschijnen.
<hr>-tag
This is another section of text.
1This is some text.<hr>This is another section of text.-
De
<hr>-tag is een blokniveau-element.De
<hr>-tag wordt gebruikt om een horizontale lijn in te voegen om gedeelten van inhoud visueel te scheiden. Het kan ook worden gebruikt om een thematische onderbreking aan te geven, wat het betekenis geeft op basis van context. -
Het is een zelfsluitende tag, dus een sluittag (
</hr>) is niet nodig. -
Je kunt de kleur, lengte en dikte ervan aanpassen met CSS.
Semantische tekstgerelateerde tags
Van <h1>-tag tot <h6>-tag
Main Heading
Subheading
Sub-subheading
1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>-
De
<h1>tot<h6>-tags zijn koptekentags die in HTML worden gebruikt.De
<h1>-tag vertegenwoordigt de belangrijkste kop en wordt doorgaans gebruikt als de hoofdtitel van de gehele pagina. Het is gebruikelijk om slechts één<h1>-tag per HTML-document te gebruiken.De
<h2>-tag is de op één na belangrijkste kop na<h1>en wordt gebruikt voor sectie- of hoofdstuktitels binnen de pagina.De
<h3>-tag vertegenwoordigt ondertitels of kleinere secties onder<h2>.De
<h4>,<h5>, en<h6>-tags vertegenwoordigen lagere niveau koppen, gebruikt voor meer gedetailleerde items of sectietitels. -
Koptags geven de belangrijkheid van tekst aan en helpen bij het creëren van de logische structuur van een pagina. Zoekmachines gebruiken ook koptags om de inhoud van de pagina te begrijpen.
<strong>-tag
1<strong>Important text</strong> to emphasize significance.-
De
<strong>tag is een HTML-tag die wordt gebruikt om de belangrijkheid of nadruk van tekst aan te geven en wordt meestal vet weergegeven. -
De
<strong>tag is een semantische tag, en het primaire doel ervan is om betekenis toe te voegen.Het kan aangeven dat de tekst contextueel belangrijk is. Bijvoorbeeld, het kan de belangrijkheid van de tekst voor zoekmachines tonen, wat het nuttig maakt voor SEO. Het geeft ook de belangrijkheid van de tekst door aan gebruikers met schermlezers. Aan de andere kant is de
<b>tag, die later geïntroduceerd zal worden, simpelweg een tag om tekst vet te maken en biedt geen semantische nadruk.
<em>-tag
1<em>Emphasized text</em> for italics and emphasis.-
De
<em>tag is een HTML-tag die wordt gebruikt om belangrijkheid of nadruk in tekst aan te geven en wordt meestal in cursief weergegeven. -
De
<em>tag is een semantische tag, en het hoofddoel ervan is om betekenis te geven.Net als de
<strong>tag kan het aangeven dat tekst contextueel belangrijk is. De<strong>tag wordt meestal vet weergegeven, terwijl de<em>tag meestal in cursief wordt weergegeven. Beide worden door schermlezers en zoekmachines herkend voor semantische nadruk, maar<strong>geeft een sterkere belangrijkheid aan, terwijl<em>emotionele nadruk overbrengt. Bovendien maakt de<i>tag, die later geïntroduceerd zal worden, tekst simpelweg cursief en biedt geen semantische nadruk.
<mark>-tag
1<mark>Highlighted text</mark> for attention.- De
<mark>tag wordt gebruikt om aan te geven dat specifieke tekst contextueel belangrijk is. Het is nuttig voor het markeren van zoekresultaten of sleutelpunten. - Standaard wordt tekst die binnen de
<mark>-tag is geplaatst weergegeven met een gele achtergrond, die zijn belangrijkheid visueel benadrukt.
<del>-tag
1<del>Deleted text</del> shows removed content.-
De
<del>tag wordt gebruikt om aan te geven dat tekst is verwijderd of aangepast. Deze tag is nuttig voor het tonen van de geschiedenis van wijzigingen of revisies in tekst. -
Tekst omgeven door de
<del>tag wordt meestal weergegeven met een doorhaling. Dit geeft visueel de verwijderde inhoud aan.Tekst omgeven door de
<del>tag wordt ook door schermlezers herkend als verwijderd. Hierdoor kan inhoud die visueel niet zichtbaar is toch worden begrepen.
<ins>-tag
1<ins>Inserted text</ins> shows added content.-
De
<ins>-tag wordt gebruikt om nieuw toegevoegde of gewijzigde tekst in een document aan te geven. Deze tag is handig om de geschiedenis van teksttoevoegingen of -wijzigingen weer te geven. -
In browsers wordt tekst binnen de
<ins>-tag meestal weergegeven met een onderstreping. Dit geeft visueel toegevoegde inhoud aan.Tekst binnen de
<ins>-tag wordt ook door schermlezers herkend als nieuw toegevoegd. Hierdoor kan inhoud die visueel niet zichtbaar is toch worden begrepen.
<abbr>-tag
1<abbr title="World Health Organization">WHO</abbr>- De
<abbr>-tag is een inline-element dat wordt gebruikt om afkortingen of acroniemen aan te geven. Door deze tag te gebruiken wordt de volledige betekenis van afkortingen weergegeven en wordt bijgedragen aan betere SEO en toegankelijkheid. Het helpt vooral lezers die niet bekend zijn met de afkorting en gebruikers van schermlezers om de inhoud beter te begrijpen.
Tags gerelateerd aan tekstdecoratie
<b>-tag
1<b>Bold text</b> without semantic emphasis.- De
<b>-tag is een inline-element dat wordt gebruikt om tekst vetgedrukt weer te geven. Net als de andere tags die we zullen bespreken, wordt het gebruikt voor visuele nadruk maar niet voor semantische nadruk.
<i>-tag
1<i>Italic text</i> for style.- De
<i>-tag is een inline-element dat wordt gebruikt om tekst cursief weer te geven.
<u> tag
1<u>Underlined text</u> for decoration.- De
<u>-tag is een inline-element dat wordt gebruikt om tekst te onderstrepen.
<small> tag
1<small>This is small text.</small>- De
<small>tag is een inline-element dat wordt gebruikt om tekst in een kleinere grootte weer te geven. Het wordt vaak gebruikt om aanvullende informatie of aantekeningen weer te geven die ondergeschikt zijn aan de hoofdinhoud.
<s> tag
1<s>Strikethrough text</s>- De
<s>-tag is een inline-element dat wordt gebruikt om een doorstrepingslijn op tekst te tekenen.
<sub> tag
1H<sub>2</sub>O- De
<sub>tag is een inline-element dat wordt gebruikt om subscript tekst weer te geven.
<sup> tag
1E = mc<sup>2</sup>- De
<sup>tag is een inline-element dat wordt gebruikt om superscript tekst weer te geven.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.