enzovoort. Maar wist je bijvoorbeeld dat je een woord-breekmoment kunt voorstellen met alleen maar HTML zonder CSS?
WBR
Stel, je werkt aan een website of app voor een Duitse klant. Zoals je weet, kunnen Duitse woorden erg lang zijn. Dus je hebt het ontwerp met wat tekst die je moet reproduceren in code en deze inhoud moet op zeer specifieke momenten breken. Hier komt de
tag om je te helpen.
Geburtstagskuchen
Dat is het! Met zo'n eenvoudige tag kun je de tekstinhoud naar wens manipuleren.
Maar hoe zit het met de browserondersteuning? Nou, die is eerlijk gezegd vrij goed. De meeste browsers zullen deze tag begrijpen, maar Opera op Android en Safari op iOS kunnen problemen hebben.
METER
Stel je voor dat je een app voor schijfopslag aan het bouwen bent. Je moet op de een of andere manier in de UI laten zien hoeveel opslagruimte er nog beschikbaar is, en je wilt dit echt zo toegankelijk mogelijk maken. Dit is gewoon een perfecte use-case voor de <meter>
tag. Je krijgt alleen de waarde binnen een bepaald bereik. Een ander leuk aspect van deze tag zijn de attributen:
laag → als de huidige waarde lager is dan de ingestelde lage waarde, wordt de balk van de meter rood;
optimaal → als de huidige waarden hoger zijn dan de optimale attribuutwaarde, wordt de balk van de meter groen;
hoog → als de waarde voor hoog lager is dan het maximum en hoger dan de optimale waarde, is de balk van de meter oranje. Anders is hij groen.
Je kent misschien ook een soortgelijke tag, namelijk vooruitgang. Wat is nu eigenlijk het verschil tussen deze twee? De voortgangstag moet worden gebruikt voor lopende taken. Met andere woorden, gebruik de voortgangstag wanneer je met een specifieke taak bezig bent. De metertag moet worden gebruikt om schijf- of geheugengebruik weer te geven. Een ander verschil is dat de metertag niet wordt ondersteund door IE en dat dit eigenlijk het enige nadeel is van deze tag.
DEL en INS
Heb je je ooit afgevraagd hoe je een toegankelijke indicator kunt maken van verwijderde en toegevoegde delen van inhoud (diff in GitHub of e-mailmeldingen van Jira wanneer het ticket is bijgewerkt)? Je hoeft alleen maar de verwijderde inhoud in te pakken met de
tag. Bijvoorbeeld: <del><p>Net verwijderde inhoud</p></del>
. Om alleen het toegevoegde deel van de inhoud weer te geven, kun je de
tag op precies dezelfde manier. Deze tag heeft ook twee attributen:
cite → uri van een bron die uitlegt waarom dit onderdeel is toegevoegd;
datetime → datum en tijd van de wijziging.
Er zijn natuurlijk veel meer nuttige tags in HTML . Ik raad je ten zeerste aan om ze allemaal te gebruiken wanneer dat mogelijk en gepast is. Uw klanten en app-gebruikers zullen u dankbaar zijn voor deze aanpak. Wees echter voorzichtig, want sommige tags kunnen deprecated zijn. Je kunt er altijd voor zorgen dat een minder gebruikelijke tag die je wilt gebruiken nog steeds geldig is en goede ondersteuning heeft in MDN-documentatie .