W3Docs

Тема

Русский

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

Семантические элементы — одно из самых значимых нововведений в HTML5. В предыдущих версиях HTML для структурирования веб-страницы использовался универсальный тег <div> с атрибутом id или class. Например, для определения боковых панелей, нижних колонтитулов, меню или других структурных блоков использовался тег <div> с соответствующим смыслом (div class="footer").

Семантические элементы в HTML имеют внутренний смысл и передают его как браузеру, так и разработчику. Они чётко определяют, какой тип содержимого содержат (например, вместо <div id="footer"> используется тег <footer>). Они также помогают повысить доступность и делают разметку понятнее для поисковых систем.

Давайте посмотрим на семантические элементы и их значение.

Элемент <header> ​

Элемент <header> определяет шапку документа или раздела. Обычно он содержит логотип, строку поиска, навигационные ссылки и т. д.

Пример элемента HTML <header>: ​

Пример шапки HTML-страницы|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        display: inline-block;
        margin-right: 10px;
        color: #778899;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul style="padding:0;">
          <li>Home</li>
          <li>About us</li>
        </ul>
      </nav>
      <h1>Welcome to our page</h1>
      <hr />
    </header>
    <article>
      <header>
        <h2>Title of the document</h2>
        <p>The content of the paragraph.</p>
      </header>
    </article>
  </body>
</html>
Try it Yourself »

Элемент <nav> ​

Элемент <nav> определяет блок навигационных ссылок либо внутри текущего документа, либо на другие документы. Обратите внимание, что не все ссылки в HTML-документе можно размещать внутри элемента <nav>; он может включать только основные навигационные блоки. Например, тег <nav> также можно разместить в теге <footer> для определения ссылок в нижнем колонтитуле сайта.

Пример элемента HTML <nav>: ​

Пример элемента nav на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h1>Programming Courses</h1>
    </header>
    <nav>
      <a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
    </nav>
    <h2>Welcome to W3Docs!</h2>
  </body>
</html>
Try it Yourself »

Элемент <article> ​

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

Пример элемента HTML <article>: ​

Пример элемента article на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>Title of the article</h1>
      <p>Text of the article</p>
    </article>
  </body>
</html>
Try it Yourself »

Элемент <section> ​

Элемент <section> используется для группировки самостоятельных разделов на веб-странице, содержащих логически связанное содержимое (новостной блок, контактная информация и т. д.).

Пример элемента HTML <section>: ​

Пример элемента section на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Using the section tag</title>
  </head>
  <body>
    <section>
      <h1>Hypertext markup language HTML</h1>
      <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
    </section>
    <section>
      <h1>CSS</h1>
      <p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>
Try it Yourself »

Элемент <aside> ​

Элемент <aside> определяет раздел с дополнительной информацией, связанной с содержимым вокруг элемента <aside>. Обычно он используется для дополнения статьи дополнительной информацией или для выделения частей, которые могут быть интересны пользователю.

Пример элемента HTML <aside>: ​

Пример элемента aside на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>I like watching Game of Thrones.</p>
    <aside>
      <h4>Game of Thrones</h4>
      <p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
    </aside>
  </body>
</html>
Try it Yourself »

Элемент <footer> ​

Элемент <footer> определяет нижний колонтитул веб-страницы или раздела. Как правило, он содержит информацию об авторских правах, контактные данные, навигационные ссылки и т. д.

Пример элемента HTML <footer>: ​

Пример элемента footer на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666;
        color: white;
      }
      a {
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div class="header">Header / Menu</div>
    <div class="main-content">
      <h1>Main content</h1>
      <p>This is some paragraph. </p>
    </div>
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>
Try it Yourself »

Элемент <address> ​

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

Пример элемента HTML <address>: ​

Пример элемента address на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <address>
      Author: W3docs Team<br />
      <a href="mailto:[email protected]">Send Mail to the Author</a>
    </address>
  </body>
</html>
Try it Yourself »

Демо: Отправить письмо автору

Элемент <main> ​

Элемент <main> определяет основное содержимое страницы. Содержимое тега <main> должно быть уникальным и не дублировать блоки того же типа, которые повторяются в других документах, такие как шапка сайта, нижний колонтитул, меню, поиск, информация об авторских правах и т. д.

Пример элемента HTML <main>: ​

Пример элемента main на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>Languages HTML and CSS are intended for site layout.</p>
      <article>
        <h2>HTML</h2>
        <p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>CSS is a language of styles, defining the display of HTML documents. </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>
Try it Yourself »

Элемент <figure> ​

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

Пример элемента HTML <figure>: ​

Пример элемента figure на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>A cute baby</p>
    <figure>
      <img src="https://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
    </figure>
  </body>
</html>
Try it Yourself »

Элемент <figcaption> ​

Элемент <figcaption> используется для добавления подписи или примечания к тегу <figure>.

Пример элемента HTML <figcaption>: ​

Пример элемента figcaption на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="https://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>
Try it Yourself »

Элемент <time> ​

Элемент <time> определяет время, читаемое человеком, в 24-часовом формате или точную дату в григорианском календаре.

Пример элемента HTML <time>: ​

Пример элемента time на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
    <p>It will start at <time>19:00</time></p>
  </body>
</html>
Try it Yourself »

Элемент <mark> ​

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

Пример элемента HTML <mark>: ​

Пример элемента mark на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
  </body>
</html>
Try it Yourself »

Элемент <bdi> ​

Элемент <bdi> используется для изоляции двунаправленного текста, когда язык с направлением справа налево, например арабский или иврит, используется в строке вместе с языками с направлением слева направо.

Пример элемента HTML <bdi>: ​

Пример элемента bdi на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1> Example of using the bdi element </h1>
    <p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
  </body>
</html>
Try it Yourself »

Элемент <wbr> ​

Тег <wbr> используется, чтобы указать браузеру, где в тексте можно добавить перенос строки. В отличие от тега <br>, который обязывает браузер вставить перенос строки, в случае <wbr> браузер сначала анализирует его содержимое, а затем вставляет перенос строки при необходимости (слишком длинное слово или URL-адрес).

Пример элемента HTML <wbr>: ​

Пример элемента wbr на странице|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Example of a long string of text without wbr.</p>
    <p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
    <p>Example of a long string of text with wbr.</p>
    <p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
  </body>
</html>
Try it Yourself »

Практика ​

Какова основная цель использования семантических элементов в HTML5?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.