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

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

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

Les meilleures pratiques: <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> ou <em> pour cela). Utilisez <mark> pour mettre en évidence la pertinence pour l'action utilisateur actuelle.

2. Importance plus faible avec <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:

<small>Designed and developed by Simon Codrington. ? 2016 My Company - All rights reserved</small>

ou dans une liste de produits:

<h3>Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small>

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

3. Citations avec <q> et <blockquote>

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

Exemple pratique:

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

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

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

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

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

Exemple pratique:

<small>Designed and developed by Simon Codrington. ? 2016 My Company - All rights reserved</small>

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

5. Organisation d'options avec <optgroup>

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

Exemple pratique:

<h3>Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small>

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

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

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

Exemple pratique:

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

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.