HTML is een eenvoudige taal, maar de woordenschat is groter dan u misschien denkt. Leer alles over enkele van de meer ongebruikelijke tags die u kunt gebruiken.

Belangrijkste leerpunten

  • Gebruik en tags om uitbreidbare secties te maken, een gebruiksvriendelijke ervaring te bieden en een strak ontwerp te behouden.
  • Markeer belangrijke inhoud met de tag en vestig de aandacht op trefwoorden, woordgroepen of zoekresultaten op uw webpagina.
  • Voeg semantische betekenis toe aan datums en tijden met behulp van de tag, waardoor de toegankelijkheid wordt verbeterd voor gebruikers met een handicap die schermlezers gebruiken.

Als webontwikkelaar moet u goed thuis zijn in algemene HTML-tags zoals, , En die de structuur en inhoud van uw webpagina's vertegenwoordigen. De HTML-taal biedt echter veel meer!

Door deze unieke tags te verkennen, kunt u de functionaliteit van uw web-apps verbeteren, waardoor ze zich onderscheiden van de massa.

1.
En

Stel je voor dat je uitgebreide informatie of content hebt waar je een lezer niet meteen mee wilt overstelpen. De En tags komen te hulp!

Deze tags werken samen om een ​​uitvouwbaar gedeelte te maken met een titel of samenvatting waarop uw websitegebruikers kunnen klikken om deze te onthullen. Standaard wordt de inhoud binnen het detailelement niet weergegeven, waardoor uw pagina netjes en georganiseerd blijft.

Uw bezoekers kunnen eenvoudig op de samenvatting klikken om toegang te krijgen tot de verborgen informatie.

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

Met deze tags kunt u grote delen van tekst, code of andere informatie verbergen, waardoor u een gebruiksvriendelijke ervaring krijgt met behoud van een strak ontwerp. Ze kunnen u zelfs helpen bij het verfijnen van uw vaardigheden als interface-ontwerper.

2.

De Met tag kunt u specifieke delen van uw inhoud markeren, waardoor ze visueel opvallen. Wanneer u de element, passen browsers doorgaans een gele achtergrondkleur toe op de tekst erin, waardoor de aandacht van de lezer erop wordt gevestigd.

Deze functie is met name handig wanneer u trefwoorden, belangrijke woordgroepen of zoekresultaten op uw webpagina wilt benadrukken.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

Als uw website bijvoorbeeld een zoekfunctie heeft, kunt u de tag om de zoekopdrachten in de resultaten te markeren, waardoor het voor gebruikers gemakkelijker wordt om relevante informatie te vinden.

3.

Bent u ooit situaties tegengekomen waarin inhoud verouderd of niet meer relevant is, maar u deze toch wilt weergeven voor historische doeleinden of om wijzigingen in de tijd aan te geven?

Voer de label! Het staat voor doorhalen en geeft alle inhoud binnen het element weer met een lijn door het midden.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

In dit voorbeeld is de Niet op voorraad tekst wordt weergegeven met een streep erdoor, wat aangeeft dat de voorraadstatus van het product is gewijzigd.

4.

Wanneer u semantische betekenis wilt toevoegen aan datums en tijden in uw inhoud, de label komt goed van pas.

De... gebruiken datum Tijd attribuut, kunt u een machineleesbare versie van de datum of tijd specificeren, waardoor browsers, zoekmachines en schermlezers de context beter begrijpen.

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

Door gebruik te maken van de tag, geeft u uw inhoud meer structuur en maakt u deze toegankelijk voor een breder scala aan gebruikers, inclusief mensen met een handicap die schermlezers gebruiken.

5.

Het beheren van tekst in meerdere talen op uw webpagina kan soms een uitdaging zijn, vooral wanneer elk onderdeel een andere opmaak vereist.

De tag komt te hulp door een deel van de tekst te isoleren dat de browser anders zou moeten behandelen vanwege verschillende taalvereisten.

<p>
<bdi>5,000bdi> people attended the conference.
p>

In dit voorbeeld is de element omsluit het nummer 5,000. Dit zorgt ervoor dat als de omringende tekst in een andere taal is of een andere opmaak vereist, dit het nummer niet verstoort.

6. , ,

Voor Oost-Aziatische typografie, waar uitspraakgidsen, furigana of andere annotaties gewoonlijk boven of onder karakters worden gebruikt,, , En tags spelen een rol.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

In dit voorbeeld is de element bevat het personage 漢 (Kanji), en de element bevat de uitspraak かん (kan). De elementen bieden terugvalhaakjes voor browsers die geen robijnannotaties ondersteunen.

7.

Als u lange woorden heeft die uw lay-out kunnen verstoren, kan de tag is hier om te helpen. Het suggereert een mogelijkheid voor een regeleinde (mogelijkheid om een ​​woord af te breken) in een lang woord, waarbij de browser ervoor kan kiezen om de tekst terug te laten lopen.

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

In het bovenstaande voorbeeld bevat de lange URL een element waarmee de browser het indien nodig in twee regels kan opsplitsen, waarbij de lay-out van de omringende inhoud behouden blijft.

8. En

Voor wetenschappelijke of wiskundige notaties, chemische formules of voetnoten kunt u de En tags voor respectievelijk subscript- en superscripttekst.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

Dit voorbeeld gebruikt de tag om de weer te geven 2 in H2O als subscript, terwijl de tags tonen de exponenten in de stelling van Pythagoras.

9.

Wilt u scalaire metingen weergeven binnen een bekend bereik, zoals schijfgebruik, beoordelingen of examenscores? De tag heeft je gedekt.

De... gebruiken waarde, min, En max attributen kunt u respectievelijk de huidige waarde, de minimumwaarde en de maximumwaarde van de meting definiëren.

<metervalue="75"min="0"max="100">75%meter>

In dit voorbeeld is de element vertegenwoordigt een examenscore van 75%.

10.

Wanneer het nodig is maak een dialoogvenster of een vensteroverlay voor modals of goed opgevoede modale pop-up interacties, de label is de juiste keuze. U kunt de open attribuut om het dialoogvenster standaard weer te geven.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

In dit voorbeeld geeft een eenvoudig dialoogvenster met een alinea en een sluitknop aan wanneer de pagina wordt geladen, dankzij de open attribuut. U kunt de inhoud en het gedrag van het dialoogvenster aanpassen met JavaScript voor meer geavanceerde interacties.

11.

Gebruik de tag om gerelateerde opties te groeperen binnen een dropdown-element. Hiermee kunt u opties ordenen en categoriseren voor eenvoudigere navigatie en selectie.

  • Detag is een containerelement dat aan groepen gerelateerd is tags binnen een element.
  • Het helpt bij het organiseren van opties door visuele groepering of categorisering te creëren in het vervolgkeuzemenu.
  • De tag vereist een labelattribuut, dat de naam of titel van de optiegroep specificeert.
  • Het kan er een of meer bevatten tags als onderliggende elementen, die de individuele opties binnen de groep vertegenwoordigen.

Bijvoorbeeld:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

Dit voorbeeld groepeert de vervolgkeuzelijst Selecteren in twee secties: Azië, En Europa. Elke groep bevat tags die verschillende landen in die regio vertegenwoordigen.

Verbeter uw vaardigheid in webontwikkeling

Het leren van deze minder bekende HTML-tags kan uw vaardigheden op het gebied van webontwikkeling aanzienlijk verbeteren. Ondanks hun gebrek aan herkenning bieden ze waardevolle functies voor specifieke contexten.

Door deze tags aan uw vaardigheden toe te voegen, verbetert u de interactiviteit en toegankelijkheid en stroomlijnt u het webontwikkelingsproces. Onthoud dat ze, ook al zijn ze misschien onbekend, een aanzienlijke impact hebben op uw reis als webontwikkelaar.