В чем разница между <section> и <div>?

Ответы:

1039

<section> означает, что содержимое внутри сгруппировано (т. е. относится к одной теме) и должно отображаться в виде записи в схеме страницы.

<div>с другой стороны, не передает никакого значения , кроме как найденных в нем class, langи titleатрибутов.

Так что нет: использование <div>не определяет раздел в HTML.

Из спецификации:

<section>

<section>Элемент представляет общий раздел документа или приложения. Раздел, в этом контексте, является тематической группировкой контента. Каждый из них sectionдолжен быть идентифицирован, как правило, путем включения заголовка (элемент h1-h6) в качестве дочернего <section>элемента.

Примерами разделов могут быть главы, различные страницы с вкладками в диалоговом окне с вкладками или пронумерованные разделы диссертации. Домашняя страница веб-сайта может быть разбита на разделы для введения, новостей и контактной информации.

...

<section>Элемент не является универсальным элементом контейнера. Когда элемент нужен только для стилизации или для удобства написания сценариев, авторам рекомендуется использовать этот <div>элемент. Общее правило заключается в том, что <section>элемент подходит только в том случае, если содержимое элемента будет явно указано в схеме документа.

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

<div>

<div>Элемент не имеет особого смысла. Он представляет своих детей. Он может быть использован с class, langи titleатрибутами для разметки семантики , общих для группы последовательных элементов.

Примечание. Авторам настоятельно рекомендуется рассматривать этот <div>элемент как элемент последней инстанции, если другой элемент не подходит. Использование более подходящих элементов вместо <div>элемента приводит к лучшей доступности для читателей и облегчает поддержку для авторов.

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

Пол Д. Уэйт
источник
22
Размышляя больше о sectionпротив div, в том числе в свете этого ответа, я пришел к выводу, что они являются точно таким же элементом. W3C говорит, что div«представляет своих детей». Ну, разве это не то, что sectionделает элемент? Да, sectionподразумевает, что его дети сгруппированы вместе, но самим актом помещения детей внутрь div, вы также, да, группируете их вместе . По крайней мере, как я это делаю, я не знаю, как вы, ребята.
trysis
9
@trysis: «Думай больше о sectionпротив div» - не думай об этом слишком много. HTML не сложный. «Самим фактом помещения детей внутрь div, вы также, да, группируете их вместе ». Не в соответствии со спецификацией HTML вы не. Вы оборачиваете их в divцелях стилизации, или для удобства JavaScript, или чего-то еще, о чем W3C еще не задумывался, но не указывает читателям, что дочерние элементы являются группой.
Пол Д. Уэйт
8
@ Matian2040: потому что целью HTML является добавление значения к тексту, например <p>This is a paragraph</p>или <h2>This is a second-level heading</h2>. Поскольку не <div>добавляет смысла, его можно использовать только в том случае, если нет другого элемента HTML, который добавляет соответствующее значение к рассматриваемому тексту.
Пол Д. Уэйт
7
Так нет ли единственного преимущества при использовании разделов? лол, почему он вообще существует ?!
черный
14
@EdwardBlack: он имеет другое значение, чем другие теги. Передача смысла - весь смысл HTML.
Пол Д. Уэйт
71

<section>отмечает раздел , <div>отмечает общий блок без связанной семантики.

Quentin
источник
@MarwenTrabelsi - ссылка не умерла. «Раздел» - это стандартное английское слово. Словари доступны.
Квентин
@MarwenTrabelsi - Термины вы называете «абстрактными и широким» являются ключевыми отличиями.
Квентин
64

<div> Vs <Section>

Раунд 1

<div>:Элемент HTML (или элемент HTML Document Division) является общим контейнером для содержимого потока, который по своей сути ничего не представляет. Его можно использовать для группировки элементов в целях стилизации (с использованием атрибутов class или id) или потому, что они имеют общие значения атрибутов, например lang. Он должен использоваться только тогда, когда нет другого семантического элемента (такого как <article>или <nav>).

<section>:Элемент HTML Section ( <section>) представляет общий раздел документа, т. Е. Тематическую группировку контента, обычно с заголовком.

Раунд 2

<div>: Поддержка браузера введите описание изображения здесь

<section>: Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент. введите описание изображения здесь

В этом смысле div релевантен только с точки зрения чистого CSS или DOM, тогда как раздел релевантен также для семантики и, в ближайшем будущем, для индексации поисковыми системами.

Subodh Ghulaxe
источник
10
Поддержка браузера здесь не проблема, речь идет о семантике. Если вы используете HTML5, вы, вероятно, все равно будете использовать полифилл.
Джек Так
@JackTuck А что, если вы не хотите использовать такие кладжи?
мистер Листер
49

Просто наблюдение - не нашел никакой документации, подтверждающей это

Если раздел содержит другой раздел, заголовок h1 во внутреннем разделе отображается более мелким шрифтом, чем заголовок h1 во внешнем разделе. При использовании div вместо секции внутренний заголовок div h1 отображается как h1.

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

- заголовок Level2 - отображается меньшим шрифтом, чем заголовок Level1.

При использовании css для окраски заголовка h1, внутренний h1 также был окрашен (ведет себя как обычный h1). Такое же поведение в Firefox 18, IE 10 и Chrome 28.

runec
источник
1
Как странно ... создали быстрый стек-блиц, чтобы продемонстрировать это, так как это все еще вещь stackblitz.com/edit/angular-h1ayez
Гэвин Маннион
24

В стандарте HTML5 <section>элемент определяется как блок связанных элементов.

<div>Элемент определен как блок дочерних элементов.

