Від автора: В HTML5 представлені кілька секційних елементів, які можна застосовувати для розмітки веб-сторінок. Використання таких елементів передає сторінкам більше семантичного сенсу, дозволяючи комп’ютерним програмам краще розуміти ваш контент.

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

Елемент main

Елемент main повинен містити основний контент вашої веб-сторінки. Йому слід бути єдиним у своєму роді для окремої сторінки, і він не повинен з’являтися на сайті десь ще. Будь-який контент, повторюваний на декількох сторінках (логотипи, поля пошуку, посилання нижнього колонтитула тощо), поміщати в елемент main не можна.

У наведеному нижче прикладі елемент main застосовується для подання основного вмісту сторінки.

…

Guitars

The greatest guitars ever built.

Gibson SG

…

Fender Telecaster

…

Зауважте: ми застосували тут атрибут ARIA role=”main” для вказівки на значимість цього елемента для програм, які поки не підтримують елемент main (таких як деякі screen reader-и).

На сторінці слід використовувати всього один елемент main, і його не можна розміщувати всередині елементів article, aside, header, footer або nav.

Елемент article

В елементі article повинен міститися фрагмент автономного вмісту, який можна розподіляти поза контекстом сторінки. Воно включає в себе нові статті, пости блогів або коментарі.

Blog Post Title

Posted 13th January 2014

…

Елементи article можна розміщувати один в іншому. У даному випадку мається на увазі, що вкладені елемент пов’язані з зовнішнім елементом article.

Blog Post Title

Posted 13th January 2014

…

…

…

Comments

Posted by: Joe Balochio

This was a great article

Posted by: Casey Brock

How do you think this applies to the plan for world domination?

У даному прикладі ми застосували елементи article для розмітки поста блогу і кожного з коментарів. Така модель передбачає вкладення, що коментарі пов’язані з темою основного посту блогу.

Елемент section

Елемент section використовується для представлення групи пов’язаного вмісту. Він аналогічний елементу article з тим лише відмінністю, що вмісту всередині елемента section не обов’язково мати сенс поза контексту сторінки.

Для визначення теми розділу радимо користуватися елементом заголовків h1 – h6).

Скористаємося даними постом блогу як приклад: можна взяти елементи section, що представляють всередині поста кожен розділ окремо.

How to use HTML5 Sectioning Elements

…

The Element

…

The Element

…

The Element

…

…

Тут ми застосували елемент article, щоб представити пост як одне ціле, а потім безліччю елементів section, щоб уявити кожен з обговорюваних в пості підрозділів. Якщо вам потрібно просто згрупувати вміст з метою призначення йому стилів, вам слід скористатися елементом div, а не section.

Елемент nav

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

• Chapter One
• Chapter Two
• Chapter Three

Розмітка посилань усередині списку помітно полегшує використання навігації, однак не є необхідною умовою використання елемента nav.

Елемент aside

Елемент aside застосовується для представлення вмісту, чітко пов’язаного з навколишнім його контентом, але яке можна вважати окремим. Це включає бічні колонки (такі, як можна бачити в книзі), групи елементів nav, цифрові дані і витягнуті цитати.

Google Buys Nest

Posted at 11:34am 13th January 2014

…

…

Google (GOOG)

Google була заснована в 1998 by Larry Page and Sergey Brin. The company…

У цьому прикладі для розмітки інформації про Google всередині новинний статті ми скористалися елементом aside. Користувач може вважати інформацію про компанії в aside корисною, але з новинами вона безпосередньо не пов’язана.

Елемент header

Елемент header застосовується для подання вступного вмісту до статті або веб-сторінки. Зазвичай він містить елемент заголовка, а також істотні для вмісту метадані, такі як дата поста або новинний статті, наприклад. В ньому також може міститися зміст (в елементі nav) більш довгого документа.

Елемент header буде пов’язаний з найближчим елементом секціонування, зазвичай це прямий батьківський елемент сторінкової структури.

Google buys Nest

Posted at 11:34am 13th January 2014

В даному прикладі елемент header містить назву та дату новинний статті.

Елемент footer

Елемент footer використовується для представлення інформації про розподіл: автор, копірайт або посилання на відповідні веб-сторінки.

Copyright Matt West 2014

Як і у випадку з header, елемент footer зв’язується з найближчим елементом секціонування.

Елемент address

Елемент address — один з найбільш оманливих елементів HTML. Він призначений не для розмітки поштової адреси, а для подання контактної інформації статті або веб-сторінки. Це може бути посилання на сайт автора або його електронну адресу.

Contact Matt West

Цей елемент часто використовується всередині footer для article.

Google buys Nest

Posted at 11:34am 13th January 2014

…

…

By Matt West

Copyright Matt West 2014

Останні роздуми про елементи секціонування

З цього поста ви дізналися, як користуватися елементами секціонування HTML5 при розмітки веб-сторінок. Їх застосування гарантує масу переваг. Одне з основних – передача певних областях сторінки більш семантичного значення, створення можливості для комп’ютерних програм ідентифікувати ключові елементи, такі як основний контент і сторінкова навігація. Ця інформація надзвичайно важлива для таких додатків, як screen reader-и.

Зверніть увагу: не всі скринридеры поки що можуть похвалитися підтримкою цих семантичних елементів. Для безпеки вам, можливо, доведеться продовжити користуватися ролями ARIA.

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

Мені цікаво дізнатися, що ви думаєте про елементи секціонування HTML5. Поділіться своїми враженнями в розділі коментарів під постом.