Quelles sont les nouvelles balises structurelles ajoutées en HTML5

青灯夜游
Libérer: 2021-12-22 13:45:16
original
8886 Les gens l'ont consulté

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 ;

Quelles sont les nouvelles balises structurelles ajoutées en HTML5

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

Nouvelle balise de structure HTML5

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>
Copier après la connexion

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

, définit une section dans le document. 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'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>
Copier après la connexion

balise d'article

est une 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é qui peut être utilisé indépendamment des autres contenus de la page. Par exemple, un message complet sur un forum, un article de blog, un commentaire d'utilisateur, etc. De manière générale, un article comportera une partie titre (généralement incluse dans l’en-tête), et parfois un pied de page. Les articles peuvent être imbriqués et l'article interne a une relation subordonnée avec la balise d'article externe. Par exemple, un article de blog peut être affiché sous forme d'article, puis certains commentaires peuvent y être intégrés sous forme 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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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

contient au moins (mais sans s'y limiter) une balise d'en-tête (

-

), et peut également inclure la balise
contenu, logos, formulaires de recherche, navigation
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!