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

<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)

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

<div> Vs <Section>

Раунд 1

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

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

Раунд 2

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

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

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

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

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

Если раздел содержит другой раздел, заголовок h1 во внутреннем разделе отображается меньшим шрифтом, чем заголовок h1 во внешней секции. При использовании div вместо раздела внутренний div h1-header diplayed как 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.

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

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

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

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

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

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

Соблюдайте осторожность, чтобы не злоупотреблять тегом в качестве замены элемента div. Тег section должен определять значительную область в контексте body. Семантически 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, похожие на раздел. Рассмотрите возможность использования статьи, summary, в стороне и других в потоке документа. Как вы можете видеть, эти теги еще больше повышают нашу способность определять основные области HTML-документа.

<section></section>

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

Ссылки:

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

<div></div>

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

Литература: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div

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

• 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

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

тогда:

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

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

То же самое, но в html5 вы используете раздел, чтобы быть более явным. Избегайте divs читать элементы mdn html5

В html5 семантическое значение было добавлено как для ex: и div был удален.