Блоки в HTML
85
посл. ред.
07.07.2016
Почти все сайты в интернете имеют схожую структуру. Их можно разбить на крупные блоки:
- Верхняя часть (
шапка
). - Главное меню сайта.
- Центральная часть.
- Нижняя часть (
подвал
).
До появления HTML 5 все блоки создавались с помощью тега <div>
. Получалось многоуровневое вложение div
-ов. Это очень затрудняло восприятие кода при разметке сложных страниц.
Для улучшения восприятия кода при создании сайтов и лучшей индексации поиковыми машинами используются теги уровня блоков. Основные используемые теги:
Тег | Описание |
---|---|
<article> |
Представляет самостоятельную часть страницы или приложения. Можно использовать для выделения основной статьи или блока с комментариями. |
<section> |
Элемент страницы, являющийся частью более общего элемента. Используется для выделения отдельных глав статьи или вкладок страницы. |
<nav> |
Элемент страницы с навигацией по сайту или с ссылками на другие ресурсы. |
<aside> |
Часть страницы, которая не относится к основному содержанию страницы. Например, колонка с рекламными баннерами. |
<header> |
Верхняя часть страницы или отдельного элемента страницы. Например, логотип организации или основное меню сайта. |
<footer> |
Нижняя часть страницы или отдельного элемента страницы. Например, информация о сайте или контакты. |
<address> |
Контактные данные, относящиеся ко всей странице или отдельной части статьи. |
Раньше для создания структуры страницы использовались глобальные атрибуты id
и class
:
<!-- Шапка --> <div id="header"> <div id="logo"><!-- Логотип --></div> <div id="menu"><!-- Основное меню --></div> </div> <!-- Рекламный блок --> <div id="sidebar"></div> <!-- Основная статья --> <div id="article"> <div class="section"><!-- Глава статьи --></div> <div class="section"><!-- Глава статьи --></div> </div> <!-- Подвал --> <div id="footer"></div>
Сейчас структура задается отдельными тегами, имеющими смысловое значение:
<!-- Шапка --> <header> <address><!-- Логотип --></address> <nav><!-- Основное меню --></nav> </header> <!-- Рекламный блок --> <aside></aside> <!-- Основная статья --> <article> <section><!-- Глава статьи --></section> <section><!-- Глава статьи --></section> </article> <!-- Подвал --> <footer></footer>