web-dev-qa-db-fra.com

Quelle est la différence entre <section> et <div>?

Quelle est la différence entre <section> et <div> en HTML? Ne sommes-nous pas en train de définir des sections dans les deux cas?

html5html
827
Simplicity

<section> signifie que le contenu à l'intérieur est groupé (c'est-à-dire qu'il ne concerne qu'un seul thème) et qu'il doit apparaître sous forme d'entrée dans le contour de la page.

<div>, d'autre part, ne contient aucun sens , à l'exception de celui trouvé dans sa class, lang et title les attributs.

Donc non: utiliser un <div> ne définit pas de section en HTML.

De la spec:

<section>

L'élément <section> représente une section générique d'un document ou d'une application. Une section, dans ce contexte, est un regroupement thématique de contenu. Chaque section doit être identifiée, généralement en incluant un en-tête (élément h1-h6) en tant qu'enfant de l'élément <section>.

Des exemples de sections sont les chapitres, les différentes pages à onglets d'une boîte de dialogue ou les sections numérotées d'une thèse. La page d'accueil d'un site Web peut être divisée en sections pour une introduction, des nouvelles et des informations de contact.

...

L'élément <section> n'est pas un élément conteneur générique. Lorsqu'un élément est requis uniquement à des fins de style ou pour faciliter la rédaction de scripts, les auteurs sont encouragés à utiliser l'élément <div>. Une règle générale veut que l’élément <section> ne soit approprié que si le contenu de cet élément est explicitement répertorié dans le plan du document

