Як використовувати секційні елементи в html5.

Як використовувати секційні елементи в HTML5.

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

Main

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

Приклад використання тега main нижче.



id="Logo"gt;Rocking Stone
...

role="Main"gt;

The greatest guitars ever built.


Gibson SG
...



Fender Telecaster
...


Замітка! Ми використовували атрибут role = `main` для програм, які ще не підтримують тег main.

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

Article

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




Posted 13th February 2014


...

Ви можете вкладати елементи article в один одного. В такому випадку мається на увазі, що вкладені елементи пов`язані з зовнішнім елементом article.




Posted 13th February 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

Даний елемент використовується для представлення групи пов`язаного вмісту. Він дуже схожий на елемент article, однак відмінність в тому, що зміст в section не обов`язково дожно мати сенс з контекстом сторінки.




Бажано використовувати елементи заголовка, щоб визначити тему для розділу. Використання поста блогу в якості прикладу, ви могли використовувати елементи section, які представляють кожну з окремих частин в межах поста.



...


The
Element
...


The Element
...


The Element
...

...

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

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

Nav

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



href="# Chapter-one"gt;Chapter One
href="# Chapter-two"gt;Chapter Two
href="# Chapter-three"gt;Chapter Three




Використання списків для створення навігації часто робить її простіше, однак це не обов`язкова вимога при використанні елемента nav.

Aside

Цей елемент використовується для того, щоб визначити контент, який пов`язаний з тим, що навколо нього, однак може бути відділений від нього. Наприклад, сайдбар, групи елементів nav і т.п.




Posted at 11:34 am 13th January 2014

...
...



Google was founded in 1 998 by Larry Page and Sergey Brin. The company ...

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

Header

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

Відео: HTML5 уроки для початківців | # 15 - Використання textarea і тега button

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



Posted at 11:34 am 13th January 2014

У цьому прикладі елемент header містить заголовок і дату публікації новинної статті.

Відео: HTML5 для початківців | # 11 Створення HTML-списків

Footer

Містить такі елементи, як автор, інформацію про права або посилання, пов`язані зі сторінкою.


Copyright Matt West 2014

Також, як і елемент header, елемент footer пов`язаний з найближчим елементом section.

Address

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


Contact
href="Mailto: [email protected]"gt;Matt West

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




Posted at 11:34 am 13th January 2014

...
...


By
href="Mailto: [email protected]"gt;Matt West

Copyright Matt West 2014

Заключні думки з приводу секційних елементів

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

Відео: Уроки по CSS / CSS3. Частина 4. Позиціонування елементів

Замітка! Не всі рідери підтримують сучасні HTML5 теги, тому використовуйте атрибут role, якщо вам потрібна їхня підтримка.

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

Поділися в соціальних мережах:

Схожі
HtmlHtml
Html 5 структурні елементиHtml 5 структурні елементи
Використання тега optgroup в htmlВикористання тега optgroup в html
Html 5 матеріалів мультимедіаHtml 5 матеріалів мультимедіа
Gulp. Спостереження за змінами в файлах.Gulp. Спостереження за змінами в файлах.
Як притиснути футер до низуЯк притиснути футер до низу
Вивчаємо sass. Математичні операції.Вивчаємо sass. Математичні операції.
Як зробити індикатор прокрутки на css3.Як зробити індикатор прокрутки на css3.
Вивчаємо sass. Розширення батьківського селектора.Вивчаємо sass. Розширення батьківського селектора.
Мета-теги для пошукових систем в htmlМета-теги для пошукових систем в html
» » Як використовувати секційні елементи в html5.