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

Question

В чем разница между <section> и <div> в HTML? Разве мы не определяем разделы в обоих случаях?

Answer 1

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

Answer 2

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

Answer 3

<div> Vs <Section>

Раунд 1

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

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

---

Раунд 2

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

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

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

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

Answer 4

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

Если раздел содержит другой раздел, заголовок 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.

Answer 5

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

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

Answer 6

Будьте осторожны, чтобы не использовать тег section вместо элемента 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 должен быть ограничен, чтобы объяснить, где содержится уникальный контент. В теге section мы должны продолжить разметку и управлять содержимым с помощью тегов HTML, которые находятся ниже в иерархии, например h1 , div , span и т. д.

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

В целом очень небольшая разница.

Кроме того, не рекомендуется помещать <section> в <section>, вместо этого ставьте <div> внутри <section>

Answer 10

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

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

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

<header> - заголовок и строка меню.

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