Базова структура HTML5 сторінок

43

Від автора: дана стаття є витягом з книги HTML5 і CSS3 для реального світу, 2-е видання за авторством Алексіса Гольдштейна, Луїса Лазариса і Естель Вейль. Книгу можна знайти в магазинах по всьому світу або купити цифрову версію. Ми розібралися з основою нашого шаблону, тепер давайте приклеїмо м’язи на наш скелет, створимо структуру сторінки.

Далі в книзі ми будемо додавати спеціальні CSS3 властивості і теги HTML5, а зараз ми розберемо елементи, які нам знадобляться для створення макету сайту. У цій і наступних розділах ми будемо багато говорити про семантику. Коли ми згадуємо термін «семантика», ми вказуємо на те, як конкретний HTML елемент описує значення свого контенту.

Якщо повернутися до скріншоту сайту The HTML5 Herald (або подивитися сайт онлайн), можна помітити, що сайт поділений на розділи:

хедер з логотипом і заголовком;

панель меню;

основний контент, розділених на три колонки;

статті і рекламні блоки в колонках;

футер з копірайтом та інформацією про авторів.

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

Елемент header

Звичайно, перший елемент, який ми розглянемо, буде header. Специфікація описує його коротко «група вступних та навігаційних засобів».

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

). Коли ми згадуємо слово «секція», ми не обмежуємося тільки тегом section, про який розповімо в наступному розділі. Ми маємо на увазі те, що в HTML5 називається «секційний контент». Тобто будь-який шматок вмісту, для якого потрібен окремий хедер, навіть якщо таких шматочків на сторінці буде багато.

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

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

Елемент section

Наступний елемент, про який ви, напевно, вже чули – це HTML5 section. У специфікації про section говориться наступне: «Тег section являє собою загальну секцію документа або додатка. Секція в даному контексті є тематичною групою контенту, зазвичай із заголовком.»

Далі пояснюється, що section не слід використовувати в якості контейнера для стилізації або скриптів. Якщо section не можна використовувати в якості загального контейнера (наприклад, для макетування в CSS), то що можна? Наш старий добрий несемантический div.

Повертаючись до визначення специфікації, вміст тега section повинен бути тематичним. Було б неправильно використовувати цей тег в загальних цілях для огортання незв’язних частин контенту.

Кілька прикладів правильного використання section:

окремі секції інтерфейсу вкладок;

сегменти сторінки «Про нас». Наприклад, сторінка про нас компанії може включати секції про історію компанії, її місії та команді;

різні частини довгої сторінки «умови використання»;

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

Зауваження: правильне використання section

Кожен раз, коли виходить новий семантичний елемент, веб-дизайнери починають сперечатися про правильному використанні, про те, що малося на увазі в специфікації і т. д. Можете згадати обговорення навколо правильного використання тега dl у попередніх HTML специфікаціях. Не дивно, що HTML5 теж піддався спорів, зокрема по тегу section. Навіть Bruce Lawson, шанована людина в HTML5, сказав, що раніше неправильно використовував section. Прочитайте пост Брюса, пояснює його помилку. Якщо коротко:

тег section – загальний тег, якщо є більш семантичний тег (article, aside або nav), використовуйте його.

тег section семантичний. Контент всередині нього якимось чином пов’язаний. Якщо ви не можете коротко описати весь контент, який ви хочете помістити у section, краще використовуйте семантично нейтральний контейнер – звичайний div.

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

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

Елемент article

Тег article схожий на section, але є помітні відмінності. Визначення з специфікації: «Тег article являє собою повноцінну, самодостатню композицію в документі, сторінці, додатку або на сайті. По суті, даний тег незалежний і повторно використовується, наприклад, при агрегації.»

Ключові терміни в цьому визначенні – самодостатня композиція і незалежний. Тег section може зберігати контент, який можна згрупувати по темі, а тег article повинен містити один самостійний шматок контенту. Відмінності досить складно зрозуміти, тому якщо сумніваєтеся, спробуйте провести тест на агрегацію: якщо частина контенту можна опублікувати повторно на іншому сайті без модифікацій, або якщо його можна залити оновлення через RSS, або в Twitter і Facebook, то використовуйте article.

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

