window.pipedriveLeadboosterConfig = { basis: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', versie: 2, } ;(functie () { var w = venster als (w.LeadBooster) { console.warn('LeadBooster bestaat al') } anders { w.LeadBooster = { q: [], on: functie (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: functie (n) { this.q.push({ t: 't', n: n }) }, } } })() 3 handige HTML-tags waarvan je misschien niet eens wist dat ze bestonden - The Codest
The Codest
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Industrie
    • Fintech & Bankieren
    • E-commerce
    • Adtech
    • Gezondheidstechnologie
    • Productie
    • Logistiek
    • Automotive
    • IOT
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
Pijl terug KEREN TERUG
2022-10-04
Software Ontwikkeling

3 handige HTML-tags waarvan je misschien niet eens wist dat ze bestonden

The Codest

Jacek Ludzik

Product Ontwerper

Tegenwoordig is toegankelijkheid (A11y) cruciaal in alle stadia van het bouwen van aangepaste softwareproducten. Beginnend bij het UX/UI-ontwerp, gaat het naar geavanceerde niveaus van het bouwen van functies in code. Het biedt enorm veel voordelen voor ontwikkelaars die werken aan het vergroten van DX, maar nog belangrijker voor eindgebruikers. Een van die geavanceerde onderdelen in HTML zijn semantische tags en dat is wat ik hier wil behandelen.

Front-end ontwikkelaars moeten goed bekend zijn met HTML-tags omdat dit hun natuurlijke omgeving is. Ik durf te wedden dat jullie allemaal een aantal basistags kennen, zoals

,
,
enzovoort. Maar wist je bijvoorbeeld dat je een woord-breekmoment kunt voorstellen met alleen maar HTMLzonder 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.

wbr compatibiliteitstabel

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 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.

meter compabiliteit meter

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 detag. 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.
ins compabiliteitstabel

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.

Verwante artikelen

Software Ontwikkeling

Meer informatie over Ruby on Rails met Pub/Sub

Pub/Sub kan veel voordelen opleveren voor het project - het kan de code opschonen, services ontkoppelen en ze eenvoudig schaalbaar maken. Lees meer over Pub/Sub in het volgende artikel...

The Codest
Michal Pawlak Senior Ruby Ontwikkelaar
Software Ontwikkeling

Javascript in actie

Ontdek een aantal JavaScript hulpmiddelen om je programmeerkunsten te verbeteren. Leer meer over ESLint, Prettier en Husky!

The Codest
Reda Salmi React Ontwikkelaar
Software Ontwikkeling

Interne vs. externe ontwikkelaars inhuren

Intern of extern aanwerven? Het is een ultiem dilemma! Ontdek de voordelen van outsourcing of het opbouwen van een in-house team in het volgende artikel.

The Codest
Grzegorz Rozmus Java Eenheid Leader
Software Ontwikkeling

9 fouten die je moet vermijden bij het programmeren in Java

Welke fouten moet je vermijden bij het programmeren in Java? In het volgende stuk beantwoorden we deze vraag.

The Codest
Rafal Sawicki Java Ontwikkelaar

Abonneer je op onze kennisbank en blijf op de hoogte van de expertise uit de IT-sector.

    Over ons

    The Codest - Internationaal softwareontwikkelingsbedrijf met technische hubs in Polen.

    Verenigd Koninkrijk - Hoofdkantoor

    • Kantoor 303B, 182-184 High Street North E6 2JA
      Londen, Engeland

    Polen - Lokale technologieknooppunten

    • Fabryczna kantorenpark, Aleja
      Pokoju 18, 31-564 Krakau
    • Hersenambassade, Konstruktorska
      11, 02-673 Warschau, Polen

      The Codest

    • Home
    • Over ons
    • Diensten
    • Case Studies
    • Weten hoe
    • Carrière
    • Woordenboek

      Diensten

    • Het advies
    • Software Ontwikkeling
    • Backend ontwikkeling
    • Frontend ontwikkeling
    • Staff Augmentation
    • Backend ontwikkelaars
    • Cloud Ingenieurs
    • Gegevensingenieurs
    • Andere
    • QA ingenieurs

      Bronnen

    • Feiten en fabels over samenwerken met een externe partner voor softwareontwikkeling
    • Van de VS naar Europa: Waarom Amerikaanse startups besluiten naar Europa te verhuizen
    • Tech Offshore Ontwikkelingshubs Vergelijking: Tech Offshore Europa (Polen), ASEAN (Filippijnen), Eurazië (Turkije)
    • Wat zijn de grootste uitdagingen voor CTO's en CIO's?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Gebruiksvoorwaarden website

    Copyright © 2025 door The Codest. Alle rechten voorbehouden.

    nl_NLDutch
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish etEstonian elGreek nl_NLDutch