Элементы семантики HTML5

Семантика (происходит из Древней Греции) может быть определена как исследование значения языка.

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

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

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

НесемантическиеПримеры элементов: <div> и <span> - не предоставляют информации о содержимом.

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

Поддержка браузерами

Да Да Да Да Да

Все современные браузеры поддерживают семантические элементы 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> в HTML5

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

Согласно документации W3C по HTML: "Раздел (section) - это группа содержимого с темой, обычно имеющая заголовок."

Можете разделить домашнюю страницу сайта на разделы简介、содержание, контактная информация и т.д.

Пример

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

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

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

Элемент <article> определяет независимое самоуключенное содержимое.

Документ имеет свое собственное значение и может быть прочитан независимо от другого контента сайта.

Применение элементов <article>:

  • Форум
  • Блог
  • Новости

Пример

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

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

Вложенные семантические элементы

В стандарте HTML5 элемент <article> определяет целостный блок связанных элементов, который является самостоятельным.

Элемент <section> определен как блок связанных элементов.

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

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

Вы также会发现, что элементы <section> содержат элементы <section>, а элементы <article> содержат элементы <article>.

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

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

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

В одном документе может быть несколько элементов <header>.

Ниже приведен пример определения заголовка статьи:

Пример

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

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

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

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

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

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

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

Пример

<footer>
   <p>Опубликовано: Hege Refsnes</p>
   <p>Контактная информация: <a href="mailto:someone@example.com">
  <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

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

Элемент HTML5 <nav>

Элемент <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 должно быть связано с окружающим содержимым.

Пример

<p>My family and I visited The Epcot center this summer.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

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

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

В книгах и газетах часто встречаются заголовки, accompanyng изображения.

Задача заголовка (caption) - добавить видимое объяснение изображению.

С помощью HTML5 изображения и заголовки могут быть объединены в <figure> в элементе:

Пример

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

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

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

Почему использовать элементы HTML5?

Если используется HTML4, разработчики будут использовать свои любимые имена свойств для установки стилей элементов страницы:

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

Таким образом, браузеры не могут распознать правильное содержимое веб-страницы.

А с помощью элементов HTML5, таких как: <header> <footer> <nav> <section> <article>, эта проблема решается легко.

По мнению W3C, семантическая сеть:

“Разрешает compartir y reutilizar datos entre aplicaciones, empresas y grupos.”

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

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

Эти ссылки ведут к полному справочнику HTML.

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