Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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 Фреймы 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 Графика

HTML Холст HTML SVG

HTML Медиа

HTML Медиа HTML5 Видео HTML5 Аудио HTML Плагины HTML YouTube

HTML APIы

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

HTML Примеры

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

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

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

HTML5 Семантика



Семантика - это изучение значений слов и фраз на языке 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 Семантические Элементы


HTML5 <section>

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

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

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

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


HTML5 <article>

Элемент <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>.


HTML5 <header>

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

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

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

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

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

HTML5 <footer>

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

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

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

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

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

HTML5 <nav> /h2>

Элемент <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>
Попробуйте сами »

HTML5 <aside>

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

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

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

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

HTML5 <figure> и<figcaption>

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

В 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> Определяет дату/время