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

HTML Учебник

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

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

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

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

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

HTML Семантика



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

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


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

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

Примеры несемантических элементов: <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> Определяет дату/время