САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML5 Семантика



Семантика - это изучение значений слов и фраз на языке.

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


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

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

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

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


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

Да Да Да Да Да

Семантические элементы HTML5 поддерживаются во всех современных браузерах.

Кроме того, вы можете "выучить" как обращаються старые браузеры с "неизвестными элементами".

Читайте об этом в Поддержка браузеров HTML5.


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

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

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

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML5 Семантические Элементы


Элемент <section> HTML5

Элемент <section> определяет раздел в документе.

Согласно документации HTML5 W3C: "section - это тематическая группа контента, обычно с заголовком."

Домашняя страница обычно разделяется на разделы для введения, содержания и контактной информации.

Пример

<section>
  <h1>WWF</h1>
  <p>Всемирный Фонд природы (WWF)...</p>
</section>
Редактор кода »

Элемент <article> HTML5

Элемент <article> задает независимое, автономное содержимое.

Статья должна иметь смысл сама по себе и ее можно читать независимо от остальной части веб-сайта.

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

  • Сообщения форумов
  • Блог
  • Газетная статья

Пример

<article>
  <h1>Что делает WWF?</h1>
  <p>Миссия WWF - остановить деградацию естественной среды нашей планеты,
 построить будущее, в котором люди заживут в гармонии с природой.</p>
</article>
Редактор кода »

Вложить <article> в <section> или наоборот?

Элемент <article> задает независимое, автономное содержимое.

Элемент <section> определяет раздел в документе.

Можем ли мы использовать определения, чтобы решить, как вложить эти элементы? Нет, мы не можем!

Итак, в интернете вы найдете страницы HTML с элементами <section> содержащих <article> elements и элементами <article> содержащих элемент <section> .

Вы также найдете страницы с элементами <section> содержащих элемент <section>, и элемент <article> содержащий элементы <article>.

Пример для газеты: Спорт <article> в спорте section, может иметь техническое section в каждом <article>.


Элемент <header> HTML5

Элемент <header> задает заголовок документа или раздела.

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

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

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

Пример

<article>
  <header>
    <h1>Что делает WWF?</h1>
    <p>Миссия WWF:</p>
  </header>
  <p>Миссия WWF - остановить деградацию естественной среды нашей планеты ,
  постройть будущее, в котором люди будут жить в гармонии с природой.</p>
</article>
Редактор кода »

Элемент <footer> HTML5

Элемент <footer> задает нижний колонтитул для документа или раздела.

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

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

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

Пример

<footer>
  <p>Автор: Щипунов Андрей</p>
  <p>Контактная информация: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>
Редактор кода »

Элемент <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 из контента, в который он помещен (например, боковая панель).

Содержимое <aside> должно быть связано с окружающим контентом.

Пример

<p>Моя семья, посетили центр Epcot этим летом.</p>

<aside>
  <h4>Центр Epcot</h4>
  <p>Epcot - это тематический парк в Диснейуорлде, штат Флорида.</p>
</aside>
Редактор кода »

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

Цель подписи к рисунку - добавить визуальное объяснение к изображению.

В HTML5 изображение и заголовок можно сгруппировать в элементе <figure>:

Пример

<figure>
  <img src="pic_mountain.jpg" alt="Пульпит Рок" width="304" height="228">
  <figcaption>Рис. 1. - Прекестулен, Норвегия.</figcaption>
</figure>
Редактор кода »

Элемент <img> определяет изображение, элемент <figcaption> определяет заголовок.


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

В HTML4 разработчики использовали собственные имена id/class для стилизации элементов: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav и т. д.

Это сделало невозможным для поисковых систем определить правильный контент веб-страницы.

Новые элементы HTML5 (<header> <footer> <nav> <section> <article>), станет легче выполнить.

Согласно W3C, семантический веб: "Позволяет совместно и повторно использовать данные между приложениями, предприятиями и сообществами."


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

Ниже приведен алфавитный список новых семантических элементов в HTML5.

Ссылка к нашему полному Справочнику HTML5.

Тег Описание
<article> Определение статьи
<aside> Определяет содержимое aside из содержимого страницы
<details> Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть
<figcaption> Определяет заголовок для элемента <figure>
<figure> Указывает автономный контент, например иллюстрации, диаграммы, фотографии, списки кодов и т. д.
<footer> Определяет нижний колонтитул для документа или раздела
<header> Задает заголовок для документа или раздела
<main> Определяет основное содержание документа
<mark> Определяет маркированный / выделенный текст
<nav> Определяет ссылки навигации
<section> Определяет раздел в документе
<summary> Определяет видимый заголовок элемента <details>
<time> Определяет дату/время