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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу 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 Canvas HTML SVG HTML 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> Определяет дату/время