( https://www.w3.org/TR/html/sections.html#the-section-element) )

<div>

L'élément <div> n'a aucune signification particulière. Il représente ses enfants. Il peut être utilisé avec les attributs class, lang et title pour baliser une sémantique commune à un groupe d'éléments consécutifs.

Remarque: Les auteurs sont vivement encouragés à considérer l'élément <div> comme un élément de dernier recours, lorsque aucun autre élément ne convient. L'utilisation d'éléments plus appropriés au lieu de l'élément <div> permet d'améliorer l'accessibilité pour les lecteurs et de faciliter la maintenance pour les auteurs.

( https://www.w3.org/TR/html/grouping-content.html#the-div-element) )

950
Paul D. Waite

<section> marque une section , <div> marque un bloc générique sans sémantique associée.

73
Quentin

<div> Vs <Section>

Tour 1

<div>: L'élément HTML (ou HTML Document Division Element) est le conteneur générique du contenu du flux, ce qui ne représente intrinsèquement rien. Il peut être utilisé pour regrouper des éléments à des fins de style (en utilisant les attributs class ou id) ou parce qu'ils partagent des valeurs d'attribut, telles que lang. Il ne doit être utilisé que si aucun autre élément sémantique (tel que _<article>_ ou _<nav>_) n'est approprié.

<section>: L'élément HTML Section (_<section>_) représente une section générique d'un document. , c’est-à-dire un regroupement thématique de contenu, généralement avec un en-tête.

2ème round

<div>: Prise en charge du navigateur  enter image description here

<section>: Prise en charge du navigateur

Les nombres dans la table spécifient la première version du navigateur qui prend pleinement en charge l'élément.  enter image description here

Dans cette optique, une div n'est pertinente que dans une perspective CSS ou DOM pure, alors qu'une section est également pertinente pour la sémantique et, dans un proche avenir, pour l'indexation par les moteurs de recherche.

59
Subodh Ghulaxe

Juste une observation - pas trouvé de documentation corroborant cela

Si une section contient une autre section, un en-tête h1 dans la section intérieure est affiché dans une police plus petite qu'un en-tête h1 dans la section extérieure. Lorsque div est utilisé à la place de section, l'en-tête div intérieur h1 est affiché sous le nom h1.

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

- l'en-tête Level2 est affiché dans une police plus petite que l'en-tête Level1.

Lors de l'utilisation de css pour colorer l'en-tête h1, les h1 internes étaient également colorés (se comporte comme un h1 normal). C'est le même comportement dans Firefox 18, IE 10 et Chrome 28.

40
runec

Dans le standard HTML5, l'élément <section> est défini comme un bloc d'éléments associés.

L'élément <div> est défini comme un bloc d'éléments enfants.

20
srikanth_k

Prenez garde à ne pas abuser de la balise section en remplacement d'un élément div. Une balise section devrait définir une région significative dans le contexte du corps. Sémantiquement, HTML5 nous encourage à définir notre document comme suit:

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>

Cette stratégie permet aux robots Web et aux lecteurs d'écran automatisés de mieux comprendre le flux de votre contenu. Ce balisage définit clairement où se trouve le contenu de votre page principale. Bien sûr, les en-têtes et les pieds de page sont souvent communs sur des centaines, voire des milliers de pages d'un site Web. La balise section doit être limitée pour expliquer où se trouve le contenu unique. Dans la balise section, nous devrions ensuite continuer à baliser et à contrôler le contenu avec des balises HTML plus basses dans la hiérarchie, comme h1, div , span, etc.

Dans la plupart des pages simples, il ne devrait y avoir qu'une seule balise section, pas plusieurs. Veuillez également noter qu'il existe d'autres balises HTML5 intéressantes similaires à section. Pensez à utiliser article, résumé, à part et autres au sein de votre flux de documents. Comme vous pouvez le constater, ces balises améliorent encore notre capacité à définir les principales régions du document HTML.

12
KoolWebDezign

<div>— le conteneur de flux générique que nous connaissons et aimons tous. C'est un élément de niveau bloc sans signification sémantique supplémentaire (W3C: Markup, WhatWG)

<section>— un document générique ou une section d'application. Un a normalement un titre (titre) et peut-être aussi un pied de page. Il s’agit d’une partie du contenu associé, comme une sous-section d’un long article, une partie importante de la page (par exemple, la section des actualités sur la page d’accueil) ou une page dans l’interface à onglets d’une application Web. (W3C: balises, groupe de travail)

Mon conseil: div: version inférieure utilisée (je pense que 4.01 est encore), élément HTML (beaucoup de concepteurs ont géré cela). section: élément HTML récemment ajouté (html5).

10
anglimasS

La balise section fournit une syntaxe plus sémantique pour HTML. div est une balise générique pour une section. Lorsque vous utilisez une balise de section pour un contenu approprié, vous pouvez également l'utiliser pour l'optimisation des moteurs de recherche. La balise de section facilite également l'analyse HTML. pour plus d'informations, référez-vous. http://blog.whatwg.org/is-not-just-a-semantic

9
pooamlairaj

Utiliser <section> peut être plus propre, aide lecteurs d'écran et SEO alors que <div> est plus petit en octets et plus rapide à taper

Globalement très peu de différence.

Aussi, ne recommandons pas de mettre <section> dans un <section>, placez plutôt un <div> à l'intérieur d'un <section>

6
drooh

La balise <section> définit les sections d'un document, telles que les chapitres, les en-têtes, les pieds de page ou toute autre section du document.

tandis que:

La balise <div> définit une division ou une section dans un document HTML.

La balise <div> permet de regrouper des éléments de bloc pour les formater avec CSS.

1
Jeeves

Voici une astuce sur la façon dont je distingue quelques éléments html5 récents dans le cas d’une application Web (purement subjective).

<section> marque un widget dans une interface utilisateur graphique, tandis que <div> est le conteneur des composants d'un widget, comme un conteneur contenant un bouton, une étiquette, etc.

<article> regroupe des widgets partageant un même objectif.

<header> est le titre et la barre de menus.

<footer> est la barre d'état.

1
Kaan E.

<section></section>

L’élément HTML _<section>_ représente une section générique d’un document, c’est-à-dire un groupe thématique de contenu, généralement avec un en-tête. Chaque _<section>_ devrait être identifié, généralement en incluant un en-tête (_<h1>_-_<h6>_) en tant qu'enfant de l'élément _<section>_. Pour plus de détails s'il vous plaît lien suivant.

Références :

<div></div>

L'élément HTML _<div>_ (ou HTML Document Division Element) est le conteneur générique du contenu du flux, qui ne représente en soi rien. Il peut être utilisé pour regrouper des éléments à des fins de style (en utilisant les attributs class ou id) ou parce qu'ils partagent des valeurs d'attribut, telles que lang. Il ne doit être utilisé que si aucun autre élément sémantique (tel que _<article>_ ou _<nav>_) n'est approprié.

Références: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/ div

Voici quelques liens qui discutent davantage des différences entre eux:

1
Asad Ali