is_реклам:

пошук, категорії та ін. показати ▼

html5 — різниця між div, section і acticle

html5 — різниця між div, section і acticle
автор опубліковано

Нові HTML5 теги, які вчора були іще в новинку, і мало хто їх наважувався використовувати через проблеми сумісності із браузерами, сьогодні теж на жаль мало де можна зустріти в розмітці щойно розробленого сайту.

Нові елементи section і article служать для заміни звичайний блочних елементів із відповідними id атрибутами чи class-ми, наприклад <div class="article">.

Розглянемо три елементи призначення яких можна дуже легко сплутати:

  • div — "базовий контейнер", який всім давно відомий. Це звичайний блочний елемент без будь-якого семантичного значення.
  • section — "документ або розділ додатку". Зазвичай містить верхній (header) і нижній (footer) колонтитули. Це кілька схожих по значенню статей, чи підрозділи великої статі, або головна частина сторінки (наприклад розділ новин).
  • article — "незалежна частина документа або сайту". Ця частина повинна мати смислове значення не зважаючи на інший контент що навколо. Наприклад, це може бути пост на блозі чи форумі, коментар. Так як і section цей тег може містити верхній і нижній колонтитули.

Більш детальний опис на whatwg.org

Різниця між div, section і article

В HTML4 div використовувався як базовий елемент розмітки. Він не мав ніякого семантичного значення. Також не було ніяких умов на його вміст і взаємодію в середині блоку.

Елемент section

Новий елемент section дуже схожий на div, бо використовується як контейнер, але вже має семантичне значення — вмістимі об’єкти мають спільне значенням.

Також цей елемент використовується для розбиття тексту на розділи.

Елемент article

Article — спеціальний вид section, який окреслює незалежну и самодостатню частину сторінки. На його місці можна використовувавати section, але даний елемент додає більше семантичного змісту.

Що вибрати?

Якщо проводити аналогію із HTML4, то ці теги можна порівняти із p і blockquote. Обидва теги — блочні елементи, але blockquote, як різновид p, має значення "блок тексту що цитується". Так само section і article: тег section окреслює близький по змісту текст, а тег article — осмислену частину цього тексту.

Щоб визначитись який елемент вибрати можна використати наступний алгоритм:

  • Буде вмістиме мати осмислене значення само по собі, наприклад, при публікації в RSS потік? Якщо так, тоді вибираємо article.
  • Якщо частини вмістимого об’єднані загальним змістом, то вибираємо section.
  • І на останок, якщо вмістиме не має ніякого семантичного значення, то вибираємо елемент div.

Елемент section, в деяких випадках, не повинен використовуватись, якщо у нього немає заголовка. Якщо при автоматичній побудові вмістимого документа будуть зустрічатись не іменовані розділи, то імовірно розмітка зроблена не правильно. Однак наявність елементів без заголовків nav і aside може бути зовсім типовим явищем.

Елемент section не потрібно використовувати якщо:

  • Необхідно блочний елемент для декорування. Це функція елемента div.
  • В даному місці по значенню краще підходить елемент article, aside чи nav.
  • У різділу немає заголовку.

Елементи section і article використовуються аналогічно div в HTML4. Вони не повинні зустрічатись в середині p, blockquote чи address.

Приклад використання

<header>
    <h1>Title</h1>
    <nav>
        <ul>
            <li><a href="page1.html">Page 1</a></li>
            <li><a href="page2.html">Page 2</a></li>
            <li><a href="page3.html">Page 3</a></li>
        </ul>
    </nav>
</header>
<section>
    <h2>New Articles</h2>
    <article>
        <h2>News Title 1</h2>
        <p>Text about news.</p>
    </article>
    <article>
        <h2>News Title 2</h2>
        <p>Text about news.</p>
        <aside>Additional information to News 2</aside>
    </article>
</section>
<aside>
    <section>
        <h3>Blogroll</h3>
    </section>
    <section>
        <h3>Ads</h3>
    </section>
</aside>
<footer>
    <p>copyrights</p>
</footer>

за матеріалами: oli.jp

схоже за тегами

Коментарів 7

  1. Гуру пише: Відповіcти

    В этой статье нет никакого смысла вообще.

    • dnister.lark пише:

      Это почему же? Семантика была отменина?

  2. Гуру пише: Відповіcти

    Потому что это такие очевидные вещи что о них нет смысла даже писать.

    • angelinavorontsova пише:

      Гуру, більшість інформації з даного блогу орієнтовано на студентів та програмістів-початківців. Звідси підбір тем і мова їх викладу. На сайті також багато підписників, що програмують не під веб.

    • dnister.lark пише:

      Это могут быть очевидные вещи для вас, но не факт что это очевидно для других.

      Например для одного разница между `div` и `table` очевидна, а другой делает таблицу на `div`-ах, и пишет кучу css стилей, чтоб сделать из первого другое.

  3. Фанат гуру пише: Відповіcти

    по моему в этой статье нет смысла и Гуру прав. И тем кто программирует не под веб вообще не нужен наш веб. И те кто делает из дивов таблицы тем нужно вообще бросить веб и идти на стройку таскать кирпичи.

    • dnister.lark пише:

      На счет комментария про стройку, так тут следующая штука, если девелопер знает об плюшках и их не использует, хотя специфика проекта позволяет, тогда полностью согласен, иначе зачем наговаривать на людей.

      з.ы. По моему гуру и его фаната то один и тот же человек :) ведь и фанат и гуру на одной почте, что можна подметить из граватара.

Залишити коментар:

Яндекс цитирования UA TOP Bloggers