Maison  >  Article  >  interface Web  >  La sémantique est-elle une nouvelle fonctionnalité de HTML5 ?

La sémantique est-elle une nouvelle fonctionnalité de HTML5 ?

青灯夜游
青灯夜游original
2022-01-23 15:22:082195parcourir

La sémanticisation est une nouvelle fonctionnalité de HTML5. Ses fonctions sont : 1. Permettre à la page de présenter une meilleure structure de contenu et une meilleure structure de code ; 2. Améliorer l'expérience utilisateur ; 3. Favoriser le référencement 4. Permettre aux robots d'exploration des navigateurs et aux machines d'analyser ; c'est mieux ; 5. C'est plus facile pour le développement et la maintenance de l'équipe.

La sémantique est-elle une nouvelle fonctionnalité de HTML5 ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

1. Qu'est-ce que la sémantique HTML ?

Fondamentalement, cela s'articule autour de plusieurs balises principales, telles que le titre (H1~H6), la liste (li), l'emphase (em fort), etc.>

Selon la structure du contenu (sémantique du contenu), Choisir des balises appropriées (sémantique du code) permettent aux développeurs de lire et d'écrire du code plus élégant tout en permettant aux robots d'exploration et aux machines de navigateur de mieux analyser .

2. Pourquoi la sémantique ? A quoi ça sert ?

  • Afin de présenter une bonne structure de contenu et une bonne structure de code sur la page sans CSS : Afin de avoir fière allure lorsque vous courez nu

  • améliorer l'expérience utilisateur : Par exemple, utilisez le titre, alt Utilisé pour expliquer les noms ou expliquer les informations sur les images, et l'utilisation flexible des balises d'étiquette

  • est propice au SEO : établir une bonne communication avec les moteurs de recherche aide les robots à explorer des informations plus efficaces : les robots s'appuient sur les étiquettes pour déterminer le contexte et Le poids de chaque mot-clé ;

  • facilite l'analyse d'autres appareils (tels que les lecteurs d'écran, les lecteurs aveugles, les appareils mobiles) pour rendre les pages Web de manière significative

  • facilite le développement et la maintenance de l'équipe , la sémanticisation ; est plus lisible, ce qui constitue une tendance importante dans la prochaine étape des pages Web. Les équipes qui suivent les normes du W3C suivent toutes cette norme, ce qui peut réduire la différenciation.

3. À quoi devez-vous faire attention lorsque vous écrivez du code HTML ?

  • Utilisez les balises non sémantiques p et span le moins possible

  • Lorsque la sémantique n'est pas évidente, vous pouvez utiliser p ou p, essayez d'utiliser p, car p a un espacement supérieur et inférieur par défaut. C'est bénéfique pour la compatibilité avec les terminaux spéciaux ;

  • N'utilisez pas de balises de style pur, telles que : b, font, u, etc., utilisez plutôt les paramètres CSS.

  • Le texte qui doit être souligné peut être inclus dans les balises strong ou em (styles par défaut du navigateur, si vous pouvez les spécifier avec CSS, vous n'en avez pas besoin). Le style par défaut de strong est gras (ne le faites pas). utilisez b), et em est en italique (ne l'utilisez pas i) ;

  • Lorsque vous utilisez un tableau, utilisez la légende pour le titre, head pour l'en-tête, tbody pour la partie principale et tfoot pour la queue. . Les en-têtes de tableau doivent être distingués des cellules ordinaires. Utilisez th pour les en-têtes de tableau et td pour les cellules ;

  • Les champs de formulaire doivent être entourés de balises de jeu de champs et les balises de légende doivent être utilisées pour décrire l'objectif du formulaire ; Chaque balise d'entrée correspond. Le texte de description doit utiliser la balise label, et en définissant l'attribut id pour l'entrée et en définissant for=someld dans la balise label, le texte de description est associé à l'entrée correspondante.

  • 4. Quelles nouvelles balises sémantiques sont ajoutées au HTML5, veuillez les décrire en détail.

1),

                                  Définir les sections et les paragraphes de la partie principale du document. T 2), & lt; article & gt; & lt;/article & gt;

une balise de section spéciale, qui a une sémantique plus claire que section. Définissez un bloc de contenu indépendant et complet de l'extérieur, comme par exemple un article de forum ou un texte de blog. . .

3), <à part>

                                                                                                                                                                                                                                                               . Par exemple, des publicités, des groupes de liens, des barres latérales. . .

4),

  Définir l'en-tête du document et de la page. Il s'agit généralement d'informations de guidage et de navigation, qui ne se limitent pas à l'intégralité de l'en-tête de la page, mais peuvent également être utilisées dans le contenu.

5),

  Définit le pied de page du document et de la page, similaire à l'en-tête.

6)、

  Définit une partie de navigation composée d'un groupe de liens, dont les liens peuvent renvoyer vers d'autres pages Web ou d'autres parties de la page en cours.

7),


  Utilisé pour combiner les éléments de titre (h1~h6) d'une page Web ou d'une section.

8),

  Utilisé pour combiner des éléments.

9),

  Ajoutez un titre à l'élément figure. Généralement placé sur le premier élément enfant ou le dernier de la figure.

10),

  Définition des détails de l'élément, l'utilisateur peut cliquer pour le visualiser ou le masquer.

11),

Utilisé conjointement avec les détails pour inclure le titre des détails.

12),

  Utilisé pour le dessin sur toile.

13),

  Définissez la vidéo.

14),

Définir l'audio.

15),

  Définir le contenu de la page web intégrée. Comme les plug-ins.

16),

  Cette balise définit les éléments multimédias pour les éléments multimédias (tels que la vidéo, l'audio).

17),

  Définir une liste de données facultatives, utilisées en conjonction avec l'entrée () pour créer des valeurs d'entrée liste déroulante.

18),

  Montrez visuellement le texte que vous souhaitez mettre en évidence à l'utilisateur. Par exemple, les mots-clés de recherche sont mis en évidence auprès des utilisateurs dans les résultats de recherche.

19),

   Poids et mesures, utilisant le rouge, le jaune et le vert pour indiquer la plage d'une valeur.

20),

  Définissez différents types de sortie, le style est le même que span.

21),

  Barre de progression, progression en cours d'exécution.

22),

  Définissez la date ou l'heure.

23),

  Définir le contenu crypté.

24),

  Définir le comportement des commandes.

Recommandations associées : "Tutoriel vidéo HTML"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn