Як правильно використовувати теги div, section і article.

Відео: Уроки по HTML # 8 Структуризація нашого сайту Header, nav, section, aside, footer

Всім привіт! У цій статті ми розглянемо, як правильно використовувати теги div, section і article в HTML5.

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

Div

Якщо ви відкриєте сайт W3C, то можете знайти там рекомендацію, сенс якої полягає в тому, що використовувати даний тег потрібно для семантично незв`язаного між собою контенту. Дуже часто div використовують для того, щоб згрупувати який-небудь контент, який потім потрібно спозиционировать або якось оформити за допомогою css.

Відео: HTML5 - семантичні теги

Section

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

Article

Цей елемент також повинен володіти спільною темою і містити семантично пов`язаний між собою контент, проте цей самий контент повинен бути автономний, тобто ви можете взяти окремий article, прибрати його зі сторінки, але при цьому сенс вмісту всередині нього не загубиться. Все на тому ж прикладі новинного сайту можна сказати, що кожна окрема новина буде виділена тегом article, тому що, якщо ізолювати її зі сторінки, вона не втратить сенс, але все новости разом будуть обрамлені тегом section, тому це окремий великий блок із загальною темою, і він не може бути ізольований. Погодьтеся, якщо ми залишимо на сторінці просто блок з новинами, він буде "не до місця", а якщо залишимо одну конкретну новину, то все буде цілком логічно.

Відео: Що таке атрибути тегів і як їх застосовувати (Основи HTML і CSS)

Звичайно, все залежить від конкретної ситуації, але частіше за все ви можете розмітити свою сторінку правильно, використовуючи наступне правило: якщо контент семантично пов`язаний між собою і може бути ізольований зі сторінки без втрати сенсу, то використовуйте article. Якщо не може бути ізольований зі сторінки без втрати сенсу, використовуйте section. В інших випадках - div.

Отже, на цьому все. Сподіваюся, що дана тема вам ясна і тепер ви будете розмічати ваші інтернет-сторінки грамотно. Дякую за увагу і удачі!