Что такое семантические элементы HTML? Примеры!
Меню
Справочник

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

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

Семантические элементы = элементы со значением, т.е. элементы которые четко определяют содержание (контент).


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

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

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

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


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

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

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

Элементы макета

<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>.


HTML - элемент <section>

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

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

Примеры использования элемента <section>:

  • Главы;
  • Введение;
  • Новостные материалы;
  • Контактная информация.

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

В этом примере в документе есть два раздела (<section>):

<section>
<h1>W3C</h1>
<p>Консорциум World Wide Web является основной международной организацией по стандартизации World Wide Web. Основанный в 1994 году и возглавляемый Тимом Бернерсом-Ли, консорциум состоит из организаций-членов, штат сотрудников которых работает вместе над разработкой стандартов для Всемирной паутины</p>
</section>

<section>
<h1>W3C Логотип HTML5</h1>
<p>Он сияет так же ярко и смело, как дальновидные, преданные делу веб-разработчики, которыми вы являетесь. Это стандарт стандарта, вымпел прогресса.</p>
</section>


HTML - элемент <article>

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

Примеры использования элемента:

  • Сообщения на форуме;
  • Сообщения в блоге;
  • Комментарии пользователей;
  • Карточки товаров;
  • Газетные статьи.

Пример

Три статьи с независимым самостоятельным содержанием:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.</p>
</article>

<article>
<h2>Яндекс Браузер</h2>
<p>Яндекс Браузер — это бесплатный веб-браузер, разработанный российской технологической корпорацией Яндекс, который использует движок веб-браузера Blink и основан на проекте с открытым исходным кодом Chromium</p>
</article>

Пример 2

Использование CSS для оформления элемента <article>:

Самые популярные браузеры

Google Chrome

Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!

Mozilla Firefox

Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.

Яндекс Браузер

Яндекс Браузер — это бесплатный веб-браузер, разработанный российской технологической корпорацией Яндекс, который использует движок веб-браузера Blink и основан на проекте с открытым исходным кодом Chromium

<!DOCTYPE html>
<html>
<head>
<style>
.all-browsers {
   margin: 0;
   padding: 7px;
   background-color: #00b7ff;
   color: #000
}
.all-browsers > h1, .browser {
   margin: 11px;
   padding: 7px;
}
.browser {
   background: white;
}
.browser > h2, p {
   margin: 5px;
   font-size: 95%;
}
</style>
</head>
<body>

<article class="all-browsers">
   <h1>Самые популярные браузеры</h1>
   <article class="browser">
     <h2>Google Chrome</h2>
     <p>Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!</p>
   </article>

<article class="browser">
     <h2>Mozilla Firefox</h2>
     <p>Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.</p>
  </article>

<article class="browser">
     <h2>Яндекс Браузер</h2>
     <p>Яндекс Браузер — это бесплатный веб-браузер, разработанный российской технологической корпорацией Яндекс, который использует движок веб-браузера Blink и основан на проекте с открытым исходным кодом Chromium</p>
  </article>
</article>

</body>
</html>


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

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

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

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

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


HTML - элемент <header>

Элемент <header> представляет собой контейнер для вводного контента или набора навигационных ссылок.

Элемент <header> обычно содержит:

  • Один или несколько элементов заголовка (<h1> - <h6>);
  • Логотип или иконку;
  • Информация об авторстве.

Заголовок для <article>:

<article>
  <header> 
    <h1>W3C</h1> 
    <p>Консорциум World Wide Web</p>
  </header>
  <p>Консорциум World Wide Web является основной международной организацией по стандартизации World Wide Web. 
  Основанный в 1994 году и возглавляемый Тимом Бернерсом-Ли, консорциум состоит из организаций-членов, 
  штат сотрудников которых работает вместе над разработкой стандартов для Всемирной паутины</p>
</article> 

Примечание: в одном HTML-документе может быть несколько элементов <header>. Однако его нельзя размещать внутри <footer>, <address> или другого элемента <header>.

HTML - элемент <footer>

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

