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

Question

Quelle est la différence entre <section> y <div> en HTML ?
Ne définissons-nous pas des sections dans les deux cas ?

Answer 1

<section> signifie que le contenu qu'il contient est groupé (c'est-à-dire qu'il se rapporte à un thème unique) et qu'il doit apparaître comme une entrée dans un plan de la page.

<div> d'autre part, ne transmet aucun sens en dehors de tout ce qui se trouve dans son class , lang et title attributs.

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

De la spécification :

<section>

Le site <section> représente une section générique d'un document ou d'une application. Dans ce contexte, une section est un regroupement thématique de contenu. Chaque élément section doit être identifié, généralement en incluant un titre (élément h1-h6) comme enfant de l'élément <section> élément.

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

...

Le site <section> n'est pas un élément conteneur générique. Lorsqu'un élément n'est nécessaire qu'à des fins de style ou de commodité pour les scripts, les auteurs sont encouragés à utiliser l'attribut <div> à la place. En règle générale, l'élément <section> n'est approprié que si le contenu de l'élément doit figurer explicitement dans le plan du document.

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

<div>

Le site <div> n'a pas du tout de signification particulière. Il représente ses enfants. Il peut être utilisé avec l'élément class , lang et title pour marquer la sémantique commune à un groupe d'éléments consécutifs.

Note : Les auteurs sont vivement encouragés à consulter le <div> comme un élément de dernier recours, lorsqu'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 )

Answer 2

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

Answer 3

C'est juste une observation - je n'ai 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. Si vous utilisez div au lieu de section, le h1-header de la section intérieure est affiché comme h1.

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

-- l'en-tête du niveau 2 est affiché dans une police plus petite que celle de l'en-tête du niveau 1.

Lorsque l'on utilise du css pour colorer l'en-tête h1, le h1 interne est également coloré (se comporte comme un h1 normal). C'est le même comportement dans Firefox 18, IE 10 et Chrome 28.

Answer 4

<div> Vs <Section>

Round 1

<div>: Le site HTML L'élément (ou élément de division du document HTML) est le conteneur générique du contenu du flux, qui ne représente rien en soi. Il peut être utilisé pour regrouper des éléments à des fins de style (à l'aide des attributs class ou id), ou parce qu'ils partagent des valeurs d'attributs, comme lang. Il ne doit être utilisé que lorsqu'aucun autre élément sémantique (comme l'élément <article> ou <nav> ) est approprié.

<section>: Le site HTML Élément de 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 titre.

---

Round 2

<div>: Support des navigateurs

<section>: Support des navigateurs

Les chiffres du tableau indiquent la première version du navigateur qui prend pleinement en charge l'élément.

Dans cette optique, un div n'est pertinent que d'un point de vue purement CSS ou DOM, alors qu'une section l'est aussi pour la sémantique et, dans un avenir proche, pour l'indexation par les moteurs de recherche.

Answer 5

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