HTML5 Семантические элементы

Семантика = Значение

Семантические элементы = Элементы со значением

Что такое семантические элементы?

Семантический элемент чётко описывает своё значение как для браузера, так и для разработчика.

Примеры несемантическихэлементов: <div> и <span> - ничего не говорят о своём содержимом.

Примеры семантическихэлементов: <form>, <table> и <img> - чётко определяют своё содержимое.

Поддержка браузеров

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari и Opera поддерживают семантические элементы.

Примечание:Internet Explorer 8 и более ранние версии не поддерживают эти элементы. Однако внизу статьи приведено решение для совместимости.

Новые семантические элементы в HTML5

Многие существующие сайты содержат HTML-код, например: <div id="nav">, <div class="header"> или <div id="footer">, чтобы обозначить навигационные ссылки, заголовки и нижние колонтитулы.

HTML5 предоставляет новые семантические элементы для четкого определения различных частей веб-страницы:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

Элемент <section> в HTML5

Тег <section> определяет раздел (секцию, сегмент) в документе. Например, главы, заголовки, нижние колонтитулы или другие части документа.

Согласно документации W3C HTML5: раздел содержит группу контента и его заголовок.

Пример

<section> <h1>WWF</h1> <p>Всемирный фонд дикой природы (WWF) — это....</p> </section>

Попробуйте сами »

Элемент <article> в HTML5

Тег <article> определяет независимый контент.

Примеры использования элемента <article>:

  • Сообщение на форуме
  • Запись в блоге
  • Новость
  • Комментарий

Пример

<статья> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9 (сокращённо IE9) был выпущен 14 марта 2011 года в 21:00.</p> </article>

Попробуйте сами »

Элемент <nav> HTML5

Тег <nav> определяет раздел навигационных ссылок.

Элемент <nav> используется для определения раздела навигационных ссылок страницы. Однако не все ссылки должны находиться внутри элемента <nav>!

Пример

<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>

Попробуйте сами »

Элемент <aside> HTML5

Тег <aside> определяет содержимое за пределами основной области содержимого страницы (например, боковой панели).

Содержимое тега aside должно быть связано с содержимым основной области.

Пример

<p>Моя семья и я посетили центр Epcot этим летом.</p> <aside> <h4>Epcot Center</h4> <p>Epcot Center — это тематический парк в Disney World, Флорида.</p> </aside>

Попробуйте сами »

Элемент <header> в HTML5

Элемент <header> описывает область заголовка документа.

Элемент <header> в основном используется для определения вводной области отображения содержимого.

На странице можно использовать несколько элементов <header>.

В следующем примере определяется заголовок статьи:

Пример

<article> <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> <p>Windows Internet Explorer 9 (сокращённо IE9) был выпущен 14 марта 2011 года в 21:00.</p> </article>

Попробуйте сами »

Элемент <footer> HTML5

Элемент <footer> описывает нижнюю область документа.

Элемент <footer> должен содержать информацию о содержащем его элементе.

Футер обычно содержит информацию об авторе документа, информацию об авторских правах, ссылки на условия использования, контактную информацию и т. д.

В документе можно использовать несколько элементов <footer>.

Пример

<footer> <p>Опубликовано: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer>

Попробуйте сами »

Элементы <figure> и <figcaption> HTML5

Тег <figure> задает независимый потоковый контент (изображения, диаграммы, фотографии, код и т. д.).

Содержимое элемента <figure> должно быть связано с основным содержимым, но при удалении оно не должно влиять на поток документа.

Тег <figcaption> определяет подпись элемента <figure>.

Элемент <figcaption> должен быть размещен как первый или последний дочерний элемент элемента "figure".

Пример

<figure> <img src="img_pulpit.jpg" alt="Скала Кафедра" width="304" height="228"> <figcaption>Рис. 1. - Скала Кафедра, Норвегия.</figcaption> </figure>

Попробуйте сами »

Можем ли мы начать использовать эти семантические элементы?

Все вышеперечисленные элементы являются блочными элементами (кроме <figcaption>).

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

header, section, footer, aside, nav, article, figure
{
    display: block;
}

Проблемы в Internet Explorer 8 и более ранних версиях IE

IE8 и более ранние версии IE не могут отображать эффекты CSS в этих элементах, поэтому вы не можете использовать <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure> или другие элементы HTML5.

Решение:Вы можете использовать JavaScript-скрипт HTML5 Shiv, чтобы решить проблему совместимости с IE. Адрес для загрузки HTML5 Shiv:https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js

После загрузки поместите следующий код на веб-страницу:

<!--[if lt IE 9]>

<![endif]-->

Приведённый выше код загрузит файл html5shiv.js, когда версия браузера меньше IE9. Вы должны разместить его в элементе <head>, потому что браузеры IE должны отображать эти новые элементы HTML5 после загрузки head.

Другие расширения