Quelles sont les balises sémantiques en HTML5

Balises sémantiques HTML5 : 1. balise d'en-tête ; 2. balise de navigation ; 3. balise de pied de page ; 4. balise de section ; 6. balise d'article ; 9. étiquette temporelle ; 10. étiquette d'adresse.

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

Sémantique HTML :

Chaque balise HTML a sa propre signification spécifique (sémantique), et la sémantique fait référence à Utilisation des balises sémantiquement appropriées pour que la page ait une bonne structure et que les éléments de la page aient une signification, ce qui la rend facile à comprendre pour les personnes et les moteurs de recherche.

J'ai vu un exemple plus frappant :

Lors de la construction d'une maison, certaines parties doivent être en briques, certaines parties doivent être en carreaux de céramique et d'autres les pièces doivent être faites de carreaux de céramique. Les endroits doivent être recouverts de ciment, pour que la maison soit solide, soignée et belle.

Si vous insistez pour remplacer les briques par des carreaux de céramique, vous pouvez à peine construire une maison, mais une telle maison n'est pas solide, facile à s'effondrer et son apparence n'est pas belle.

De même, beaucoup de choses dans la vie sont similaires ! Utilisez la balise qui doit être utilisée pour exprimer . Elle a une bonne structure et est plus facile à comprendre pour les gens et les moteurs de recherche. Un autre point est qu'il est facile à développer et à maintenir. J'ai vu beaucoup de structures de pages Web et je veux m'en plaindre. Tout cela est déroutant. Laissez simplement l'apparence de la tâche au CSS. disposer pour le plaisir de l'apparence !

Le sens et le rôle de la sémantique

Lorsque les styles sont supprimés ou perdus, la page peut présenter une
• structure claire
• Expérience utilisateur : par exemple, le titre et alt sont utilisés pour expliquer les noms ou expliquer les informations sur les images, et l'utilisation flexible des balises d'étiquette
• Professionnel à ; SEO : et les moteurs de recherche établissent une bonne communication pour aider les robots à explorer des informations plus efficaces : les robots s'appuient sur des balises pour déterminer le contexte et le poids de chaque mot-clé
• facilite l'analyse par d'autres appareils  ; (tels que les lecteurs d'écran, les lecteurs aveugles, les appareils mobiles) rendent les pages Web de manière significative
est plus facile pour
• le développement et la maintenance de l'équipe, et la sémantique est plus lisible, ce qui est la prochaine étape ; étape pour les pages web Tendances importantes, les équipes qui suivent les standards du W3C suivent toutes ce standard, ce qui peut réduire la différenciation.

À quoi faut-il faire attention en sémantique ?

• Utilisez le moins de balises p et span non sémantiques possible ; utilisez des balises sémantiques plus fortes nouvellement ajoutées en HTML5

• Don' ; N'utilisez pas de balises stylisées, telles que font, b, ..., etc. Vous pouvez entièrement utiliser CSS pour implémenter des styles (d'ailleurs, ces "balises stylisées" sont fondamentalement abolies en HTML5 !)

• Pour souligner le texte, essayez d'utiliser la balise forte pour renforcer l'accent, et mettez la balise em en italique

• Normes d'écriture du tableau :

  Pour le titre , utilisez la légende, L'en-tête est entouré par la tête, la partie corps est entourée par le corps et la queue est entourée par le pied. Les en-têtes de tableau et les cellules générales doivent être distingués Utilisez th pour les en-têtes de tableau et td pour les cellules

• Les champs de formulaire doivent utiliser des balises d'ensemble de champs Wrap ; et utilisez la balise légende pour expliquer le but du formulaire ; (Pour être honnête, je ne l'ai pas vraiment remarqué !)

• Le texte de description correspondant à chacun La balise d'entrée doit être utilisée avec la balise d'étiquette et est associée à l'entrée correspondante via l'attribut id.

Balises sémantiques HTML5 :

1.header : La balise définit l'entête de la "page web" ou de la "section" .

contient généralement des éléments h1-h6 ou des hgroups , comme la page entière ou le titre d'un bloc de contenu. Vous pouvez également envelopper la table des matières d'une section, un champ de recherche, un système de navigation ou tout logo associé .

<header>
     <h1>毕业生实习</h1>
     <span>2016/08/05</span>
</header>
<!--之前使用的是无语义的div+class-->
<div class=&#39;header&#39;>...</div>

ou

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h2>网站副标题</h2>
    </hgroup>
</header>

Utilisation :

peut être la partie principale de la "page Web" ou de toute "section"
n'a pas de numéro ; limite.
Si hgroup ou h1-h6 fonctionnent bien par eux-mêmes, n'utilisez pas d'en-têtes.

---

2.nav : définit la partie du lien de navigation.

<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
    </ul>
</nav>
<!--之前使用的是无语义的div+class-->
<div class=&#39;nav&#39;>...</div>

Utilisation :

Utilisé sur toute la page
• partie de navigation principale , n'utilisez pas d'éléments de navigation s'ils sont inappropriés
; Groupes de liens
• qui peuvent être utilisés comme navigation de page, tous les groupes de liens n'ont pas besoin d'être placés dans les éléments de navigation , seuls les groupes de liens principaux et de base doivent y être placés ; Il est plus approprié d'utiliser l'élément de pied de page
.

Utilisations spécifiques : barre de navigation traditionnelle, navigation dans la barre latérale, navigation par secteur d'activité, opérations de changement de page, etc.Balise 3.footer : représente "page Web" ou "section" pied de page.

通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

<footer>
  作者：xxxx <br />
 Copyright © xxx.All rights reserved.
</footer>
<!--之前使用的是无语义的div+class-->
<div class=&#39;footer&#39;>...</div>

用法：

• 可以是“网页”或任意“section”的底部部分；
• 没有个数限制，除了包裹的内容不一样，其他跟header类似。
• 多用于包含服务条款，友情链接、作者信息、版权信息等

---

4. hgroup元素：“网页”或“section”的标题

当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>
    <h1>主标题</h1>
    <h2>HTML 5</h2>
</hgroup>

用法：

• 如果只需要一个h1-h6标签就不用hgroup
• 如果有连续多个h1-h6标签就用hgroup
• 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

---

5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）

<section>
  <h1>section要包含标题</h1>
  <p>section要包含内容...</p>
</section>

用法：

• article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用p
• 当容器需要标题和内容时，建议使用section标签，若只是普通的容器，应该用p元素较好！section标签非p！

---

6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)

