Чим відрізняється <section> від <div>?

935

Яка різниця між <section>і <div>в HTML?
Чи не ми визначаємо розділи в обох випадках?

html

1

Дивіться також: Використання елемента розділу для стилістичної верстки та обгортки

— unor

1037

<section> означає, що вміст всередині згрупований (тобто відноситься до однієї теми) і повинен відображатися як запис у контуру сторінки.

<div>, З іншого боку, не передати ніякого сенсу , крім якого - або знайденого на його class, langі titleатрибутах.

Отже ні: використання a <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

Думати більше про sectionVS. div, в тому числі і в світлі цієї відповіді, я прийшов до висновку , що вони в точності той же елемент. W3C каже, що div"представляє своїх дітей". Ну хіба це теж не те, що sectionробить елемент? Так, sectionмається на увазі, що його діти згруповані разом, але самим актом введення дітей всередину A divви також, так, згрупуєте їх . Принаймні так, як я це роблю, я не знаю про вас, хлопці.

— trysis

9

@trysis: "Думати більше про sectionvs. div" - не думай надто багато про це. HTML не складний. "Самим актом введення дітей всередину A 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>позначає загальний блок без пов'язаної з ним семантики.

— Квентін
джерело

@MarwenTrabelsi - Посилання не мертве. "Розділ" - це стандартне англійське слово. Доступні словники.

— Квентін

@MarwenTrabelsi - Терміни, які ви називаєте "абстрактними та широкими", є ключовими відмінностями.

— Квентін

64

`<div> Vs <Section>`

1 раунд

<div>:Елемент HTML (або елемент підрозділу HTML Document Element) - це загальний контейнер для контенту потоку, який сам по собі нічого не представляє. Його можна використовувати для групування елементів для цілей стилізації (використовуючи атрибути класу або id) або тому, що вони поділяють значення атрибутів, наприклад, lang. Він повинен використовуватися лише тоді, коли не підходить жоден інший смисловий елемент (наприклад, <article>або <nav>).

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

2 раунд

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

<section>: Підтримка браузера

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

У цьому ключі діва є актуальним лише з точки зору чистого 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
джерело

Я не знаю, чому хтось це позначив. Короткий, солодкий і теж суть.

— користувач6031759

1

-1 не має сенсу, як ви хочете групувати пов'язані елементи в ієрархічному документі структури (XML / HTML), ви можете згрупувати блок дочірніх елементів, використовуючи будь-який тег.

— Svisstack

@Svisstack Ви впевнені, що будь-який тег, що вкладається (тобто не закривається / недійсний) може групувати блоки дочірніх елементів. Хоча я думаю, що це більше вникає у стосунки дітей. Чи всі вони мають пов'язаний контекст? Наприклад: форма, що містить кілька входів, буде згрупована разом з міркувань функціональності / стилю. Але ця форма - це не розділ веб-сайту, а натомість фрагмент із функцією. Тепер скажемо, що на вашій сторінці описувався товар. Різні частини про продукт будуть вказані в елементі розділу, оскільки елементи передають колективну ідею.

— Ксандор

20

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

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>

Розгорніть фрагмент

Ця стратегія дозволяє веб-роботам та автоматизованим читачам екранів краще розуміти потік вашого вмісту. Ця розмітка чітко визначає, де міститься ваш основний вміст сторінки. Звичайно, колонтитули часто поширені на сотнях, якщо не на тисячах сторінок на веб-сайті. Розділ тег повинен бути обмежений , щоб пояснити , де унікальний контент міститься. У межах тегу розділу ми повинні продовжувати розмітку та контроль вмісту за допомогою HTML-тегів, які нижчі в ієрархії, як-от h1 , div , span тощо.

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

— KoolWebDezign
джерело

"На більшості простих сторінок має бути лише один тег розділу". Чи можете ви навести не простий приклад, коли ви хочете використовувати кілька тегів розділів на одній сторінці?

— styfle

7

Я б використав mainтег там, а всередині нього один або кілька sectionтегів.

— Chazy Chaz

10

<div>—Загальний контейнер для потоку, який ми всі знаємо і любимо. Це елемент рівня блоку без додаткового смислового значення (W3C: Розмітка, WhatWG)

<section>—Загальний документ або розділ заявки. Зазвичай має заголовок (заголовок) і, можливо, колонтитул теж. Це шматок пов'язаного вмісту, як підрозділ довгої статті, основна частина сторінки (наприклад, розділ новин на домашній сторінці) або сторінка в інтерфейсі вкладки веб-сайту. (W3C: Розмітка, WhatWG)

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

— англімиS
джерело

9

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

— pooamlairaj
джерело

1

"Тег розділу також полегшує аналіз HTML" - так? Ви маєте на увазі створення контуру сторінки?

— Пол Д. Уейт

7

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

Загалом різниця дуже мала.

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

— дрох
джерело

3

Ось підказка про те, як я розрізняю пару останніх елементів html5 у випадку веб-програми (суто суб’єктивно).

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

<article> групи віджетів, які мають спільну мету.

<header> - титул і меню.

<footer> - це смужка стану.

— Каан Е.
джерело

1

The <section>Тег визначає розділи в документі, такі як глави, заголовки, або будь-які інші розділи документа.

тоді як:

The <div>Тег визначає поділ або розділ в HTML - документі.

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

— Дживс
джерело

2

Заголовки, колонтитули та інші розділи документа мають власні смислові теги. ( <header>, <footer>, <nav>, І <article>т.д.)

— Олівер

1

<section></section>

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

Список літератури:

<div></div>

HTML <div> (або елемент підрозділу HTML Document Element) - це загальний контейнер для контенту потоку, який сам по собі нічого не представляє. Його можна використовувати для групування елементів для цілей стилізації (використовуючи атрибути класу або id) або тому, що вони поділяють значення атрибутів, наприклад, lang. Він повинен використовуватися лише тоді, коли не підходить жоден інший смисловий елемент (наприклад, <article>або <nav>).

Список літератури: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div

Ось декілька посилань, які детальніше обговорюють відмінності між ними:

— Асад Алі
джерело