Connaissez-vous ces huit balises HTML5?

Les développeurs Web utilisent de nombreuses balises HTML pendant la construction du site Web. Alors que beaucoup connaissent les balises HTML5 courantes comme <code><p></p> , <h1></h1>, et <div>, certaines balises moins connues offrent des avantages significatifs. Cet article explore huit de ces étiquettes, examinant leurs spécifications W3C et fournissant des exemples pratiques. <p> <strong> Comprendre l'utilisation de la balise html5 </strong> </p> Les spécifications <p> W3C fournissent des aperçus conceptuels, mais l'application pratique peut être difficile. La bonne pratique n'est pas toujours strictement définie; Cet article propose des exemples d'utilisation recommandés. </p> <p> <strong> Les plats clés </strong> </p> <ul> <li> Utiliser <code><mark></mark> pour mettre en évidence le texte pertinent pour l'activité des utilisateurs, améliorant la visibilité.

Utiliser <small></small> pour un texte moins important, minimisant l'impact visuel.

Utiliser <q></q> pour les citations en ligne courtes et <blockquote></blockquote> pour des extraits plus longs, en maintenant la précision sémantique.

Implémentez <ins></ins>, <del></del>, et <s></s> pour marquer les ajouts, les suppressions et les corrections, utiles dans l'édition.

Organisez <select></select> Options avec <optgroup></optgroup> pour catégoriser les choix, améliorer l'expérience utilisateur.

1. Souligion contextuelle avec <mark></mark>

La balise <mark></mark> désigne "pertinence" ou "examen". La pertinence dépend du contexte; Les éléments sont pertinents lorsqu'ils sont utiles pendant une activité spécifique. Par exemple, les résultats de la recherche pourraient être marqués avec <mark></mark> pour indiquer la pertinence pour la requête de recherche.

Exemple pratique: Sur une page "Packages de vacances les moins chers", les prix des packages les moins chers pourraient être mis en évidence en utilisant <mark></mark>:

<code class="language-html"><div class="deal-list">
  <div>
    <h2>Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2>Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2>Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div></code>

Les meilleures pratiques: <mark></mark> ne devraient pas être utilisées uniquement pour le style; Utilisez CSS pour cela. Ne l'utilisez pas pour indiquer l'importance (utilisez <code><strong></strong> ou <em></em> pour cela). Utilisez <mark></mark> pour mettre en évidence la pertinence pour l'action utilisateur actuelle.

2. Importance plus faible avec <small></small>

<small></small> réduit la taille du texte, un sous-produit visuel de sa signification sémantique: dénotant une importance plus faible. Utilisez-le pour des informations moins critiques, souvent trouvées dans les pieds de page ou les barres latérales.

Exemple pratique: dans un pied de page:

<code class="language-html"><small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small></code>

ou dans une liste de produits:

<code class="language-html"><h3>Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small></code>

Les meilleures pratiques: <small></small> ne peuvent pas abaisser l'importance du texte déjà souligné avec <code><strong></strong> ou <em></em>. Ne l'utilisez pas uniquement pour le contrôle de la taille.

3. Citations avec <q></q> et <blockquote></blockquote>

Utilisez <q></q> pour les citations en ligne courtes et <blockquote></blockquote> pour les citations de bloc plus longues. Ce sont pour les citations, pas le style (utilisez <span></span> pour cela).

Exemple pratique:

<q>He hasn't eaten anything as good in his whole life!</q>

<code class="language-html"><div class="deal-list">
  <div>
    <h2>Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2>Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2>Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div></code>

Best Practices: Les deux attributs de support cite (URL de la source) et <cite></cite> Tags (titre de source).

4. Insertion, suppression et correction avec <ins></ins>, <del></del> et <s></s>

<ins></ins> marque le texte ajouté, <del></del> supprimé du texte, et <s></s> le texte n'est plus correct. Tous les attributs de support cite et datetime pour le contexte.

Exemple pratique:

<code class="language-html"><small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small></code>

Best Practices: Utilisez <s></s> pour les corrections où l'original est remplacé. Ne les utilisez pas uniquement pour le style.

5. Organisation d'options avec <optgroup></optgroup>

<optgroup></optgroup> catégorise les options dans <select></select> des éléments, améliorant la navigation. Il a des attributs label et disabled.

Exemple pratique:

<code class="language-html"><h3>Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small></code>

Best Practices: <optgroup></optgroup> lui-même ne peut pas être sélectionné ou stylé directement.

6. Options prédéfinies avec <datalist></datalist>

<datalist></datalist> définit des choix valides pour les balises <input>, fournissant une liste de suggestions déroulantes.

Exemple pratique:

<code class="language-html"><blockquote>
  <p>Infuse your life with action. Don't wait for it to happen. Make it happen.</p>
  <cite>Bradley Whitford - Author</cite>
</blockquote></code>

Les meilleures pratiques: Le support du navigateur varie; La validation dépend du type <input>.

En conclusion, ces balises HTML5 souvent négligées offrent des améliorations sémantiques précieuses et une expérience utilisateur améliorée. Comprendre leur utilisation appropriée conduit à un développement Web plus propre, plus accessible et plus efficace.