srikanth_k
источник
Я не знаю, почему кто-то отметил это. Коротко, сладко и тоже главное.
user6031759
1
-1 Нет никакого смысла, как вы хотите сгруппировать связанные элементы в документе иерархической структуры (XML / HTML), вы можете группировать только блоки дочерних элементов, используя любой тег.
Свистстак,
@Svisstack Вы правы в том, что любой вмещающий тег (т.е. не самозакрывающийся / пустой) может группировать блоки дочерних элементов. Хотя я думаю, что это больше касается отношения детей. У них всех есть связанный контекст, чтобы передать? Например: форма, содержащая несколько входных данных, будет сгруппирована по причинам функциональности / стиля. Но эта форма - не раздел сайта, а часть с функцией. Теперь допустим, что на вашей странице описывался товар. Различные части о продукте будут перечислены в элементе раздела, потому что элементы передают общую идею.
Ксандор
20

Будьте осторожны, чтобы не использовать тег раздела как замену элементу div . Раздел тег должен определить значительный регион в контексте тела . Семантически HTML5 побуждает нас определять наш документ следующим образом:

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>
Развернуть фрагмент

Эта стратегия позволяет веб-роботам и автоматизированным программам чтения с экрана лучше понимать поток вашего контента. Эта разметка четко определяет, где содержится содержимое вашей основной страницы. Конечно, верхние и нижние колонтитулы часто встречаются на сотнях, если не тысячах страниц веб-сайта. Раздел тег должен быть ограничен , чтобы объяснить , где уникальный контент содержится. Затем внутри тега section мы должны продолжить разметку и контролировать содержимое с помощью тегов HTML, которые находятся ниже в иерархии, например h1 , div , span и т. Д.

На большинстве простых страниц должен быть только один тег раздела , а не несколько. Также учтите, что есть и другие интересные теги HTML5, которые похожи на раздел . Подумайте об использовании статьи , резюме , в стороне и других в вашем потоке документов. Как видите, эти теги еще больше расширяют наши возможности по определению основных областей HTML-документа.

KoolWebDezign
источник
Msgstr "На большинстве простых страниц должен быть только один тег раздела". Можете ли вы привести непростой пример, когда вы хотите использовать несколько тегов раздела на одной странице?
Styfle
7
Я бы использовал mainтег там, а внутри него один или несколько sectionтегов.
Chazy Chaz
10

<div>- универсальный контейнер потока, который мы все знаем и любим. Это элемент уровня блока без дополнительного семантического значения (W3C: Markup, WhatWG)

<section>- общий документ или раздел приложения. Обычно заголовок (заголовок) и, возможно, нижний колонтитул тоже. Это кусок связанного контента, например подраздел длинной статьи, большая часть страницы (например, раздел новостей на главной странице) или страница в интерфейсе веб-приложения с вкладками. (W3C: разметка, WhatWG)

Мое предложение: div: использовал более низкую версию (я думаю, что 4.01 до сих пор) элемент HTML (многие дизайнеры обрабатывали это). раздел: недавно появившийся (html5) HTML-элемент.

anglimasS
источник
9

Тег section предоставляет более семантический синтаксис для html. div - это общий тег для раздела. Когда вы используете тег раздела для соответствующего контента, он также может быть использован для поисковой оптимизации. Тег section также облегчает синтаксический анализ html. за дополнительной информацией обращайтесь. http://blog.whatwg.org/is-not-just-a-semantic

pooamlairaj
источник
1
«Тег раздела также облегчает анализ html» - а? Вы имеете в виду создание схемы страницы?
Пол Д. Уэйт
7

Использование <section>может быть аккуратнее , помощь читателей экрана и SEO , а <div>это меньше в байтах и быстрее типа

В целом очень мало различий.

Кроме того , не рекомендовал бы положить <section>в <section>, а не размещать <div>внутри<section>

drooh
источник
3

Вот подсказка о том, как я различаю пару недавних элементов html5 в случае веб-приложения (чисто субъективного).

<section>помечает виджет в графическом пользовательском интерфейсе, тогда <div>как контейнер компонентов виджета представляет собой контейнер, содержащий кнопку, метку и т. д.

<article> группирует виджеты, имеющие общую цель.

<header> это название и менубар.

<footer> это строка состояния.

Каан Э.
источник
1

<section>Тэг определяет разделы в документе, такие как главы, заголовки, или любые другие разделы документа.

в то время как:

<div>Тег определяет разделение или раздел в HTML - документе.

<div>Тег используется для группировки блоков-элементов для форматирования их с помощью CSS.

Дживс
источник
2
Верхние и нижние колонтитулы и другие разделы документа имеют свои семантические теги. ( <header>, <footer>, <nav>, И <article>т.д.)
Оливер
1

<section></section>

Элемент HTML <section>представляет общий раздел документа, т. Е. Тематическую группу содержимого, обычно с заголовком. Каждый из них <section>должен быть идентифицирован, обычно путем включения заголовка ( <h1>- <h6>element) в качестве дочернего <section> элемента. Для деталей, пожалуйста, перейдите по ссылке.

Ссылки :

<div></div>

Элемент HTML <div>(или элемент HTML Document Division) является общим контейнером для содержимого потока, который по своей сути ничего не представляет. Его можно использовать для группировки элементов в целях стилизации (с использованием атрибутов class или id) или потому, что они имеют общие значения атрибутов, например lang. Он должен использоваться только тогда, когда нет другого семантического элемента (такого как <article>или <nav>).

Ссылки: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div

Вот несколько ссылок, которые больше обсуждают различия между ними:

Асад Али
источник