Question Quelle est la différence entre
et
?


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


700
2017-08-04 10:33


origine


Réponses:


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

<div>, d'autre part, ne donne aucun sens, en dehors de tout trouvé dans son class, lang et title les attributs.

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

De la spécification:

<section>

le <section> element représente une section générique d'un document ou d'une application. Une section, dans ce contexte, est un groupement thématique de contenu. Chaque section devrait être identifié, généralement en incluant un titre (élément h1-h6) en tant qu'enfant du <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 pourrait être divisée en sections pour une introduction, des nouvelles et des informations de contact.

...

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

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

<div>

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

Remarque: Les auteurs sont fortement encouragés à voir <div> élément en dernier recours, car aucun autre élément ne convient. Utilisation d'éléments plus appropriés au lieu de <div> L'élément mène à une meilleure accessibilité pour les lecteurs et facilite la maintenabilité pour les auteurs.

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


850
2017-08-04 12:10



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


71
2017-08-04 10:34



<div> Vs <Section>

Tour 1

<div>: le HTML  element (ou HTML Document Division Element) est le conteneur générique pour le contenu du flux, qui ne représente rien de manière inhérente. 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 devrait être utilisé seulement quand aucun autre élément sémantique (tel que <article> ou <nav>) est approprié.

<section>: le HTML Elé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 en-tête.


2ème round

<div>:  Support du navigateur enter image description here

<section>:  Support du navigateur

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

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


55
2018-06-17 12:00



Juste une observation - n'a trouvé aucune documentation collaborant à cette

Si une section contient une autre section, un en-tête h1 dans la section interne est affiché dans une police plus petite qu'un en-tête h1 dans la section externe. Lorsque vous utilisez div au lieu de section, le div h1-header interne 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.

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


31
2017-08-01 14:28



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

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


15
2018-04-29 14:51



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


9
2017-08-04 10:37



<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. A a normalement un en-tête (titre) et peut-être un pied de page aussi. C'est un morceau de contenu connexe, comme une section d'un long article, une partie importante de la page (par exemple la section des nouvelles sur la page d'accueil), ou une page dans l'interface à onglets d'une webapp. (W3C: Markup, WhatWG)

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


9
2017-08-04 12:13



Faites attention de ne pas abuser du section tag en remplacement d'un div élément. UNE section tag doit définir une région significative dans le contexte de la 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 l'emplacement du contenu de votre page principale. Bien sûr, les en-têtes et les pieds de page sont souvent communs à des centaines voire des milliers de pages d'un site Web. le section L'étiquette doit être limitée pour expliquer où le contenu unique est contenu. Au sein du section tag, nous devrions alors continuer à baliser et contrôler le contenu avec des balises HTML qui sont plus bas dans la hiérarchie, comme h1, div, envergure, etc.

Dans la plupart des pages simples, il ne devrait y avoir qu'un seul section tag, pas plusieurs. Veuillez également prendre en compte qu'il existe d'autres tags HTML5 intéressants similaires à section. Penser à utiliser article, résumé, de 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.


9
2018-05-15 12:06



En utilisant <section> peut être plus propre, Aidez-moi lecteurs d'écran et SEOtandis que <div> est plus petit en octets et plus rapide à taper

Dans l'ensemble, très petite différence.

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


2
2018-01-19 07:28



le <section> La 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:

le <div> tag définit une division ou une section dans un document HTML.

le <div> tag est utilisé pour regrouper les éléments de bloc pour les mettre en forme avec CSS.


1
2018-05-11 03:11



<section></section>

Le HTML <section> élément représente une section générique d'un   document, c'est-à-dire un groupement thématique de contenu, généralement avec un   titre. Chaque <section> devrait être identifié, généralement en incluant   un en-tête (<h1>-<h6> élément) en tant qu'enfant du <section>   élément. Pour plus de détails, veuillez suivre le lien.

Les références :


<div></div>

Le HTML <div> element (ou HTML Document Division Element) est le   conteneur générique pour le contenu du flux, qui ne possède pas intrinsèquement   représenter quelque chose. Il peut être utilisé pour regrouper des éléments pour le style   fins (en utilisant les attributs class ou id), ou parce qu'ils partagent   valeurs d'attribut, telles que lang. Il devrait être utilisé seulement quand aucun autre   élément sémantique (tel que <article> ou <nav>) est approprié.

Les 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 en discutent plus sur les différences entre eux:


1
2018-05-16 09:45