HTML est un langage simple, mais son vocabulaire est plus vaste que vous ne le pensez. Apprenez tout sur certaines des balises les plus inhabituelles que vous pouvez utiliser.

Points clés à retenir

  • Utilisez et balises pour créer des sections extensibles, offrant une expérience conviviale et conservant un design épuré.
  • Mettez en surbrillance le contenu important avec la balise, en attirant l'attention sur des mots-clés, des phrases ou des résultats de recherche sur votre page Web.
  • Ajoutez une signification sémantique aux dates et heures à l'aide de la balise, améliorant ainsi l'accessibilité pour les utilisateurs handicapés qui utilisent des lecteurs d'écran.

En tant que développeur Web, vous devez bien connaître les balises HTML courantes telles que, , et qui représentent la structure et le contenu de vos pages Web. Cependant, le langage HTML offre bien plus !

En explorant ces balises uniques, vous pouvez améliorer la fonctionnalité de vos applications Web, en les faisant se démarquer de la foule.

1.
et

Imaginez que vous disposiez d'informations ou d'un contenu étendus avec lesquels vous ne voulez pas submerger un lecteur immédiatement. Le et les balises viennent à la rescousse !

Ces balises fonctionnent ensemble pour créer une section extensible avec un titre ou un résumé que les utilisateurs de votre site Web peuvent cliquer pour afficher. Par défaut, le contenu de l'élément de détails ne s'affichera pas, ce qui gardera votre page propre et organisée.

Vos visiteurs peuvent facilement cliquer sur le résumé pour accéder aux informations cachées.

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

Avec ces balises, vous pouvez masquer de grandes sections de texte, de code ou d'autres informations, offrant une expérience conviviale tout en conservant une conception épurée. Ils peuvent même vous aider à affiner votre compétences en tant que concepteur d'interface.

2.

Le La balise vous permet de mettre en évidence des parties spécifiques de votre contenu, en les faisant ressortir visuellement. Lorsque vous utilisez le élément, les navigateurs appliquent généralement une couleur d'arrière-plan jaune au texte à l'intérieur, attirant l'attention du lecteur sur celui-ci.

Cette fonctionnalité est particulièrement utile lorsque vous souhaitez mettre en valeur des mots-clés, des phrases importantes ou des résultats de recherche sur votre page Web.

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

Par exemple, si votre site Web dispose d'une fonctionnalité de recherche, vous pouvez utiliser le tag pour mettre en évidence les correspondances de la requête de recherche dans les résultats, ce qui permet aux utilisateurs de trouver plus facilement les informations pertinentes.

3.

Avez-vous déjà rencontré des situations où le contenu devient obsolète ou n'est plus pertinent, mais vous souhaitez toujours l'afficher à des fins historiques ou pour indiquer les changements au fil du temps ?

Entrer le étiqueter! Ça signifie barré et affiche tout contenu de l'élément avec une ligne au milieu.

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

Dans cet exemple, le en rupture de stock le texte s'affichera barré, indiquant que l'état du stock du produit a changé.

4.

Lorsque vous souhaitez ajouter une signification sémantique aux dates et heures de votre contenu, la l'étiquette est pratique.

En utilisant le date-heure, vous pouvez spécifier une version lisible par machine de la date ou de l'heure, ce qui aide les navigateurs, les moteurs de recherche et les lecteurs d'écran à comprendre le contexte.

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

En utilisant le tag, vous donnez plus de structure à votre contenu et le rendez accessible à un plus large éventail d'utilisateurs, y compris les personnes handicapées qui utilisent des lecteurs d'écran.

5.

La gestion du texte en plusieurs langues sur votre page Web peut parfois être difficile, en particulier lorsque chaque partie nécessite une mise en forme différente.

Le tag vient à la rescousse en isolant une partie du texte que le navigateur doit traiter différemment en raison des différentes exigences linguistiques.

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

Dans cet exemple, le l'élément enveloppe le nombre 5,000. Cela garantit que, si le texte environnant est dans une langue différente ou nécessite un formatage différent, il n'interférera pas avec le nombre.

6. , ,

Pour la typographie d'Asie de l'Est, où les guides de prononciation, le furigana ou d'autres annotations sont couramment utilisés au-dessus ou au-dessous des caractères, le, , et les balises entrent en jeu.

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

Dans cet exemple, le l'élément contient le caractère 漢 (kanji), et le l'élément contient la prononciation かん (kan). Le Les éléments fournissent des parenthèses de secours pour les navigateurs qui ne prennent pas en charge les annotations ruby.

7.

Lorsque vous avez de longs mots qui peuvent casser votre mise en page, le tag est là pour vous aider. Il suggère une opportunité pour un saut de ligne (opportunité de saut de mot) dans un mot long, où le navigateur peut choisir d'envelopper le texte.

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

Dans l'exemple ci-dessus, l'URL longue inclut un élément qui permet au navigateur de le diviser en deux lignes si nécessaire, en préservant la mise en page du contenu environnant.

8. et

Pour les notations scientifiques ou mathématiques, les formules chimiques ou les notes de bas de page, vous pouvez utiliser le et balises pour le texte en indice et en exposant, respectivement.

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

Cet exemple utilise le balise pour afficher le 2 dans H2O en indice, tandis que le les balises affichent les exposants du théorème de Pythagore.

9.

Vous avez besoin de représenter des mesures scalaires dans une plage connue, telles que l'utilisation du disque, les notes ou les résultats d'examen? Le tag vous a couvert.

En utilisant le valeur, min, et maximum attributs, vous pouvez définir respectivement la valeur actuelle, la valeur minimale et la valeur maximale de la mesure.

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

Dans cet exemple, le l'élément représente une note d'examen de 75%.

10.

Lorsque vous avez besoin de créer une boîte de dialogue ou une superposition de fenêtre pour les modaux ou interactions modales pop-up bien comportées, le tag est la voie à suivre. Vous pouvez utiliser le ouvrir attribut pour afficher la boîte de dialogue par défaut.

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

Dans cet exemple, une boîte de dialogue simple contenant un paragraphe et un bouton de fermeture indique quand la page se charge, grâce à la ouvrir attribut. Vous pouvez personnaliser le contenu et le comportement de la boîte de dialogue à l'aide de JavaScript pour des interactions plus avancées.

11.

Utilisez le balise pour regrouper les options associées dans un élément déroulant. Il vous permet d'organiser et de catégoriser les options pour faciliter la navigation et la sélection.

  • Letag est un élément conteneur qui regroupe les balises dans un élément.
  • Il aide à organiser les options en créant un regroupement visuel ou une catégorisation dans le menu déroulant.
  • Le La balise nécessite un attribut label, qui spécifie le nom ou le titre du groupe d'options.
  • Il peut contenir un ou plusieurs balises comme ses éléments enfants, représentant les options individuelles au sein du groupe.

Par exemple:

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

Cet exemple regroupe la liste déroulante de sélection en deux sections: Asie, et L'Europe . Chaque groupe contient des balises représentant différents pays au sein de cette région.

Améliorez vos compétences en développement Web

L'apprentissage de ces balises HTML moins connues peut grandement améliorer vos compétences en développement Web. Malgré leur manque de reconnaissance, ils offrent des fonctionnalités intéressantes pour des contextes spécifiques.

L'ajout de ces balises à votre ensemble de compétences améliore l'interactivité, l'accessibilité et rationalise le processus de développement Web. N'oubliez pas que même s'ils ne vous sont pas familiers, ils ont un impact significatif sur votre parcours en tant que développeur Web.