Від автора: я знову вітаю вас на блозі webformyself. А може ви тут вперше. Сьогодні ми розглянемо, з чого складається структура html5 сторінки і як вона змінилася з виходом цієї нової специфікації.

Як змінилася структура

Насамперед, я хотів би сказати, що до появи html5 явною структури як такої взагалі не існувало. Як версталися всі шаблони? У більшості випадків використовувався метод блокової верстки, став сьогодні стандартним. В якості контейнерів для елементів використовувалися звичайні div з різними ідентифікаторами.

Наприклад, шапка зазвичай позначалася як div id header, блок з основною інформацією називали main або content, бічна колонка отримала ідентифікатор sidebar.

Загалом-то, дуже мало розробників, які вибирали інші імена класів або унікальних міток. Справді, що може бути більш зрозумілим і правильним позначенням бічної колонки, ніж слово sidebar? Його розуміють навіть люди, дуже мало знайомі з англійською.

У зв’язку з цим, в html5 назрівало поява нових елементів – семантичних блоків, які були покликані замінити звичайні div, надати розмітці більше сенсу.

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

Нові семантичні блоки в розмітці

Варто зазначити, що відповідний тег придумали практично для будь-якого елемента на веб-сторінці. Наприклад, для шапки. За стандартом її завжди робили так: div id = “header”. Тепер потреба у цьому відпала – з’явився контейнер header. Так, це парний тег і в нього поміщається весь вміст шапки.

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

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

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

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

Тепер про меню. Раніше воно теж не мала свого власного, унікального контейнера, який міг би його відрізняти. Воно теж формувалося допомогою div. Природно, для такого важливого елемента на сторінці теж придумали свій тег – nav (navigation). Він теж не обов’язково повинен бути одним на сторінці – на деяких веб-ресурсах можна спостерігати кілька різних меню і все ж за своїм змістом в нього рекомендується укладати найважливіші посилання на сторінці.

Ви, напевно, помічали, як сильно може відрізнятися основний вміст від того, що показується в боковій колонці? Якщо подумати, то це взагалі різні секції шаблону. Ось саме – секції! Напевно подібним чином думали і розробники специфікації html5, тому вони створили тег – section. Його загальний зміст полягає в тому, що він містить в собі частину документа (секцію), в цілому незалежну від інших, у якій може бути свій заголовок і т. д.

Приклад нової розмітки

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

Шапка
Головне меню
Сайдбар

Заголовок

Другорядна інформація про статті
Сама стаття
Підвал

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

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

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

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

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

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