додому Верстка HTML5 Визначаємо структуру сторінок примірного сайту

Визначаємо структуру сторінок примірного сайту

34

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

Почнемо зверху, з тега header. В хедер можна помістити логотип і назву сайту «The Herald», а також слоган. Також можна додати меню nav.

Після хедера основний контент нашого сайту розбивається на три колонки. Ви можете використовувати теги section для колонок, але краще зупиніться і подумайте про контент. Якщо у колонках будуть окремі «секції» з інформацією (колонка про спорт, розваги), то можна було б і використовувати тег section. А у нас поділ на колонки тільки візуальне, тому ми візьмемо звичайний старий div.

Всередині блоків div у нас будуть йти статті, і ідеальним кандидатом буде тег article.

У правій крайній колонці крім статей розташовано три блоку з рекламою. Блоки з рекламою будуть розташовуватися в тегах article і обертатися в aside. Такий підхід може здатися дивним, але згадайте опис тега article: «самодостатня композиція […], яка, в принципі, незалежна і повторно використовувана». І рекламний блок майже ідеально підходить під опис, так як зазвичай він повинен розміщуватися на різних сайтах без модифікацій.

Далі, ми додамо ще один тег article для останньої статті, яка буде розташовуватися під рекламою. Остання стаття не буде входити в тег aside, який містить три рекламних блоку. Тег article повинен бути побічно пов’язаний з контентом сторінки, щоб належати aside. В нашому випадку це не так: ця стаття є частиною основного вмісту сторінки. Було б неправильно включати її в aside.

На даний момент третя колонка містить два елементи один над одним: aside і article. Щоб скріпити їх і спростити стилізацію, ми обернем їх в тег div. Ми не будемо використовувати section і іншу семантичну розмітку, так як це означало б, що article і aside якимось чином тематично пов’язані. Ці блоки не пов’язані – це просто елементи нашого дизайну, які розташовані в одній колонці.

Новий елемент main

Зараз потрібно представити ще один основний структурний елемент, який з’явився в HTML5 – тег main. Спочатку цей елемент не входив до специфікації HTML5, але був туди доданий після виходу першого видання цієї книги.

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

Зверніть увагу, що загальний тег div тут використовується нарівні з header і footer. Також погляньте на ID атрибут зі значенням main. Також безліч розробників додавали ARIA роль до цього тегу:

Ми не будемо заглиблюватися в ARIA, ця тема розібрана в Додатку B. Однак новий тег main повинен замінити цю практику.

W3C визначає main наступним чином: «тег main являє собою головний контент тіла документа або додатка. Основна область контенту містить контент, який безпосередньо відноситься або розширює центральну тему документа або функціонал програми».

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

Це повністю суперечить специфікації W3C:

«Автори не повинні використовувати більше одного тега main в документі. Не можна використовувати тег main в якості дочірнього елемента для article, aside, footer, header або nav.»

Також W3C специфікація рекомендує використовувати атрибут role=»main» в тезі main, поки він не буде повністю розпізнаватися в браузерах. Ми скористаємося порадами W3C і будемо використовувати тег main на сторінці, а також ARIA роль в якості фолбэка.

Повернемося до розмітки нашого сайту, ось так вона буде виглядати після додавання main у body:


Як бачите, main не входить в header і footer. В теге main будуть розташовуватися наші три колонки, які будуть складати головну частину макету та вмісту сайту The HTML5 Herald.

Продовжуємо структурувати сайт The Herald

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

Давайте додамо нові елементи на сторінку, щоб подивитися, що вийде:

На скріншоті нижче показана сторінка з підписами основних використаних структурних елементів.

Определяем структуру страниц примерного сайта

Ми отримали структуру, яка послужить надійною опорою для контенту нашого сайту.

Зауваження: а що якщо я використовую не ті елементи?

Іноді буває складно запам’ятати, який елемент використовувати в певній ситуації. Рекомендуємо не морочитися і не сидіти довго, думаючи про семантику. Добре бути послідовним, але в неправильного вибору елементів є кілька наслідків. Якщо ваші сторінки доступні, потрібно думати саме про це. Звичайно, є випадки, коли семантично правильні елементи підвищують доступність, тому рекомендуємо вам вивчити це питання і бути впевненими у тому, що обрані елементи не знизять доступність ваших сторінок. Почати можна з HTML5 Accessibility і The Accessibility Project.

Висновок

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

У наступному розділі ми більш детально розберемо HTML5 контент і продовжимо додавати семантику на нашу сторінку з допомогою інших HTML5 елементів.