Семантика в HTML

Целью тегов HTML является передача смысла документу. Не беспокойтесь о том, как ваша веб-страница выглядит. Сосредоточьтесь на значении каждого тега, который вы будете использовать.

В зависимости от написанного вами содержимого, вы можете выбрать подходящий элемент, соответствующий смыслу текста.

Диапазон элементов достаточно широк, чтобы он подходил и для материалов общего назначения (например, абзацы или списки) и для более конкретного содержимого, вроде <output> (для отображения результата вычисления) или <progress> (для отображения хода выполнения задачи).

Структурные элементы: организация страницы

Структурные элементы позволяют организовать основные части вашей страницы. Они обычно содержат другие элементы HTML.

Вот что типичная веб-страница может в себя включать:

• <header> в качестве первого элемента страницы, который может включать в себя логотип и слоган;
• <nav> в качестве списка ссылок, которые ведут на разные страницы сайта;
• <h1> в качестве заголовка страницы;
• <article> в качестве основного содержимого страницы, вроде статьи блога;
• <footer> в качестве последнего элемента страницы, расположенного внизу.

Текстовые элементы: определение контента

Внутри структурных элементов вы обычно находите текстовые элементы, призванные определить цель вашего содержимого.

Вы, в основном, будете использовать:

• <p> для абзацев;
• <ul> для (неупорядоченных) списков;
• <ol> для (упорядоченных) списков;
• <li> для отдельных пунктов списка;
• <blockquote> для цитат.

Строчные элементы: различный текст

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

Есть много строчных элементов, но вы обычно столкнётесь со следующими:

• <strong> для важных слов;
• <em> для выделенных слов;
• <a> для ссылок;
• <small> для менее важных слов;
• <abbr> для аббревиатур, вроде W3C.

Просто читая этот код HTML, вы можете легко понять, что означает каждый элемент HTML.Тёмная тема     

<article>
  <h1>Основной заголовок страницы</h1>
  <h2>Подзаголовок</h2>
  <p>
    Какие-то всякие разные штуки и некоторые <em>выделенные</em> и 
    даже <strong>важные</strong> слова.
  </p>
  <p>
    Другой абзац.
  </p>
  <ul>
    <li>Один</li>
    <li>Два</li>
    <li>Три</li>
  </ul>
  <blockquote>
    Однажды сказано
  </blockquote>
</article>
<aside>
  <h3>Мои последние сообщения</h3>
  <ul>
    <li><a href="#">Один</a></li>
    <li><a href="#">Два</a></li>
    <li><a href="#">Три</a></li>
  </ul>
</aside>

Общие элементы

Когда ни один семантический элемент не подходит для вашего содержимого, но вы всё ещё хотите вставить элемент HTML (в целях группирования или стилизации), то можете остановиться на одном из двух общих элементов:

• <div> для блочных элементов;
• <span> для строчных элементов.

Хотя эти элементы HTML на самом деле не несут какого-либо смысла, они пригодятся когда мы начнём использовать CSS.

Не заморачивайтесь на семантике

Существует около 100 семантических элементов HTML на выбор. Это много. Может оказаться непреодолимым пройтись по этому списку и выбрать соответствующий элемент для вашего контента.

Но не тратьте слишком много времени, беспокоясь об этом. Если вы будете придерживаться следующего списка на данный момент, этого будет достаточно.

Структурные	Текстовые	Строчные
<header> <h1> <h2> <h3> <nav> <footer> <article> <section>	<p> <ul> <ol> <li> <blockquote>	<a> <strong> <em> <q> <abbr> <small>