Que sont les balises sémantiques HTML ? Une liste complète des balises sémantiques HTML courantes

<strong>1. Que sont les balises sémantiques HTML

Les balises sémantiques sont conçues pour donner aux balises leur propre signification.

<p>一行文字</p><span>一行文字</span>

Comme le montre le code ci-dessus, l'une des différences entre la balise <code>p et la balise <code>span est que la signification de la balise <code>p est : paragraphe. La balise <code>span n'a pas de signification unique.

<h1>2. Avantages des balises sémantiques

<li>

La structure du code est claire, facile à lire et propice au développement de l'équipe.

<li>

Analysé de manière pratique par d'autres appareils (tels que des lecteurs d'écran, des lecteurs aveugles, des appareils mobiles) pour afficher les pages Web de manière sémantique.

<li>

Bon pour l'optimisation des moteurs de recherche (SEO).

<h1>3. Balises sémantiques communes

Par conséquent, lors de l'écriture de la structure de la page, nous devrions essayer d'utiliser des balises HTML sémantiques

<li>

<code><title> : Le contenu principal de la page.

<li>

<code><hn> : h1~h6, titres hiérarchiques, la coordination de <code><h1> et <code><title> est bénéfique pour l'optimisation des moteurs de recherche.

<li>

<code><ul> : Liste non ordonnée.

<li>

<code><li> : liste ordonnée.

<li>

<code><header> : L'en-tête comprend généralement le logo du site Web, la navigation principale, les liens à l'échelle du site et le champ de recherche.

<li>

<code><nav> : navigation par marques, utilisée uniquement pour les groupes de liens importants dans le document.

<li>

<code><main> : Le contenu principal de la page, qui ne peut être utilisé qu'une seule fois sur une page. S'il s'agit d'une application web, entourez ses principales fonctions.

<li>

<code><article> : Définit un contenu externe indépendant du reste du document.

<li>

<code><section> : Définir des sections (sections, sections) dans le document. Tels que les chapitres, les en-têtes, les pieds de page ou d’autres parties du document.

<li>

<code><aside> : définit le contenu au-delà du contenu dans lequel il se trouve. Tels qu'une barre latérale, un ensemble de liens vers l'article, des publicités, des liens conviviaux, des listes de produits associés, etc.

<li>

<code><footer> : Pied de page, uniquement lorsque le parent est le corps, c'est le pied de page de toute la page.

<li>

<code><small> : affichez un petit effet de police, spécifiez les détails, saisissez la clause de non-responsabilité, l'annotation, la signature et le droit d'auteur.

<li>

<code><strong> : Comme la balise <code>em, elle est utilisée pour mettre en valeur le texte, mais elle met davantage l'accent sur le texte.

<li>

<code><em> : Exprimez le texte sous forme de contenu souligné, exprimé en italique.

<li>

<code><mark> : Utilisez le jaune pour surligner une partie du texte.

<li>

<code><figure> : Spécifie le contenu du flux indépendant (images, graphiques, photos, code, etc.) (la marge par défaut est d'environ 40 px).

<li>

<code><figcaption> : Définit le titre de l'élément <code>figure, qui doit être placé à la position du premier ou du dernier élément enfant de l'élément <code>figure.

<li>

<code><cite> : Indique que le texte contenu fait référence à une référence, comme le titre d'un livre ou d'un magazine.

<li>

<code><blockquoto> : Définissez des références de bloc, qui ont leur propre espace.

<li>

<code><q> : Citation courte (problèmes multi-navigateurs, essayez d'éviter de l'utiliser).

<li>

<code><time> : L'attribut datetime suit un format spécifique. Si cet attribut est ignoré, le contenu du texte doit être dans un format de date ou d'heure légal.

<li>

<code><abbr> : Abréviation ou abréviation.

<li>

<code><dfn> : Élément de terme de définition, qui doit être immédiatement adjacent à la définition, et peut être utilisé dans l'élément dl de la liste de description.

<li>

<code><address> : Coordonnées (adresse e-mail, lien vers la page de contact) de l'auteur, de la personne ou de l'organisation concernée.

<li>

<code><del> : Contenu supprimé.

<li>

<code><ins> : Contenu ajouté.

<li>

<code><code> : code tag.

<li>

<code><meter> : Définit une mesure scalaire dans une plage connue ou une valeur fractionnaire. (Internet Explorer ne prend pas en charge la balise de compteur)

<li>

<code><progress> : Définit la progression en cours (processus).

Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo HTML5