пост на форумі;

стаття в журналі або газеті;

запис у блозі;

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

Як і section, тег article можна вкладати в інші теги article. Також можна вкладати section у article і навпаки. Все залежить від вашого контенту.

Елемент nav

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

У будь-якому випадку тег nav потрібно використовувати для навігації, це його першочергове призначення. Не варто використовувати nav для короткого списку посилань в футері, наприклад.

Зауваження: посилання navigation skip

На безлічі сайтів ви могли бачити дизайнерський шаблон «navigation skip». Ідея полягає в тому, щоб дозволити користувачам з обмеженими можливостями, які використовують скрін рідери, пропускати ті пункти меню, про яких вони вже чули. Немає сенсу слухати все меню заново після кожного кліка на нову сторінку! Тег nav потенційно може позбавити нас від цієї проблеми. Він дозволить користувачам пропускати меню без додаткової посилання. У специфікації говориться: «юзер агенти (наприклад, скрін рідери), орієнтовані на користувачів, які можуть пропустити первинний рендеринг меню, або які хочуть отримати меню відразу, можуть використовувати цей елемент для визначення вмісту сторінки, який можна пропустити або одержувати за запитом (або обидва)».

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

Зауваження: юзер агенти

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

Тег nav можна використовувати більше одного разу на сторінці. Якщо у вас є головна панель меню на сайті, використовуйте nav. Якщо у вас є другорядний набір посилань, що ведуть на різні частини документа (внутрішні якоря або локальні посилання), їх теж можна обернути в nav.

Як і з section, за правильного використання тега nav, а також за умовами, в яких його можна застосовувати, також ведуться суперечки (як і з footer). Деякі вважають, що цей тег не можна використовувати для посторінкового навігації та хлібних крихт, форми пошуку, яка є первинним засобом навігації по сайту (як на сайті Google).

Тут все залежить тільки від вас, від розробника. Ian Hickson, головний редактор специфікації HTML5 WHATWG на питання відповів прямо: «використовуйте цей тег там, де ви б використовували class=nav».

Елемент aside

Цей тег представляє частину сторінки, яка побічно пов’язана з контентом навколо тега aside, і яку можна розглядати окремо від цього контенту».

Тег aside можна використовувати в якості контейнера для контенту, який побічно пов’язаний:

з певними незалежними частинами контенту (наприклад, article або section);

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

Тег aside не можна використовувати в якості контейнера для секцій сторінки, які належать до первинного вмісту. Іншими словами, тег aside не вступ. Контент aside може бути сам по собі, але в той же час залишатися частиною чогось більшого.

Тег aside можна використовувати для сайдбара, вторинного списку посилань або для створення блоку з рекламою. Варто також відзначити, що aside можна розміщувати в будь-якому місці сторінки (як і header). Він може бути збоку, та де завгодно. Тут важливий контент і його зв’язок з іншими елементами.

Елемент footer

Останній елемент, який ми розберемо в цій главі – footer. Як і header, тег footer можна використовувати кілька разів на сторінці. Використовуйте замість footer

.

Специфікація каже, що тег footer являє собою футер секції контенту для найближчого батьківського блоку. Секцією контенту може виступати весь документ, section, article або тег aside.

Часто в footer поміщають копірайт, список посилань, інформацію про автора та іншу інформацію, яку ви будете шукати в кінці блоку контентом. Як і aside і header, тег footer не пов’язаний положення на сторінці. Його можна розміщувати не тільки у кінці секції або сторінки. В більшості випадків це буде саме так, але не завжди. Наприклад, інформація про автора поста в блозі може розташовуватися зверху, а не знизу, але вона вважатиметься інформацією з футера.

Зауваження: як ми дійшли до того, що у нас є?

Якщо вам цікаво, який шлях проробив HTML5, і як ми прийшли до цих тегам, прочитайте книгу Luke Stevens правда про HTML5. Зараз вийшло друге видання книги, і воно досить спірне. Крім освітлення безлічі HTML5 технологій, таких як відео і canvas, він також докладно розповідає історію HTML5. Автор розповідає про проблеми семантики і доступності, які є у нових елементів, а також дає поради щодо вирішення цих проблем.