HTML heeft veel tags die veel mensen elke dag gebruiken, zoals <div>, <p> en <a>. Maar er zijn ook enkele verborgen parels die vaak onopgemerkt blijven. Deze tags kunnen helpen om websites boeiender, toegankelijker en betekenisvoller te maken zonder veel extra moeite.
In dit artikel bespreken we een groep unieke HTML-elementen die je webpagina’s kunnen verbeteren. Ze bieden specifieke functies voor het opmaken van tekst, het verbeteren van de leesbaarheid en het toevoegen van interactieve functies.
Inhoudsopgave
De <q> Tag: Korte Inline Citaten
De <q> tag wordt gebruikt om korte citaten binnen een alinea toe te voegen. Het helpt citaten er anders uit te laten zien en gemakkelijker te herkennen, zonder de tekststroom te onderbreken. Deze tag voegt automatisch aanhalingstekens toe rond de inhoud.
Beschrijving en Syntax
De basisstructuur van de <q> tag is eenvoudig:
<p>She said, <q>This is amazing!</q></p>
Dit zou worden weergegeven als:
Zij zei, “Dit is geweldig!”
Verschil met het <blockquote> Element
De <q> tag is voor korte citaten binnen een zin. Aan de andere kant wordt het <blockquote> element gebruikt voor langere citaten die meestal hun eigen ruimte of alinea nodig hebben.
Bijvoorbeeld:
<blockquote>
"This is a long quote that needs its own space. It is different from a short quote."
</blockquote>
Dit blok wordt weergegeven met inspringing en is bedoeld om een groter stuk geciteerde tekst te benadrukken.
Gebruiksscenario’s: Citaten toevoegen binnen alinea’s
De <q> tag is perfect voor situaties waarin je een citaat in een zin wilt vermelden zonder het te veel te scheiden. Bijvoorbeeld, wanneer je iemand citeert in een artikel of blogpost:
<p>The professor said, <q>Practice makes perfect</q>, during the class.</p>
In dit geval houdt de <q> tag het citaat klein en binnen dezelfde alinea.
De professor zei, Oefening baart kunst
, tijdens de les.
Browsercompatibiliteit en stylingtips
De meeste moderne browsers voegen automatisch aanhalingstekens toe aan de inhoud binnen een <q> tag. Maar je kunt het uiterlijk aanpassen met CSS als dat nodig is. Hier is hoe je het kunt stylen:
q {
quotes: "«" "»";
font-style: italic;
}
Deze code verandert de aanhalingstekens in Franse stijl markeringen (« en ») en maakt het citaat cursief.
De meeste browsers ondersteunen de <q> tag, dus je hoeft je geen zorgen te maken over compatibiliteitsproblemen voor moderne gebruikers. Maar oudere browsers hebben mogelijk extra aandacht nodig, dus test altijd of je publiek oudere versies gebruikt.
De <s> tag: Doorstreepte tekst
De <s> tag wordt gebruikt om tekst aan te geven die niet langer correct, relevant of verwijderd is. Het plaatst een lijn door het midden van de tekst, wat we een “doorstreping” noemen. Deze tag wordt vaak gebruikt om iets aan te geven dat is bewerkt of bijgewerkt.
Uitleg en gebruik
De <s> tag is eenvoudig te gebruiken. Wikkel het rond de tekst die je wilt doorstrepen:
<p>This product was <s>$50</s> now only $30!</p>
Dit zal worden weergegeven als:
Dit product was $50 nu slechts $30!
Veelvoorkomende gebruikssituaties: Aangeven van verwijderde of irrelevante inhoud
De <s> tag is geweldig voor het tonen van prijswijzigingen, bewerkingen of inhoud die niet langer geldig is. Bijvoorbeeld:
Prijsupdates:
<p><s>$75</s> $50 (Limited Offer!)</p>
$75 $50 (Beperkte aanbieding!)
Correcties of wijzigingen:
<p><s>Old website address</s> New website address</p>
Oud webadres Nieuw webadres
Inhoud die niet langer relevant is:
<p>This feature is <s>no longer available</s>.</p>
Deze functie is niet langer beschikbaar.
Stijlmogelijkheden met CSS
Je kunt aanpassen hoe de doorhalingen eruitzien met CSS. Bijvoorbeeld, je kunt de kleur van de lijn of de tekst veranderen:
s {
text-decoration: line-through;
color: red;
}
In dit geval zal de tekst een rode lijn erdoorheen hebben, wat meer nadruk legt op het feit dat het is doorgehaald.
Semantische betekenis versus visuele decoratie
De <s> tag heeft een semantische betekenis. Het vertegenwoordigt meestal inhoud die ooit geldig was maar nu onjuist of verouderd is. Het is meer dan alleen een stijlwijziging. Bijvoorbeeld, het is perfect voor het tonen van wijzigingen in juridische documenten, correcties in blogposts of prijsupdates.
Aan de andere kant, als je doorhalingen alleen voor visuele decoratie gebruikt zonder dat het betekent dat de tekst fout is, is het beter om CSS direct te gebruiken, zoals dit:
span.strike {
text-decoration: line-through;
}
En pas het dan toe in je HTML:
<p>This text is <span class="strike">crossed out</span> just for fun!</p>
Deze benadering is puur voor styling en heeft niet dezelfde betekenis als de <s> tag.
De <mark> tag: Gemarkeerde tekst
De <mark> tag wordt gebruikt om tekst te markeren. Het helpt om de aandacht te vestigen op bepaalde delen van je inhoud, waardoor ze opvallen. Standaard markeren browsers tekst met een gele achtergrond wanneer de <mark> tag wordt gebruikt.
Doel van de <mark> Tag
De <mark> tag is geweldig wanneer je iets belangrijks wilt benadrukken. Het wordt vaak gebruikt om zoekresultaten, recente veranderingen of tekst die speciale aandacht nodig heeft, te tonen.
Hier is een voorbeeld van hoe het werkt:
<p>This is a <mark>highlighted</mark> word.</p>
Dit zal worden weergegeven als:
Dit is een gemarkeerd woord.
Beste praktijken voor het gebruik van <mark> voor nadruk of zoekresultaten
Belangrijke termen markeren: Als je belangrijke woorden of zinnen in een artikel of blogpost wilt benadrukken, is de <mark> tag een eenvoudige manier om dat te doen:
<p>The most important concept here is <mark>efficiency</mark>.</p>
Het belangrijkste concept hier is efficiëntie.
Zoekresultaten: Wanneer je zoekresultaten op een webpagina toont, maakt het gebruik van de <mark> tag om de overeenkomende termen te markeren het gemakkelijker voor gebruikers om te vinden wat ze zoeken:
<p>Your search for <mark>HTML</mark> found these results:</p>
Je zoekopdracht naar HTML leverde deze resultaten op:
Recente updates: Je kunt ook de <mark> tag gebruiken om nieuwe updates of wijzigingen in je inhoud te tonen:
<p>We have recently added the <mark>new feature</mark> to the app.</p>
We hebben onlangs de nieuwe functie aan de app toegevoegd.
Hoe je gemarkeerde tekst effectief kunt stylen
Hoewel de standaardkleur voor <mark> geel is, kun je deze met CSS aanpassen om bij het ontwerp van je website te passen. Hier is een voorbeeld van hoe je de gemarkeerde tekst kunt aanpassen:
mark {
background-color: lightblue;
color: black;
padding: 2px;
}
Dit geeft de tekst een lichtblauwe achtergrond met zwarte tekst.
Als je wilt dat de tekst nog meer opvalt, kun je een rand toevoegen of de lettertype-stijl wijzigen:
mark {
background-color: yellow;
color: black;
font-weight: bold;
border-radius: 4px;
}
Dit zou de gemarkeerde tekst er gepolijster en opvallender uit laten zien.
Ondersteuning door browsers en overwegingen voor toegankelijkheid
De <mark>-tag wordt ondersteund door alle moderne browsers, dus je zult geen compatibiliteitsproblemen ondervinden. Zorg er gewoon voor dat de achtergrondkleur die je kiest voldoende contrast biedt voor leesbaarheid, vooral voor gebruikers met visuele beperkingen.
Het gebruik van een lichte achtergrond met donkere tekst is een goede vuistregel. Het testen van het kleurcontrast zorgt ervoor dat de gemarkeerde inhoud toegankelijk blijft voor iedereen, inclusief gebruikers van schermlezers.
De <ruby>-tag: Annotaties toevoegen aan Oost-Aziatische taaltekst
De <ruby>-tag wordt gebruikt om kleine annotaties aan tekst toe te voegen, vaak gezien in Oost-Aziatische talen zoals Japans of Chinees. Deze annotaties helpen lezers met uitspraak of betekenis, vooral wanneer de karakters complex of onbekend zijn.
Definitie en gebruikssituaties voor <ruby>
In talen zoals Japans is het gebruikelijk om een kleine gids boven of naast karakters te gebruiken om aan te geven hoe ze moeten worden uitgesproken. De <ruby>-tag koppelt de hoofdtekst aan een kleine annotatie, meestal in een eenvoudiger script.
Hier is een basisvoorbeeld:
<ruby>漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>
Dit toont de Japanse kanji-tekens 漢字 met hun uitspraak (furigana) weergegeven boven of naast hen als かんじ (kanji).
漢 字
Het Belang van de <rp> en <rt> Sub-elementen
Het <rt> element wordt gebruikt binnen de <ruby> tag om de annotatie (zoals uitspraak) voor de hoofdtekst te definiëren. Het staat voor “ruby tekst.”
<ruby>漢 <rt>かん</rt></ruby>
Dit zal 漢 met かん (kan) erboven weergeven als de annotatie.
漢
Het <rp> element, wat staat voor “ruby haakjes,” wordt gebruikt als fallback voor browsers die de <ruby> tag niet ondersteunen. Het wikkelt extra tekens, zoals haakjes, om de ruby tekst om aan te geven dat het een annotatie is:
<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp></ruby>
Als de browser geen ruby-annotaties ondersteunt, zal het de uitspraak binnen haakjes weergeven, zoals dit:
漢 (かん).
Praktische Voorbeelden: Ruby Annotaties voor Taalverwerving
De <ruby> tag is een nuttig hulpmiddel voor taalleerders. Het kan de uitspraak voor onbekende woorden of tekens direct boven of naast hen weergeven. Dit maakt het gemakkelijker voor beginners om te lezen en nieuwe woordenschat te leren.
Bijvoorbeeld, stel dat je iemand wilt helpen de Chinese term voor “persoon” te leren:
<ruby>人 <rt>rén</rt></ruby>
Dit zou 人 tonen met de uitspraak rén erboven.
人
Voor langere zinnen:
<p><ruby>我 <rt>wǒ</rt></ruby> <ruby>是 <rt>shì</rt></ruby> <ruby>学生 <rt>xuéshēng</rt></ruby>.</p>
Dit helpt studenten zowel de tekens als de correcte uitspraak te zien.
Ik een .
Cross-Browser Compatibiliteit en Weergaveoverwegingen
De <ruby> tag wordt ondersteund in de meeste moderne browsers, maar oudere browsers kunnen deze mogelijk niet correct weergeven. Hier komt het <rp> element van pas, zodat de annotaties nog steeds leesbaar zijn als de browser geen ondersteuning biedt voor ruby tekst.
Zorg voor voldoende ruimte rond de annotaties voor toegankelijkheid, zodat ze gemakkelijk te lezen zijn. Je kunt ook CSS gebruiken om de weergave van de annotaties aan te passen:
ruby rt {
font-size: 0.75em;
color: gray;
}
Dit zal de ruby tekst kleiner maken en in een andere kleur weergeven om deze visueel te scheiden van de hoofdinhoud.
Het gebruik van <ruby> is een uitstekende manier om de leesbaarheid te verbeteren voor taalstudenten of lezers die niet bekend zijn met bepaalde schriften. Vergeet niet de browserondersteuning te controleren en fallbacks toe te voegen voor een betere gebruikerservaring op verschillende apparaten.
De <time> Tag: Semantische Tijd en Datum
De <time> tag wordt gebruikt om data of tijden in een machine-leesbaar formaat aan te geven. Het helpt zoekmachines, browsers en andere tools om tijdgerelateerde informatie duidelijker te herkennen, wat handig is voor het verbeteren van de zichtbaarheid in zoekresultaten of voor betere gegevensanalyse.
Het Gebruik van de <time> Tag voor Machine-Leesbare Data en Tijden
Door de <time> tag te gebruiken, kun je data of tijden verstrekken die zowel voor mensen als computers gemakkelijk te lezen zijn. Dit is vooral handig op blogs, nieuwsartikelen of evenementenpagina’s.
Hier is een voorbeeld:
<p>Published on <time datetime="2024-10-01">October 1, 2024</time></p>
De tekst “1 oktober 2024” is wat gebruikers zullen zien, maar het datetime-attribuut biedt een machinaal leesbare versie van de datum. Zo kunnen zoekmachines deze datum nu gemakkelijk interpreteren.
Gepubliceerd op
Je kunt ook de <tijd>-tag gebruiken om tijden weer te geven:
<p>The event starts at <time datetime="13:00">1:00 PM</time>.</p>
Dit maakt duidelijk voor zowel gebruikers als machines wanneer het evenement plaatsvindt.
Het evenement begint om .
Hoe <tijd> SEO en gegevensontleding verbetert voor evenementdetails
Zoekmachines vertrouwen op gestructureerde gegevens om inhoud beter te begrijpen. De <tijd>-tag geeft hen een duidelijker idee van wanneer evenementen, publicaties of deadlines plaatsvinden, waardoor de relevantie van zoekresultaten verbetert. Zo kunnen zoekmachines bijvoorbeeld beter de publicatiedatum van een blogbericht weergeven of de tijd van een evenement.
Voor een evenementpagina biedt het volgende voorbeeld zowel mensvriendelijke als machinevriendelijke tijdinformatie:
<p>Join us for the workshop on <time datetime="2024-12-15">December 15, 2024</time> at <time datetime="15:30">3:30 PM</time>.</p>
Zo kunnen zoekmachines en webcrawlers deze gegevens extraheren en gebruiken om rijke fragmenten in zoekresultaten te maken, waardoor het evenement opvalt.
Voorbeelden van gebruik in artikelen, blogs en evenementpagina’s
Hier zijn enkele praktische voorbeelden van hoe je de <tijd>-tag kunt gebruiken:
-
Blogberichten: Je kunt weergeven wanneer een artikel is gepubliceerd of voor het laatst is bijgewerkt:
<p>Voor het laatst bijgewerkt op <time datetime="2024-09-28">28 september 2024</time>.</p> -
Evenementenlijsten: Evenementwebsites kunnen de
<time>tag gebruiken om aan te geven wanneer een evenement zal plaatsvinden:<p>Onze volgende meetup is op <time datetime="2024-11-10">10 november 2024</time> om <time datetime="18:00">18:00</time>.</p> -
Deadlines: Wanneer u belangrijke deadlines presenteert, gebruik dan de
<time>tag voor duidelijkheid:<p>Dien uw aanvraag in vóór <time datetime="2024-10-30T23:59">30 oktober 2024, 23:59</time>.</p>
In al deze voorbeelden zorgt de datetime attribuut ervoor dat computers de tijdinformatie correct kunnen lezen, terwijl gebruikers een beter leesbare versie zien.
Browserondersteuning en Toegankelijkheid
De <time> tag wordt breed ondersteund in moderne browsers. Het verbetert ook de toegankelijkheid omdat schermlezers de datum en tijd nauwkeuriger kunnen interpreteren, wat een betere ervaring biedt voor gebruikers met een handicap.
De <bdi> tag: Bi-Directionele Tekstisolatie
De <bdi> tag staat voor “bi-directionele isolatie” en wordt gebruikt om tekstuitlijningsproblemen op meertalige websites te voorkomen. Deze tag is vooral nuttig bij het werken met inhoud die zowel van links naar rechts (LTR) als van rechts naar links (RTL) talen bevat.
Rol van de <bdi> tag op meertalige websites
Wanneer verschillende talen met verschillende tekstuitlijningen worden gemengd, zoals Engels (LTR) en Arabisch (RTL), kan de natuurlijke stroom van tekst soms rommelig worden. De <bdi> tag helpt bij het schoon houden van de opmaak van de tekst, zodat elk deel van de tekst correct wordt weergegeven, ongeacht de richting van de taal.
Bijvoorbeeld, als u gebruikersinvoer (zoals een gebruikersnaam) naast andere tekst wilt weergeven en u niet weet in welke taal de gebruikersnaam zal zijn, kunt u <bdi> gebruiken om ervoor te zorgen dat dit de tekststroom niet verstoort.
Hoe <bdi> te gebruiken om tekstuitlijningsproblemen te voorkomen
De <bdi> tag omsluit het deel van de tekst dat u wilt isoleren en voorkomt dat de tekstuitlijning wordt beïnvloed door omliggende inhoud.
Hier is een eenvoudig voorbeeld:
<p>User <bdi>اسم</bdi> has logged in.</p>
Als de gebruikersnaam in het Arabisch is (dat van rechts naar links leest), zorgt de <bdi> tag ervoor dat de rest van de zin (die in het Engels is en van links naar rechts leest) niet wordt verstoord. Zonder de <bdi> tag kan de zin verkeerd worden weergegeven door de mix van tekstuitlijningen.
Nog een voorbeeld met nummers:
<p>Invoice number: <bdi>#1234</bdi></p>
Als het factuurnummer tekst of cijfers bevat in verschillende richtingen, zorgt de <bdi>-tag ervoor dat de opmaak correct blijft.
Voorbeelden van <bdi>
De <bdi>-tag wordt veel gebruikt in meertalige toepassingen, door gebruikers gegenereerde inhoudplatforms en websites die tegelijkertijd meerdere talen verwerken. Bijvoorbeeld, websites die gebruikers toestaan gegevens in te voeren, zoals namen of adressen, kunnen <bdi> gebruiken om ervoor te zorgen dat de tekst correct uitgelijnd is.
Hier is een voorbeeld op een forum:
<p><bdi>مستخدم</bdi> liked your post!</p>
Zonder <bdi> kan de tekst onhandig worden weergegeven, maar met <bdi> worden zowel de Arabische gebruikersnaam als de Engelse tekst correct weergegeven.
Browsercompatibiliteit
De <bdi>-tag wordt ondersteund in alle moderne browsers, waaronder Chrome, Firefox, Safari en Edge. Het is een lichte oplossing, vereist geen speciale opmaak en helpt uw inhoudsindeling netjes te houden bij het omgaan met meertalige tekst.
De <dfn>-tag: Definiëren van termen
De <dfn>-tag wordt gebruikt om de eerste keer dat een term wordt gedefinieerd op een webpagina te markeren. Het helpt lezers snel te herkennen dat een bepaald woord of zinsdeel een definitie is, wat de duidelijkheid van uw inhoud verbetert, vooral bij technisch schrijven.
Hoe <dfn> te gebruiken voor het markeren van definities
De <dfn>-tag is eenvoudig te gebruiken. U plaatst het rond het woord of zinsdeel dat u wilt definiëren. Meestal verschijnt de term in de buurt van de uitleg van de betekenis ervan.
Voorbeeld:
<p>The <dfn>DOM</dfn> (Document Object Model) is a programming interface for web documents.</p>
Hier markeert de <dfn>-tag dat “DOM” de gedefinieerde term is.
De DOM (Document Object Model) is een programmeerinterface voor webdocumenten.
Best Practices voor het bieden van uitleg in artikelen
Bij het gebruik van de <dfn>-tag, zorg ervoor dat de term die je definieert vlak wordt gevolgd door de uitleg. Dit houdt dingen duidelijk en helpt lezers direct de term te verbinden met de betekenis ervan.
Het is ook een goed idee om de <dfn>-tag alleen de eerste keer te gebruiken dat een term wordt geïntroduceerd, omdat het herhaaldelijk gebruik ervan de lezer in de war kan brengen.
Bijvoorbeeld, in een technisch artikel over HTML:
<p>The <dfn>API</dfn> (Application Programming Interface) allows different software applications to communicate with each other. Once defined, an API can simplify many web development tasks.</p>
In dit geval wordt “API” gedefinieerd wanneer het voor het eerst wordt genoemd, en latere vermeldingen van “API” hebben de <dfn>-tag niet meer nodig.
Hoe <dfn> de duidelijkheid van technische inhoud verbetert
Het gebruik van de <dfn>-tag in technisch schrijven is een geweldige manier om de inhoud gemakkelijker te volgen. Het geeft duidelijk aan wanneer je een nieuwe term introduceert, wat vooral handig is bij het uitleggen van complexe ideeën. Dit helpt de leesbaarheid te verbeteren en stelt gebruikers in staat om belangrijke concepten sneller te begrijpen.
Door definities te markeren met <dfn>, kunnen zoekmachines en andere tools mogelijk ook beter begrijpen wat je inhoud is, waardoor het toegankelijker wordt. Bijvoorbeeld, technische glossaria of educatieve websites kunnen <dfn> gebruiken om hun termen te laten opvallen.
Voorbeeld van <dfn>
<p>The <dfn>URL</dfn> (Uniform Resource Locator) is the address used to access a resource on the web.</p>
In deze zin wordt de lezer geïntroduceerd aan de term “URL,” gevolgd door een duidelijke uitleg. Deze methode van het introduceren van termen met de <dfn> tag helpt technische inhoud veel gemakkelijker te lezen en te begrijpen, vooral voor degenen die niet bekend zijn met het onderwerp.
De <wbr> Tag: Kans op Regelafbreking
De <wbr> tag wordt gebruikt om aan te geven waar een woord of URL kan worden gesplitst om een regelafbreking te creëren indien nodig. Dit is handig bij lange woorden, URL’s of enige tekst die de lay-out van een webpagina kan verstoren.
Wat de <wbr> Tag Is en Waarom het Essentieel is voor Lange Woorden of URLs
Soms kunnen lange woorden of URLs de vormgeving van een webpagina verstoren door horizontaal scrollen te veroorzaken of de lay-out te verbreken. De <wbr> tag geeft de browser een hint waar het woord kan worden afgebroken, maar alleen indien nodig. Dit helpt de tekst leesbaar te houden en overloop te voorkomen.
Bijvoorbeeld, als je een lange URL hebt, kun je de <wbr> tag plaatsen om de browser te vertellen waar de tekst kan worden afgebroken:
<p>Visit our website at https://www.example<wbr>.com/super/long-url-that-might-break-layout</p>
Als de browser de URL moet afronden, zal hij dat doen na de <wbr>, waardoor het ontwerp intact blijft.
Beste Praktijken voor het Controleren van Woordomslag en Tekstoverloop
De <wbr> tag moet worden gebruikt op plaatsen waar tekst overloop problemen kan veroorzaken, zoals lange technische termen, e-mailadressen of URLs. Maar gebruik het niet te veel, omdat onnodige onderbrekingen de tekst moeilijker leesbaar kunnen maken.
Hier is nog een voorbeeld met een lang woord:
<p>This word is too long: anti<wbr>disestablishmentarianism.</p>
Als het woord te lang is voor de regel, zal de browser het splitsen na “anti-” zonder de leesbaarheid te beïnvloeden.
In combinatie met CSS kun je ook de woordomloop en tekstoverloop regelen voor betere resultaten:
p {
word-wrap: break-word;
overflow-wrap: break-word;
}
Deze CSS zorgt ervoor dat de tekst netjes omloopt wanneer nodig, en het gebruik van <wbr> kan meer controle geven over waar die onderbrekingen plaatsvinden.
Ondersteuning door browsers voor <wr> en potentiële uitdagingen
De <wbr> tag wordt ondersteund in alle grote browsers, waaronder Chrome, Firefox, Safari en Edge. Het is lichtgewicht en heeft geen speciale opmaak nodig om te werken.
Maar één ding om op te letten is dat overmatig gebruik van de tag ervoor kan zorgen dat tekstonderbrekingen onnatuurlijk lijken als de inhoud wordt verkleind of op verschillende schermformaten wordt bekeken.
Bijvoorbeeld:
<p>Contact us at longemail<wbr>@example<wbr>.com for more information.</p>
In dit geval kun je voorkomen dat lange e-mailadressen lay-outproblemen veroorzaken, maar de e-mail kan op verschillende plaatsen gebroken lijken, afhankelijk van de schermbreedte.
Gebruik <wbr> wanneer je lange tekstreeksen verwacht die mogelijk niet natuurlijk breken, zodat je ontwerp schoon en functioneel blijft op verschillende apparaten.
De <ins> Tag: Ingevoegde Tekst
De <ins> tag wordt gebruikt om tekst weer te geven die aan een document is toegevoegd. Dit is vaak nuttig bij het volgen van bewerkingen, updates of wijzigingen in documenten. Het komt ook met een standaard onderstreping om de nieuwe inhoud te benadrukken.
Wat is de <ins> tag en hoe verhoudt deze zich tot de <s> tag?
De <ins> tag is ontworpen voor het markeren van toegevoegde inhoud, terwijl de <s> tag wordt gebruikt voor tekst die is verwijderd of niet langer relevant is. Beide tags zijn nuttig wanneer je wijzigingen in een document moet tonen, zoals updates of revisies.
Voorbeeld:
<p>This is the <ins>new text</ins> that was added.</p>
<p>This is the <s>old text</s> that is no longer valid.</p>
Hier benadrukt de <ins> tag wat is toegevoegd, en de <s> tag toont wat is doorgestreept als verouderd.
Dit is de nieuwe tekst die is toegevoegd.
Dit is de oude tekst die niet langer geldig is.
Gebruik bij het Volgen van Documentwijzigingen of Versiebeheer
De <ins> tag wordt vaak gebruikt bij het beheren van documenten die versiebeheer nodig hebben of waarbij bewerkingen zichtbaar moeten zijn. Bijvoorbeeld, je kunt het gebruiken in samenwerkingsschrijftools of juridische documenten om aan te geven welke delen zijn toegevoegd.
Voorbeeld van een document met wijzigingen:
<p>The contract was updated to include <ins>an extra clause</ins> on data privacy.</p>
Dit maakt het duidelijk voor de lezer dat het gedeelte over “gegevensprivacy” onlangs is toegevoegd.
In softwareontwikkeling of contentbeheer kun je de <ins> tag gebruiken om tekst aan te geven die nieuw is geïntroduceerd in versie-beheerde bestanden, waardoor het gemakkelijker wordt om wijzigingen en revisies in de loop van de tijd te volgen.
Stylingopties om Wijzigingen te Benadrukken
De standaardweergave van de <ins> tag is onderstreept, maar je kunt het aanpassen met CSS voor een betere nadruk, vooral als je wilt dat de wijzigingen meer opvallen.
Hier is hoe je de <ins> tag kunt stylen met verschillende visuele effecten:
ins {
background-color: #d4edda;
color: green;
text-decoration: none; /* Verwijdert standaard onderstreping */
}
Dit zal de ingevoegde tekst een groene kleur en een lichtgroene achtergrond geven, waardoor het meer opvalt.
Je kunt ook verschillende stijlen toevoegen zoals een vetgedrukt lettertype of een rand:
ins {
font-weight: bold;
border-bottom: 2px solid green;
}
Deze opmaakopties maken het voor gebruikers gemakkelijker om te identificeren wat er is toegevoegd of gewijzigd, waardoor de leesbaarheid en transparantie van documentbewerkingen worden verbeterd.
Over het algemeen is de <ins> tag een eenvoudige maar effectieve manier om ingevoegde inhoud bij te houden, waardoor het zeer nuttig is voor zowel technische documenten als samenwerkingsplatforms waar revisies duidelijk zichtbaar moeten zijn.
De <del> Tag: Verwijderde Tekst
De <del> tag wordt gebruikt om tekst te tonen die is verwijderd of uit een document is verwijderd. Deze tag doorstreept de tekst standaard, waardoor het gemakkelijk te identificeren is wat is verwijderd. Het is vooral nuttig in situaties waar het bijhouden van wijzigingen of revisies noodzakelijk is.
Doel en Gebruik van de <del> Tag voor Doorstreepte Tekst
De belangrijkste taak van de <del> tag is om visueel weer te geven dat bepaalde inhoud is verwijderd. Het is gebruikelijk in documenten, artikelen of code waar wijzigingen zichtbaar moeten worden gemaakt voor de lezer. De verwijderde tekst zal meestal een doorstreepte tekst hebben, wat aangeeft dat deze niet langer relevant of geldig is.
Voorbeeld:
<p>This product costs <del>$50</del> $40 now.</p>
In dit voorbeeld is de prijswijziging duidelijk. De oude prijs ($50) is doorgestreept en de nieuwe prijs ($40) volgt er direct op.
Hoe Het Kan Worden Gecombineerd Met <ins> voor Het Bijhouden van Revisies
De <del> tag kan worden gecombineerd met de <ins> tag om zowel verwijderde als nieuw toegevoegde inhoud weer te geven, waardoor het perfect is voor het bijhouden van bewerkingen of revisies. Dit is zeer nuttig bij samenwerkend schrijven, juridische documenten of in elke situatie waarin wijzigingen duidelijk moeten worden vastgelegd.
Voorbeeld van het bijhouden van revisies:
<p>The meeting has been moved <del>Monday</del> <ins>Tuesday</ins>.</p>
Hier is het makkelijk te zien dat “Maandag” is vervangen door “Dinsdag,” en de lezer weet precies wat er is veranderd.
Beste praktijken voor het weergeven en stylen van verwijderde inhoud
Standaard past de <del> tag een doorstreepte opmaak toe op de tekst, maar je kunt het verder stylen met CSS om het opvallender te maken of aan te passen aan je ontwerpbehoeften.
Hier is een voorbeeld van het aanpassen van de opmaak van verwijderde tekst:
del {
color: red;
text-decoration: line-through;
}
Dit maakt verwijderde tekst rood, waardoor er meer aandacht naar uitgaat. Je kunt het ook combineren met aanvullende opmaak, zoals het vervagen van de tekst:
del {
color: gray;
opacity: 0.7;
}
Deze stijl vermindert de nadruk op verwijderde inhoud, waardoor het minder afleidend is maar nog steeds zichtbaar voor lezers.
De <del> tag biedt een eenvoudige en effectieve manier om wijzigingen bij te houden en weer te geven, vooral wanneer deze wordt gecombineerd met de <ins> tag. Het is essentieel om documenten transparant en duidelijk te houden voor iedereen die bewerkingen of updates controleert.
Conclusie
Het gebruik van deze unieke HTML-elementen vergroot wat er mogelijk is op het web, wat helpt om meer betekenisvolle en toegankelijke inhoud te creëren. Tags zoals <q>, <s>, <mark>, <ruby>, <time>, <bdi>, <dfn>, <wbr>, <ins>, en <del> bieden elk hun eigen voordelen voor specifieke taken. Deze elementen doen meer dan alleen tekst stijlen; ze voegen context toe, verbeteren gebruikerservaringen en verbeteren de documentstructuur.
Het correct toepassen van deze tags maakt je webpagina’s niet alleen duidelijker, maar verhoogt ook de compatibiliteit tussen apparaten en zoekmachines. Terwijl je deze elementen toepast, denk na over hoe elk element zowel de visuele presentatie als de informatie structuur dient. Ze bieden eenvoudige maar krachtige manieren om websites rijker en gemakkelijker te begrijpen te maken, ten voordele van een breed scala aan gebruikers.
Als je vragen of suggesties hebt, neem gerust contact met me op via LinkedIn. Als je deze inhoud leuk vond, overweeg dan om me een koffie te kopen ter ondersteuning van de creatie van meer ontwikkelaarsvriendelijke inhoud.
Source:
https://www.freecodecamp.org/news/less-common-html-elements-and-how-to-use-them/