Les balises structurelles nouvellement ajoutées de HTML5 sont : 1. la balise section, qui définit les sections du document ; 2. la balise article ; 3. la balise nav ; 4. la balise side 5. la balise header ; document ; 6. balise de pied de page ; 7. balise hgroup ;
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.
Dans les pages HTML précédentes, tout le monde utilisait essentiellement la méthode de mise en page p+CSS. Lorsqu'un moteur de recherche explore le contenu d'une page, il ne peut que deviner que le contenu de l'une de vos pages est un conteneur de contenu d'article, un conteneur de module de navigation, ou un conteneur introduit par l'auteur, etc. C'est-à-dire que la structure de l'ensemble du document HTML n'est pas clairement définie. Afin de résoudre ce problème, HTML5 ajoute spécialement : l'en-tête, le pied de page, la navigation, le contenu de l'article et d'autres balises d'éléments structurels liées à la structure.
Avant de parler de ces nouvelles balises, regardons d'abord la mise en page d'une page ordinaire :
Dans l'image ci-dessus, on voit très clairement qu'une page ordinaire aura un en-tête, une navigation et un contenu d'article. Il y a également une colonne de droite attachée, ainsi que des modules du bas et d'autres, et nous les distinguons par classes et les traitons à travers différents styles CSS. Mais relativement parlant, la classe n'est pas une spécification standard universelle. Les moteurs de recherche ne peuvent que deviner les fonctions de certaines parties. De plus, si ce programme de page est donné à lire à des personnes malvoyantes, la structure et le contenu du document ne seront pas très clairs. La nouvelle mise en page apportée par la nouvelle balise HTML5 est la suivante :
Le code HTML pertinent est :
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>Avec la compréhension sensorielle directe ci-dessus, nous présenterons HTML5 une par une ci-dessous Balises de structure associées dans .
balise section
Lorsque nous décrivons une chose spécifique, nous sommes généralement encouragés à utiliser article au lieu de section ; lorsque nous utilisons section, nous pouvons toujours utiliser h1 comme titre sans nous soucier de son emplacement et s'il est utilisé ailleurs lorsqu'un conteneur doit l'être ; stylisé directement ou comportement défini via des scripts, il est recommandé d'utiliser l'élément p au lieu de la section.
<section> <h1>section是什么？</h1> <h2>一个新的章节</h2> <article> <h2>关于section</h1> <p>section的介绍</p> ... </article> </section>
balise d'article
<article> <header> <hgroup> <h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup> <time datetime="2011-03-20">2011.03.20</time> </header> <p>文章内容详情</p> </article>
nav tag
nav tag représente une partie de la page. Il s'agit d'un groupe de liens qui peut être utilisé comme navigation de page. Les éléments de navigation qu'il contient renvoient vers d'autres pages ou d'autres parties de la page actuelle, créant ainsi un lien vers d'autres pages. code HTML plus sémantique et meilleure prise en charge des appareils tels que les lecteurs d'écran.
<nav> <ul> <li>厚德IT</li> <li>FlyDragon</li> <li>J飞龙天惊</li> </ul> </nav>
balise aside
la balise aside est utilisée pour charger du contenu non textuel et est considérée comme une partie distincte de la page. Le contenu qu'il contient est distinct du contenu principal de la page et peut être supprimé sans affecter le contenu, les sections ou les informations de la page. Tels que des publicités, des groupes de liens, des barres latérales, etc.
<aside> <h1>作者简介</h1> <p>厚德IT</p> </aside>
balise d'en-tête
Habituellement, la balise -
), et peut également inclure la balise contenu, logos, formulaires de recherche, navigation
<header> <hgroup> <h1>网站标题</h1> <h1>网站副标题</h1> </hgroup> </header>
balise de pied de page
footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它和
<footer> COPYRIGHT@厚德IT </footer>
hgroup标签
hgroup标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来
<hgroup> <h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup>
figure 标签
用于对元素进行组合。多用于图片与图片描述组合。
<figure> <img src="img.gif" alt="figure标签" title="figure标签" /> <figcaption>这儿是图片的描述信息</figcaption> </figure>
总结：
有了新的结构性的标签的标准，让HTML文档更加清晰，可阅读性更强，更利于SEO，也更利于视障人士阅读。
推荐教程：《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!
Quelles sont les méthodes de production de production d'animation html5 ?
La différence entre HTML et HTML5
Apprenez le C# à partir de zéro
Comment télécharger Binance
Qu'est-ce qu'une base de données relationnelle
Quels sont les avantages du modèle d'usine Java
vc6.0
qu'est-ce que le World Wide Web
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
