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

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

<section> signifie que le contenu à l'intérieur est groupé (c.-à-d. se rapporte à un seul thème), et devrait apparaître comme une entrée dans un plan de la page.

<div>, D'autre part, ne donne pas de sens , en dehors de toute trouve dans ses class, langet les titleattributs.

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

De la spécification:

<section>

L' <section>élément 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. Chacun sectiondoit être identifié, généralement en incluant un en-tête (élément h1-h6) en tant qu'enfant de l' <section>élément.

Des exemples de sections seraient des chapitres, les différentes pages à onglets dans une boîte de dialogue à onglets 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 actualités et des informations de contact.

...

L' <section>élément n'est pas un élément conteneur générique. Lorsqu'un élément est nécessaire uniquement à des fins de style ou pour des raisons de script, les auteurs sont encouragés à utiliser l' <div>élément à la place. Une règle générale est que l' <section>élément n'est approprié que si le contenu de l'élément est répertorié explicitement dans le plan du document.

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

<div>

L' <div>élément n'a aucune signification particulière. Il représente ses enfants. Il peut être utilisé avec les class, langet les titleattributs à marquer sémantique commun à un groupe d'éléments consécutifs.

Remarque: Les auteurs sont fortement encouragés à considérer l' <div>élément 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' <div>élément conduit à une meilleure accessibilité pour les lecteurs et une facilité de maintenance plus facile pour les auteurs.

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

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

<div> Vs <Section>

Tour 1

<div>:L' élément HTML (ou élément de division de document HTML) est le conteneur générique pour le contenu de 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'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

<section>: Prise en charge du navigateur

Les chiffres du tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.

Dans cette veine, une div n'est pertinente que d'un point de vue pur CSS ou DOM, tandis qu'une section est également pertinente pour la sémantique et, dans un proche avenir, pour l'indexation par les moteurs de recherche.

Juste une observation - je n'ai trouvé aucune 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 vous utilisez div au lieu de section, l'en-tête div interne h1 est affiché comme 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 -.

Lorsque vous utilisez css pour colorer l'en-tête h1, le h1 intérieur était également coloré (se comporte comme h1 normal). C'est le même comportement dans Firefox 18, IE 10 et Chrome 28.

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

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

Prenez garde de ne pas abuser de la balise section en remplacement d'un élément div . Une balise de section doit 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 pieds de page sont souvent communs à des centaines, voire des milliers de pages d'un site Web. La balise de section doit être limitée pour expliquer où le contenu unique est contenu. Dans la balise section , nous devons 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 doit y avoir qu'une seule balise de section , pas plusieurs. Veuillez également considérer qu'il existe d'autres balises HTML5 intéressantes qui sont similaires à la section . Pensez à utiliser l' article , le résumé , le côté et d'autres dans votre flux de documents. Comme vous pouvez le voir, ces balises améliorent encore notre capacité à définir les principales régions du document HTML.

<div>—Le conteneur générique de flux 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. C'est un morceau de contenu connexe, comme une sous-section d'un long article, une grande partie de la page (par exemple la section des nouvelles sur la page d'accueil), ou une page dans l'interface à onglets d'une application Web. (W3C: balisage, WhatWG)

Ma suggestion: div: utilisé la version inférieure (je pense que 4.01 à encore) l'élément html (beaucoup de concepteurs ont géré cela). section: élément html récemment entré (html5).

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é, elle peut également être utilisée pour l'optimisation des moteurs de recherche. La balise section facilite également l'analyse syntaxique html. pour plus d'informations, reportez-vous. http://blog.whatwg.org/is-not-just-a-semantic

L'utilisation <section>peut être plus simple , aider les lecteurs d'écran et le référencement alors qu'il <div>est plus petit en octets et plus rapide à taper

Globalement très peu de différence.

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

Voici une astuce sur la façon de distinguer 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>le conteneur des composants d'un widget comme un conteneur contenant un bouton, une étiquette, etc.

<article> des widgets de groupe qui partagent un objectif.

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

<footer> est la barre d'état.

La <section>balise 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 <div>balise définit une division ou une section dans un document HTML.

La <div>balise est utilisée pour regrouper les éléments de bloc pour les formater avec CSS.

<section></section>

L' <section>élément HTML 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. Chacun <section>doit être identifié, généralement en incluant un en-tête ( <h1>- <h6>élément) en tant qu'enfant de l' <section> élément. Pour plus de détails, veuillez suivre le lien.

Références :

• http://www.w3schools.com/tags/tag_section.asp
• https://developer.mozilla.org/en/docs/Web/HTML/Element/section

<div></div>

L' <div>élément HTML (ou élément de division de document HTML) est le conteneur générique pour le contenu de 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'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:

• http://html5doctor.com/avoiding-common-html5-mistakes/
• https://teamtreehouse.com/community/use-div-or-section-element
• http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm