Семантика в HTML5

HTML-элементы, позволяющие семантически структурировать веб-страницу

# article

Определяет блок контента. Он может иметь свой собственный header, footer, section... Полезен для списка постов в блоге.

Пример: Скопировать

Мой пост в блоге

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

<article>
  <header>
    <h3>
      <a href="/my-blog-post">Мой пост в блоге</a>
    </h3>
  </header>
  <section>
    <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Деревни они, инициал но знаках пунктуация текст сих lorem приставка!</p>
  </section>
  <footer>
    <small>
      Опубликовано <time datetime="2022-04-29T19:00">29 Апр.</time> в <a href="/category/russian">Русский Язык</a>
    </small>
  </footer>
</article>

# aside

Определить блок контента который относится к основному контенту. Обычно отображается как боковая панель.

Пример: Скопировать

Мой пост в блоге

Далеко-далеко за словесными горами, в стране гласных и согласных живут, рыбные тексты. Реторический вершину необходимыми над! Над, своего диких жаренные рекламных решила!

и т.д.

<main>
  <h1>Мой пост в блоге</h1>
  <p>Далеко-далеко, за словесными, горами в стране гласных и согласных живут рыбные тексты. Запятой они взгляд по всей снова наш за жаренные щеке языком!</p>
  <p>и т.д.</p>
</main>

<aside>
  <h3>Об авторе</h3>
  <p>Фронтенд-дизайнер из Нью-Йорка, в настоящее время работает в компании Agitech в солнечной Калифорнии.</p>
</aside>

# figcaption

Определяет заголовок <figure>.

Пример: Скопировать

HTML Reference logo
HTML справочник
<figure>
  <img src="/images/htmlwiki-logo
.png" alt="HTML Reference logo">
  <figcaption>HTML справочник</figcaption>
</figure>

# figure

Определяет один автономный элемент, обычно изображение.

Пример: Скопировать

HTML Reference logo
<figure>
  <img src="/images/htmlwiki-logo
.png" alt="HTML Reference logo">
</figure>

# main

Определяет основное содержание веб-страницы. Может отображаться с боковой панелью.

Пример: Скопировать

Мой пост в блоге

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

etc.

<main>
  <h1>Мой пост в блоге</h1>
  <p>Далеко-далеко за словесными горами в стране, гласных, и согласных живут рыбные тексты..</p>
  <p>etc.</p>
</main>

<aside>
  <h3>Об авторе</h3>
  <p>Фронтенд-дизайнер из Нью-Йорка, в настоящее время работает в компании Agitech в солнечной Калифорнии.</p>
</aside>

# mark

Определяет выделенный текст.

Пример: Скопировать

Мы используем HTML5 для написания контента в Интернете.
Мы используем HTML5 для написания <mark>контента</mark> в Интернете.

# section

Defines a section within a web page.

Пример: Скопировать

Section title

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

<section>
  <h2>Section title</h2>
  <p>Далеко-далеко за словесными горами в стране, гласных, и согласных живут рыбные тексты..</p>
</section>

# time

Определяет время в 24-часовом формате.

Пример: Скопировать

Игра начнется в .
Игра начнется в <time datetime="2017-04-29T19:00">19:00</time>.

datetime

Определяет время и дату.