Элемент <footer> обычно содержит:

  • Информация об авторстве;
  • Информация об авторских правах;
  • Контактная информация;
  • Карта сайта;
  • Элемент возврата к верхним ссылкам;
  • Связанные документы.

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

Секция  <footer> в документе:

<footer>
   <p>Автор: Имя Автора</p>
   <p><a href="mailto:example@ya.ru">example@ya.ru</a></p>
</footer>


HTML - элемент <nav>

Элемент <nav> определяет набор навигационных ссылок.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Примечание: обратите внимание, что НЕ все ссылки документа должны находиться внутри элемента <nav>. Элемент <nav> предназначен только для основных блоков навигационных ссылок. Программы чтения с экрана, могут использовать этот элемент, чтобы определить, следует ли пропустить первоначальную визуализацию этого содержимого.

HTML - элемент <aside>

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

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

Пример

Отображает дополнительный контент помимо контента, в котором он размещен:

<p>Наша компания занимается разработкой веб-сайтов на WordPress, а также на других CMS.</p>

<aside>
<h4>CMS</h4>
<p>Система управления контентом (англ. Content management system , CMS ) — это компьютерное программное обеспечение, используемое для управления созданием и изменением цифрового контента. CMS обычно используется для управления корпоративным контентом и веб-контентом.</p>
</aside>

Пример 2

Использование CSS для оформления элемента <aside>:

Наша компания много лет занимается разработкой веб-сайтов на WordPress, а также на других CMS.

Накопленный опыт наших специалистов в этой сфере поможет вам вывести свой бизнес на новый уровень с помощью цифровых технологий.

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

Для интернет-магазинов и маркетплейсов мы бесплатно подключаем и настраиваем платежные системы!.

Мы всегда рады сотрудничеству и открыты для любых интересных проектов!

<!DOCTYPE html>
<html>
<head>

<style>
.cms {
   background-color: #fff;
   color: #000;
   border: 2px solid #00b7ff;
   margin: 5px;
} 
.cms aside {
   width: 40%;
   padding-left: 10px;
   margin-left: 10px;
   float: right; 
   font-style: italic;
   background-color: #00b7ff;
   color: #fff;
}
</style>

 <div class="cms">
    <p>Наша компания много лет занимается разработкой веб-сайтов на WordPress, а также на других CMS.</p>
  
  <aside>
    <h4>CMS</h4>
    <p>Система управления контентом (англ. Content management system , CMS ) — это компьютерное программное обеспечение, используемое для управления созданием и изменением цифрового контента.</p>
  </aside>

<p>Накопленный опыт наших специалистов в этой сфере поможет вам вывести свой бизнес на новый уровень с помощью цифровых технологий.</p>
<p>Мы предлагаем разработку от самых простых веб-страниц компаний и до самых сложных, таких как интернет-магазины и маркетплейсы.</p>
<p>Для интернет-магазинов и маркетплейсов мы бесплатно подключаем и настраиваем платежные системы!.</p>
<p>Мы всегда рады сотрудничеству и открыты для любых интересных проектов!</p>

 </div>

</body>
</html>


HTML - элементы <figure> и <figcaption>

Тег <figure> указывает автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т. д.

Тег <figcaption> определяет заголовок для элемента <figure>. Элемент <figcaption> может быть размещен как первый или как последний дочерний элемент элемента <figure>.

Элемент <img> определяет фактическое изображение/иллюстрацию.

Пример

Места которые стоит посетить

Нью-Йорк, который часто называют Нью-Йорк Сити или Большое Яблоко, является самым густонаселенным городом в Соединенных Штатах.

Нью-Йорк Сити Нью-Йорк Сити (Большое Яблоко).
<figure>
   <img src="/htm/New_York.jpg" alt="Нью-Йорк Сити" style="width:100%">
   <figcaption>Нью-Йорк Сити (Большое Яблоко).</figcaption>
</figure>



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

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


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

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

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

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.


☛ Гид по стилю HTML

Элементы компьютерного кода HTML ☚

Поделиться ссылкой