—»     —»   HTML5 для новичков: знакомимся с основными элементами «header», «nav» и «footer»
  Раздел: Руководства   Нет комментариев  

HTML5 для новичков: знакомимся с основными элементами «header», «nav» и «footer»



HTML5-разработка еще пока не раскрыла весь свой потенциал. Но сегодня мы уже можем использовать несколько HTML5-элементов (тэгов), которые поддерживаются даже в старых версиях браузеров, а именно: header, nav и footer. Вы, вероятно, уже встречали эти элементы в различных HTML5-руководствах, но не пытались их изучить.

HTML5 для новичков: знакомимся с основными элементами «header», «nav» и «footer»

Нам кажется, что пришло время разведать эти новые элементы, и узнать, для чего же мы используем эти элементы. Данная статья – это лишь часть из нашей серии статей, посвященной новым захватывающим свойствам HTML5.

Элемент (тэг) «header»

Новые HTML5-элементы, к счастью, имеет вполне логичные названия и, если следовать спецификации, элемент header – это «группа вводных и навигационных элементов». (Лично мы считаем, что лучше использовать описания из официальных и достоверных источников, так как зачастую значения могут искажать).

Следуя описанию выше, мы можем сделать вывод о том, что элемент header предназначен не только для того, чтобы служить шапкой страницы. Элемент header также можно использовать для определения части (вверху страницы), которая представляет раздел, который следует далее.

К примеру, в следующем отрывке кода, мы поместили элемент header в самый верх контента, чтобы обернуть им заголовок и meta-данные к записи:

<header>
<h1>This is the Title of the Content</h1>
<div class="post-meta">
<p>By Author</a> <span class="category">Filed in Web 2.0</span></p>
</div>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id
felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue
ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa.
Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>

Так как заголовок и мета-данные, в данном примере, размещены в самом верху и служат в качестве введения к содержимому записи, мы можем обернуть их в элемент header.

Элемент (тэг) «nav»

Элемент nav отвечает за навигацию. Следуя спецификации, этот элемент представляет собой «раздел страницы, где расположены ссылки на другие страницы и части сайта, - раздел с навигационными ссылками».

Хотя этот элемент определенно использован для навигации, его использование не ограничено только лишь основной навигацией, размещенной в самом верху страницы. Из официального описания, приведенного выше, мы можем сделать вывод, что элемент nav также может быть использован в любой части страницы, которая выступает в качестве навигации. Посмотрим пример:

<h4>Table of Content</h4>
<nav>
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#history">History</a></li>
<li><a href="#development">Development</a></li>
<ul>
</nav>

В данном примере мы использовали элемент nav для того, чтобы обернуть Table of Content (Содержание), где ссылки ведут на ту же страницу.

Элемент (тэг) «footer»

Еще один широко применимый элемент – footer. В основном, мы расцениваем footer как раздел, расположенный в самом низу страницы, но давайте взглянем на официальную спецификацию с описанием элемента: «Элемент footer представляет собой подвал ближайшего раздела с контентом. Footer содержит информацию о данном разделе: автора контента, ссылки на сопроводительные документы, авторское право и прочее».

Это немного смущает, поэтому давайте упростим немного.

Подвал, следуя логике, должен быть расположен в самом низу. Но так как спецификация не указала нам, что этот элемент должен использоваться только в качестве подвала, мы можем предположить, что мы можем использовать элемент footer и в конце каждого раздела. Давайте посмотрим на примере:

<div>
<header>
<h1>This is the Title of the Content</h1>
<div class="post-meta">
<p>By Author</a> <span class="category">Filed in Web 2.0</span></p>
</div>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id
felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue
ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa.
Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>
<footer>
<div class="tags">
<span class="tags-title">Tags:</span> <a href="#" rel="tag">Command Prompt</a>, <a href="#" rel="tag">Compass</a>, <a href="#" rel="tag">CSS</a>, <a href="#" rel="tag">Sass</a>, <a href="#" rel="tag">Terminal</a>
</div>
<div class="facebook-like">
<div>10 likes</div> <!-- let's pretend it to be the facebook like -->
</div>
</footer>
</div>

В данном примере мы задали нашей записи дополнительный элемент footer, который содержит тэги к записи и метки «Мне нравится».

Подытожим

header, nav и footer, возможно, и не выполняют всяких интересных штук, как это делают другие новые HTML5-элементы, однако эти элементы разработаны специально для того, чтобы мы могли делать более логически структурированные сайты, понятные как браузерам, так и людям. Именно этого и хотел добиться первооткрыватель WWW, Тим Бернерс-Ли.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 8077   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31