Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML

HTML: Семантическая верстка

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

Для начала, чтобы было понятнее, как используются эти элементы, предлагаем вам изучить один из возможных макетов страницы:

<header>

<nav>

<h3>

<aside>

<section>

<h1>Заголовок</h1>

<article>

<footer>

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

Предлагаем немного подробнее рассмотреть элементы, которые были использованы в макете:

<section>

Тег <section> определяет раздел страницы, в котором размещается логически связанная информация, как правило, имеющая свой заголовок.

Каждый раздел может иметь свои собственные теги <header> и <footer>, включающие в себя свои собственные заголовки.

<header>

Тег <header> определяет верхнюю часть страницы или элемента. Он может содержать заголовки, но это не является обязательным. Есть лишь одно ограничение использования <header> он не должен содержать сам себя и элемент <footer>.

<nav>

Для создания меню навигации не веб-странице в HTML5 был добавлен тег <nav>. Он предназначен для содержания гиперссылок, ведущих на другие страницы или другую часть документа.

<article>

Тег <article> используется для разделения раздела страницы на логические блоки, блок должен быть связан с общим разделом, но иметь свой собственный смысл и быть отдельной логической единицей страницы.

<aside>

Для создания небольшой области на странице, в стороне от общего содержимого, используется тег <aside>. Он нужен для вынесения информации в отдельный блок, его содержимое обычно не относится к основной теме страницы, а лишь дает дополнительную информацию, к какой-либо ее части.

<footer>

Тег <footer> используется для определения нижнего колонтитула страницы или элемента. Он не может содержать в себе <header> и определять у себя нижний колонтитул.

Использование новых тегов

Хотя новые HTML-элементы можно использовать уже сейчас, они не всегда будут понятны старым версиям браузеров. В старых браузерах новые HTML-теги, используемые для семантической разметки, не поддерживаются должным образом и могут быть отображены в качестве строчных элементов. Для устранения этой проблемы нужно будет явно указать, что они являются блочными элементами:

<style>
  section, header, nav, article, aside, footer { display: block; }
</style>

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

К сожалению представленный CSS-код не сможет помочь браузеру Internet Explorer 8 и его более ранним версиям корректно отображать семантические элементы. Для корректной обработки новых семантических элементов во всех старых версиях IE нам придется прибегнуть к помощи JavaScript. Просто добавьте следующий код в элемент <head>, и старые версии IE будут корректно обрабатывать новые элементы:

<script>
  document.createElement("section");
  document.createElement("header");
  document.createElement("nav");
  document.createElement("article");
  document.createElement("aside");
  document.createElement("footer");
</script>
    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь