Головка та підвал
За допомогою двох елементів header та footer можна визначити головку та підвал. Для визначення головки використовується елемент head. До речі, це не обов’язково повинна бути головка всієї сторінки. Також можна використовувати head для визначення головки інших елементів, наприклад, секцій та статей.
Увага: Не плутайте header з відомим елементом head, через який визначається головка HTML-документів, в якій міститься назва документу, виклики таблиць стилів та JavaScript.
Для всього документу використання header виглядало б так:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Застосовуючи до елемента section, ми отримаємо такий вигляд:
<section>
<header>
<h1> Створення веб-додатків (Частина 09): jQuery mobile (1)</h1>
<p> jQuery, безперечно, є одним з найвідоміших фреймворків JavaScript.</p>
</header>
<p>
Таким чином, для «класичних» веб-сайтів було використане jQuery тисячі разів. Спеціально для застосування в веб-додатках був створений сестринський фреймворк jQuery mobile (jQM). Цей фреймворк допомагає вам швидко зробити ваш веб-додаток виглядати як справжній додаток. Достатньо причин поглянути на jQM докладніше.
</p>
<footer>
<p> Copyright by PSD-Tutorials.de</p>
</footer>
</section>Запам'ятайте, що footer та header не повинні містити жодних додаткових елементів header та footer.
Групування заголовків
У контексті секцій важливий роль відіграють заголовки. Ці заголовки можуть бути класичним елементом від h1 до h6. Але в HTML5 також допускається елемент hgroup. У межах цих елементів hgroup можуть бути розташовані кілька заголовків.
Спочатку розгляньте класичний HTML-документ, в якому "звичайна" структура визначена за допомогою елементів hx.
<h1>
Книга
</h1>
<h2>
Розділ 1
</h2>
<h2>
Розділ 2
</h2>
<h3>
Підрозділ 2.1
</h3>
<h3>
Підрозділ 2.2
</h3>
<h2>
Розділ 3
</h2>
Це визначення означає наступну структуру:
Книга
Розділ 1
Розділ 2
Підрозділ 2.1
Підрозділ 2.2
Розділ 3
Проте у браузері заголовки не будуть відступати.
Елемент hgroup особливо цікавий у контексті журналістських текстів. Вони часто складаються з двох частин заголовка, які складаються з основної рядка та додаткової рядка. Приклад цього аспекту.
<hgroup> <h1>Cloud OS</h1> <h2>Веб як операційна система</h2> </hgroup> <p>Тут починається зміст статті …</p>
На цьому прикладі добре видно, що додаткова рядка не розпочинає окремого розділу всередині статті. Замість цього це частина заголовка статті. Точно таку саму ідею можна узагальнити за допомогою елементу hgroup.
У межах hgroup дозволені елементи від h1 до h6.
Концепція контурів
До HTML5 також включається концепція контурів, в якій поєднуються елементи section з різноманітними елементами hx. У цій концепції, як і раніше, заголовки поділяються на різні рівні за допомогою елементів h1 до h6. При цьому h1 відповідає найвищому рівню, а h6 представляє найнижчий рівень. Тут немає змін порівняно з попереднім. Оскільки зараз елементи hx можуть бути визначені всередині елементів section. І кожний раз при цьому пронумеровується по-новому, але завжди на один рівень нижче.
Концепція контурів в HTML5-специфікації може здатися складною, але ідея за її основою дуже проста. Фактично, за її допомогою можна визначити зміст, який робить структуру документа зрозумілою для машин.
Також покажемо приклад:
<h1>
Розділ 1
</h1>
<section>
<h1>
Розділ 2
</h1>
<section>
<h1>
Розділ 3
</h1>
</section>
</section>
Завдяки концепції аутлайну в HTML5 виходить така структура:
1. Розділ 1
- Розділ 2
- Розділ 3
- Розділ 3
Ще один приклад підкреслить цей ефект. Тут також спершу вихідний документ.
<section>
<h1>Інсталяція та конфігурація</h1>
<section>
<h2>Інсталяція</h2>
<p>Все що стосується інсталяції
</section> <section>
<h2>Конфігурація</h2>
<p>Тут ви знайдете все що стосується конфігурації
</section>
<aside>
<p>Цікаві книги на тему...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
Ось яку структуру ми отримуємо в результаті:
1. Розділ (Інсталяція та конфігурація)
1.1 Розділ (Інсталяція)
1.2 Розділ (Конфігурація)
1.3 Розділ (aside)
- Розділ (footer)
І ще один приклад:
<body>
<h1>Інсталяція та конфігурація</h1>
<h2>Інсталяція</h2>
<p>Все що стосується інсталяції
...більше вмісту...
<section>
<h3>Попередні вимоги</h3>
<p>Все що стосується попередніх вимог до інсталяції
...більше вмісту...
<h3>Підготовка</h3>
<p>Все що стосується підготовки
...більше вмісту...
<h2>Конфігурація</h2>
<p>Все що стосується конфігурації
...більше вмісту...
</section>
</body>
Отримана структура виглядає наступним чином:
1. Інсталяція та конфігурація
1.1 Інсталяція
1.1.1 Попередні вимоги
1.1.2 Підготовка
1.2 Конфігурація
Внутрішнє нумерування починається тут знову з 1. З концепції аутлайну це стосується тільки цих елементів:
• article
• aside
• nav
• section
Однак елементи header та footer залишаються поза увагою.
Зверніть увагу, що в даний момент концепція аутлайну ще не підтримується браузерами.
Однак це лише питання часу, коли виробники браузерів проведуть необхідні зміни. Вигоди від концепції аутлайну надзвичайно великі. Наприклад, автоматично згенеровані навігаційні панелі. Але так чи інакше: навіть якщо браузери на даний момент ігнорують структурування у зазначеній формі, вам вже зараз варто спробувати логічно структурувати свої документи. Це дозволить вам забезпечити певну майбутню стійкість для ваших веб-сайтів.
