1. елемент header
2. елемент section
3. Зауваження: правильне використання section
4. елемент article
5. елемент nav
6. Зауваження: посилання skip navigation
7. Зауваження: юзер агенти
8. елемент aside
9. елемент footer
10. Зауваження: як ми дійшли до того, що у нас є?

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

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

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

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

панель меню;

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

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

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

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

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

елемент header

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

Всупереч вашу думку новий тег header можна вставляти в будь-яку секцію з контентом. Він використовується не тільки для хедера сторінки (який ви по-старому могли розмічати <div id = "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 являє собою повноцінну, самодостатню композицію в документі, сторінці, додатку або сайті. По суті, даний тег незалежний і повторно використовуваний, наприклад, при агрегації. »

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

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

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

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

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

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

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

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

елемент nav

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

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

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

На безлічі сайтів ви могли бачити дизайнерський шаблон «skip navigation». Ідея полягає в тому, щоб дозволити користувачам з обмеженими можливостями, які використовують скрін рідери, пропускати ті пункти меню, про які вони вже чули. Немає сенсу слухати все меню заново після кожного кліка на нову сторінку! Тег 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 замість <div id = "footer">.

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

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

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

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

Редакція: Louis Lazaris

джерело: https://www.sitepoint.com/

Редакція: Команда webformyself.

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3