À propos de la différence entre la balise section et la balise div en HTML5 (exemples inclus)

L'objectif principal de cet article est de vous présenter la différence entre les balises de section HTML5 et les balises div. L'utilisation de section et div peut sembler similaire, mais en fait, elles ne sont pas trop différentes à certains endroits. convertis les uns aux autres, mais à certains endroits, vous ne pouvez utiliser que des sections ou des div, qui ne peuvent pas être convertis. D'accord, lisons l'article ensemble

Regardons d'abord ce qui est écrit dans le standard HTML du. Balise de section :

Chaque section correspond à un sujet différent. Faites attention au thème du contenu lui-même, et non aux critères de division fixés par d'autres. Des exemples de

section incluent les chapitres de livre, chaque page à onglet d'une boîte de dialogue multi-onglets et les sections numérotées d'un article. La page d'accueil du site Web peut être divisée en sections telles que l'introduction, le dernier contenu, les coordonnées, etc.

Remarque : les auteurs de pages Web doivent utiliser des éléments d'article au lieu d'éléments de section si leur contenu est utilisé à des fins de syndication. Par exemple, chaque blog sur la page d'accueil du blog. Un autre exemple est le premier étage, le deuxième étage, le troisième étage... et l'étage des messages du forum. En règle générale, chaque élément de contenu est de forme similaire mais indépendant de la source.

Remarque : la section n'est pas un élément conteneur universel. S'il n'est utilisé que pour le style ou la création de scripts, utilisez des éléments div. Une règle simple consiste à utiliser l'élément section uniquement si le contenu de l'élément sera répertorié dans le plan du document.

Parlons ensuite de la différence entre la balise section html5 et la balise div :

1. La section n'est pas une balise spécialement utilisée comme conteneur, mais div

Il devrait y avoir un titre (h1~6) dans la section, mais il est recommandé d'utiliser article à la place dans l'article

On peut le comprendre comme un paragraphe non-article, un module spécial. conteneur avec un identifiant clair (pas un conteneur de package dédié aux blocs vivants).

En d'autres termes, si div est généralement utilisé comme conteneur d'éléments au lieu de section, alors section est inutile ? Modèle Tucson cassé.

Dans ce cas, il vaut mieux utiliser section que div.

section, comme son nom l'indique, est un chapitre, tel que :

<section>
<h1>PHP中文网</h1>
<p>欢迎来到PHP中文网，这里的网址是www.php.cn</p>
</section>

Quant à pourquoi il est utilisé, c'est pour la sémantique. Il y a des sections, des articles et des DL qui sont très confortables à regarder. Ils sont faciles à comprendre pour les humains et les ordinateurs. C'est bien mieux que les divs qui sont partout.

2. L'une des erreurs les plus courantes commises lors de l'utilisation de balises est d'assimiler la

de HTML5 à

- en particulier, de l'utiliser directement en remplacement (en utilisant avec style).

n'est pas un conteneur de style. L'élément section représente une partie sémantique du contenu qui permet de créer un résumé de document. Il doit contenir un en-tête. Si vous recherchez un élément qui agit comme un conteneur de page (comme dans le style HTML ou XHTML), envisagez d'écrire le style directement dans l'élément body, comme le suggère Kroc Camen. Si vous avez encore besoin de conteneurs de style supplémentaires, restez fidèle aux divs.

div est universel et pris en charge par tous les navigateurs. section est une balise sémantique H5,

et

compris comme le même sens, mais le premier s'écrit en H5

Résumé des balises section et des balises div en html5 :

DIV : Cette balise a toujours été notre balises les plus couramment vues et utilisées. Il n’a pas de sémantique et est utilisé comme balise de mise en page et de style.

Section : similaire à div, mais elle a une sémantique supplémentaire. Une section est utilisée comme élément de contenu d'actualité, généralement contenant un titre. Les scénarios d'application typiques pour une section doivent être des chapitres d'un article, des onglets dans la boîte de dialogue d'onglets ou des parties numérotées du document.

【Recommandation de l'éditeur】

Comment envelopper le texte dans la balise pre en html ? Exemples d'utilisation de la balise HTML pre

Que signifie la balise HTML ul ? Explication détaillée du rôle de la balise HTML ul

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!

Étiquettes associées：

div html section

source：php.cn

Article précédent：Que signifie la balise de section html5 ? Résumé de l'utilisation de la balise de section HTML5 Article suivant：Que signifie la balise canevas html5 ? Introduction à l'utilisation de la balise canvas

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

Derniers articles par auteur

• Que peut faire le framework React ? Introduction détaillée au framework React (avec des exemples d'utilisation complets)
  2018-09-11 16:45:17
• Comment créer une application en utilisant React ? Détails des étapes pour créer des applications à grande échelle avec React+Redux
  2018-09-11 16:39:07
• Comment implémenter la connexion dans React ? Explication détaillée du module de connexion React
  2018-09-11 16:29:40
• Comment utiliser React ? Explication détaillée de l'utilisation de React (avec exemples inclus)
  2018-09-11 16:10:13
• Quelles sont les nouveautés de React 16 ? Introduction aux nouvelles fonctionnalités et fonctions de React16
  2018-09-11 16:05:55
• Quelles connaissances dois-je acquérir sur React ? Résumé des points de connaissance de réaction (avec des exemples complets)
  2018-09-11 16:01:50
• Quelles sont les fonctions de réagir ? Analyse détaillée de la fonction de réaction (avec exemples)
  2018-09-11 15:55:13
• Quel est le cycle de vie de Reactjs ? Introduction détaillée au cycle de vie de Reactjs
  2018-09-11 15:50:18
• Comment utiliser React.js ? Introduction à l'utilisation simple de React.js (avec exemples)
  2018-09-11 15:43:40
• Quelles sont les utilisations des références de composants React ? Explication détaillée du rôle des références de composants de réaction et de son utilisation
  2018-09-11 15:34:44

Derniers numéros

Les symboles d'élément de liste (<ul> et <ol>) dans le nœud racine ne peuvent pas être affichés et supprimés en CSS, et le problème overflow-x: caché ne peut pas être supprimé. Je travaille actuellement sur une page Web et j'ai des problèmes avec les éléments de ma l...

Depuis 2024-04-04 16:38:22

0

1

3617

protocole de boîte en grille en CSS Je veux que les deux premières cases montent avec une largeur maximale et que la deuxième ...

Depuis 2024-04-03 16:36:04

0

2

334

Rubriques connexes

Plus>

• symbole de droit d'auteur HTML
• éditeur HTML en ligne
• barre de défilement div
• réalisation de pages web html
• espace HTML
• qu'est-ce que le HTML
• Comment définir la taille de la police HTML
• html en txt