Структурні елементи сторінки

Набір структурних елементів HTML5 викликає багато питань у початківців верстальників. У чому відмінність між <article> та <section>? Коли потрібно використовувати <main>, а коли <article>? Що розмістити в <aside>? Чи можна додавати <section> в <footer>? Замість спрощення роботи та кодування, ці елементи лише заплутують. Здається, є специфікація HTML, до якої потрібно звертатися за спірними питаннями. Проте проблема полягає в тому, що текст специфікації можна трактувати по-різному, тому на форумах часто відбуваються словесні баталії, кожен захищає свою протилежну позицію.

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

• «шапка»;
• «підвал»;
• навігація;
• стаття;
• бічна панель;
• розділ.

«Шапка»

Зазвичай розташовується угорі веб-сторінки, містить назву сайту, головне меню, форму пошуку.

«Підвал»

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

Навігація

Це головне меню сайту, посилання для переходу до основних розділів сайту.

Стаття

Плаский текст з назвою, вмістом, датою публікації, ім'ям автора.

Бічна панель

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

Розділ

Розділ — це основна структурна одиниця при поділі сайту на блоки. В основному, розділ містить заголовок та вміст, але може обійтися і без заголовка як, наприклад, з рекламним блоком.

Приблизно визначили, з чого складається будь-який сайт і тепер згадаємо, які елементи для них є в HTML5:

• <main>
• <header>
• <footer>
• <section>
• <nav>
• <article>
• <aside>

<main>

Це елемент, всередині якого розташовується унікальний головний вміст веб-сторінки. Є деякі правила щодо використання <main>:

<main> в коді повинен бути один екземпляр;
<main> не повинен містити повторювані елементи від сторінки до сторінки, наприклад, логотип, назву сайту, банери тощо;
<main> не впливає на схему документа;
<main> не можна вставляти всередину <article>, <aside>, <footer>, <header> або <nav>.

Головним чином використовується як обгортка для статті з заголовком, ім'ям автора, датою публікації, коментарями.

<header>

Використовується для «шапки» сайту, переважно. Але ця роль не обмежується тим, що в коді може бути кілька елементів <header>. Тому його можна вставляти як заголовки розділів, наприклад, статті.

<footer>

Використовується для «підвала». Як і в випадку з <header> це може бути «підвал» сайту або «підвал» статті.

<section>

Розділ документа або іншими словами, вміст, згрупований за якимось принципом. <section> є типовим елементом для розбиття вмісту веб-сторінки на тематичні блоки. Фактично, інші елементи, такі як <nav>, <article>, <aside>, є певними випадками <section>.

<nav>

Використовується для навігації по сайту і містить посилання для переходу на інші веб-сторінки. <nav> використовується не для всіх блоків посилань, а лише для найважливіших, такий блок, як правило, на сторінці один. Навіть якщо у вас навігація дублюється знизу сторінки, в <nav> додається лише перший, більш важливий блок.

<article>

Закінчена одиниця вмісту, така як запис блогу, повідомлення форуму, стаття, коментар користувача.

<aside>

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

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

Наступного разу розглянемо, як ці елементи використовувати на практиці.