Заглавие и долен колонтитул
Чрез двата елемента 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) от PSD-Tutorials.de
</footer>
</section>
Резултатната структура изглежда по следния начин:
1. Секция (Инсталация и конфигурация)
1.1 Секция (Инсталация)
1.2 Секция (Конфигурация)
1.3 Секция (встранишен)
- Секция (футър)
И още един пример:
<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 обаче се пропускат.
Моля, имайте предвид, че моментно контурната концепция все още не се поддържа от браузърите.
Все пак, би било само въпрос на време, докато производителите на браузъри реагират. Предимствата на контурната концепция са твърде големи. Мислете за автоматично генерирани навигационни ленти. Но също така помислете: дори ако структурирането по посочения начин от браузърите понастоящем се игнорира, вече трябва да се опитвате да структурирате логично документите си. Така ще получите и сигурност за бъдещето на вашите уебсайтове.
