Les nouvelles balises structurelles de HTML5
Dans les pages HTML précédentes, tout le monde utilisait essentiellement la méthode de mise en page Div+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 Divs 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 :
Sur l'image ci-dessus on peut voir très clairement, un Une page ordinaire aura un en-tête, une navigation, un contenu d'article, une colonne de droite attachée et des modules inférieurs. Cependant, 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 est le suivant :
<!DOCTYPE html>
<html> <head> <title>my page</title> </head> <body> <header>header</header> <nav>nav</nav> <article> <section>section</section> </article> <aside>aside</aside> <footer>footer</footer> </body> </html>
Après avoir eu la compréhension sensorielle directe ci-dessus, introduisons une par une les balises structurelles pertinentes en HTML5.
<section>
<section> Tels que les chapitres, les en-têtes, les pieds de page ou d’autres parties du document. Généralement utilisé pour le contenu sectionné, il démarrera une nouvelle section dans le flux de documents. Il est utilisé pour représenter le contenu d'un document ordinaire ou des blocs d'application, généralement constitués du contenu et de son titre. Mais la balise d’élément section n’est pas un élément conteneur ordinaire. Elle représente un contenu thématique, généralement accompagné d’un titre.
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'il s'agit d'un titre. Le conteneur doit être stylisé directement ou son comportement défini via des scripts, il est recommandé d'utiliser des éléments div au lieu de sections.
<section> <h1>section是什么？</h1> <h2>一个新章节</h2> <article> <h2>关于section</h2> <p>section的介绍</p> ... </article> </section>
<article>
Balise de section spéciale, qui a une sémantique plus claire que la section. Elle représente un bloc indépendant et complet de contenu associé. Lorsque nous décrivons une chose spécifique, il est généralement encouragé d'utiliser l'article au lieu de la section.
L'article aura une partie titre (généralement incluse dans l'en-tête) et peut également inclure un pied de page.
Les articles peuvent être imbriqués et l'article intérieur a une relation subordonnée avec la balise d'article externe.
<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>
peut être utilisé comme groupe de liens pour la navigation dans les pages. Les éléments de navigation qu'il contient sont liés à d'autres pages ou à d'autres parties de la page actuelle, ce qui rend le code HTML plus précis sémantiquement et prend mieux en charge les appareils tels que les lecteurs d'écran.
<nav> <ul> <li>厚德IT</li> <li>FlyDragon</li> <li>J飞龙天惊</li> </ul> </nav>
<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>
<header>
La balise d'en-tête définit l'en-tête du document, généralement des informations de guidage et de navigation. Il ne se limite pas à être écrit dans l’en-tête de la page web, mais peut également être écrit dans le contenu de la page web.
Habituellement, la balise d'en-tête contient au moins une balise de titre (h1-h6) et peut également inclure des balises hgroup, le contenu des tableaux, les logos, les formulaires de recherche, la navigation, etc.
<header> <hgroup> <h1>网站标题</h1> <h1>网站副标题</h1> </hgroup> </header>
<footer>
La balise footer définit le pied de page d'une section ou d'un document, qui contient des informations liées à la page, à l'article ou à une partie du contenu, comme l'auteur de l'article ou la date. C'est fondamentalement la même chose que la balise d'en-tête et peut être utilisée plusieurs fois sur une page. Si un pied de page est ajouté après une section, il sera équivalent au pied de page de la section.
<footer> 页脚信息 </footer>
<hgroup>
La balise hgroup combine les éléments de titre (h1-h6) d'une page Web ou d'une section. Par exemple, si vous avez des éléments de balise de série H consécutifs dans une section, vous pouvez les entourer de hgroup.
<hgroup> <h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup>
<figure>
est utilisé pour combiner des éléments. Principalement utilisé pour combiner des images et des descriptions d’images.
<figure> <img src="img.gif" alt="figure标签" title="figure标签" /> <figcaption>这儿是图片的描述信息</figcaption> </figure>
Plus de nouveaux éléments dans le manuel
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
