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.

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

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