<article>
   <header>
     <h1>标题处</h1>
   </header>
   <p>内容描述</p>
   <footer>脚部声明标注</footer>
</article>

用法：定义一个独立完整的内容部分（可包含标题，内容，脚注）时使用！

article、section间的相互嵌套关系：
拜读博文：http://www.html5jscss.com/html5-semantics-section.html

---

7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。

书籍中的定义很长很绕，在收集之后，发现主要有两种用法:（啃下概念）

1.用于article标签之内，此时表示的是该独立内容的附属信息部分；

<article>
        <p>article内容区</p>
        <aside>
            <span>附属信息1</span>
            <span>附属信息2</span>
            <span>附属信息3</span>
        </aside>
    </article>

2.用于article标签之外，此时作为页面或站点全局的附属信息部分。

    <aside>
        <h1>附属信息标题</h1>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
    </aside>

用法：

• aside在article内表示主要内容的附属信息
• 在article之外则可做侧边栏，页面或站点全局的附属信息部分
• 如果是广告，其他日志链接或者其他分类导航也可以用

（一句话概括：不同的位置表示为对应区域的附属信息！）

---

8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。

figcaption标签：用于元素定义figure的标题。

1.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。

    <figure>
        <figcaption>figure的标题</figcaption>
        <img src="pic.jpg" alt="...">
    </figure>

---

9. time标签：定义时间或日期

<p>定义时间...<time>9:00</time></p>

<p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>

以上为实践操作中可能会用到的标签，HTML5还新增了很多标签，但因为用途与浏览器兼容性问题，还是为人所慎用的！待拓展！

---

10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

表示文档或文章的作者/拥有者的联系信息，在body标签中表示文档的作者的联系信息；在article标签中表示文章作者的联系信息；

W3School示例文档：http://www.w3school.com.cn/tags/tag_address.asp

用法：

• 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
• 元素通常连同其他信息被包含在 footer 元素中。

---

总结：掌握语义化含义、作用以及应当注意的细节，HTML5中常用的语义化新标签！知识点不在于多，而研究透彻应学以致用！

推荐教程：《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!