Nouvelles structures en HTML5 : Introduction à la structure principale et à la structure non principale du HTML

Le contenu de cet article concerne la nouvelle structure de html5 : l'introduction de la structure principale et de la structure non principale html. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

1 Nouvel élément de structure principale

1.1 élément article

représente un document, une page ou une application indépendante, complète et pouvant être autonome Contenu référencé extérieurement. (comme un blog ou un article dans un journal ou un magazine)

1.2 L'élément section

est utilisé pour diviser le contenu de la page du site Web ou de l'application. (Comme la segmentation des articles)

1.3 L'élément de navigation

est un groupe de liens qui peut être utilisé comme navigation de page. Les éléments de navigation renvoient vers d'autres pages ou d'autres parties de la page actuelle.

1.4 élément de côté

est utilisé pour représenter la partie d'informations subsidiaires de la page ou de l'article actuel. Il peut inclure des références, des barres latérales, des publicités, des barres de navigation et liées à la page actuelle ou à l'article principal. contenu. Autres sections similaires qui sont différentes du contenu principal.

2 Nouveaux éléments structurels non principaux

L'élément d'en-tête 2.1

est un élément structurel doté de fonctions de guidage et de navigation, habituellement utilisé Placer le titre de la page entière ou un bloc de contenu dans la page, mais peut également inclure d'autres contenus, tels que des tableaux de données, des formulaires de recherche ou des images LOGO associées.

2.2 L'élément footer

peut être utilisé comme pied de page pour son bloc de contenu parent ou comme bloc racine. Il comprend généralement des informations de note de bas de page sur les sections pertinentes du serveur, telles que l'auteur, les liens de lecture associés, les informations sur les droits d'auteur, etc.

2.3 L'élément d'adresse

est utilisé pour présenter les informations de contact dans le document, y compris le nom de l'auteur ou du responsable du document, le lien vers le site Web de l'auteur ou du responsable du document, l'adresse e-mail , adresse réelle, numéro de téléphone, etc.

L'élément principal 2.4

représente le contenu principal de la page Web.

(1) La zone de contenu principale fait référence au contenu directement lié ou prolongeant le titre de la page Web ou la fonction principale de la page dans l'application. Cette zone doit avoir un contenu unique à chaque page Web et ne peut pas inclure de contenu commun à l'ensemble du site Web, tel que la barre de navigation entière du site Web, les informations sur les droits d'auteur, le logo du site Web, les formulaires de recherche publics, etc.

(2) Un seul élément principal peut être placé à l'intérieur de chaque page Web.

(3) L'élément principal ne peut pas être placé à l'intérieur d'un article, d'un côté, d'un pied de page, d'un en-tête ou d'un élément de navigation.

3 Utiliser des styles pour les nouveaux éléments structurels

(1) Étant donné que de nombreux navigateurs n'ont pas encore pris en charge les nouveaux éléments structurels dans H5, nous ne pouvons pas savoir si le navigateur utilisé par le client le prend en charge . Pour ces éléments, vous devez utiliser CSS pour ajouter l'instruction suivante. Le but est d'avertir le navigateur que les nouveaux éléments en H5 utilisés sur la page sont affichés en blocs, comme indiqué ci-dessous :

//追加block声明
article，aside，dialog，figure，footer，header，legend，nav，section，main｛ display：block；｝
//正常使用样式
nav {  float : left ; width:20% }
article { float:right ; width:79% }

(2) IE8 et les versions antérieures ne prennent pas en charge l'utilisation de CSS pour utiliser ces éléments structurels non pris en charge et nécessitent l'utilisation de scripts Javascript.

//脚本中创建元素
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
document.createElement("main");
</script>
<style>
//正常使用样式
nav {  float : left ; width:20% }
article { float:right ; width:79% }
</style>

Recommandations associées :

Nouveaux éléments structurels HTML5

Quels aspects doivent être pris en compte dans la page structure de html5

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!