Семантический HTML

Основная цель любой HTML-вёрстки — передача смысла блоков. Часто, помимо пользователей, по нашим страницам ходят и роботы. Они собирают и анализируют информацию страницы.
К примеру, поисковые роботы просматривают всю страницу и определяют её полезность, а также уникальность. И если для человека достаточно просто поделить страницу на части и найти шапку, основной контент, футер, то для робота это достаточно сложная задача. Робот видит исключительно нашу вёрстку и не может «глазами» отделить части макета.

До появления HTML5 почти вся навигация по сайту делалась с помощью тега <div>.
Тег <div> - пустой контейнер, который определяет разделение или раздел. Он не влияет на контент или макет и используется для группировки HTML-элементов, которые должны быть написаны с помощью CSS или с помощью скриптов.
Но о нем поговорим чуть позже в этом же уроке.

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

Основными семантическими тегами стали:
<article>
<aside>
<footer>
<header>
<main>
<nav>
<section>
Шапка и подвал сайта
Шапка сайта

Элемент <header>...</header>
Формирует заголовочный блок или "шапку" документа.
Шапкой на сайте принято называть верхнюю область, в которой находятся контактные данные, меню, логотип. До появления стандарта HTML5 данную область просто размечали, используя обычный блок <div>, что не вносило «смысла».

Аналогично ему, заключительную часть страницы, или «подвал», описывает тег <footer>
Тег <header> — это не только шапка сайта с логотипом и меню, он может использоваться, например, и как «шапка» какой-нибудь статьи или раздела сайта. Конечно, в случае со статьёй <header> называют не «шапкой», а вводной частью, в которой могут содержаться заголовки, оглавление и так далее.
Подвал сайта

Аналогично ему, заключительную часть страницы, или «подвал», описывает элемент <footer>...</footer>.
Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании, ссылки на социальные сети, авторские права и т.д.
С <footer> ситуация аналогичная. В привычном понимании это подвал сайта, с копирайтами, контактной информацией и так далее. Но <footer> может использоваться и в других разделах сайта. Например, внутри статьи в «подвале» можно разместить дополнительную информацию: данные об авторе, дополнительные ссылки и так далее.
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Header и Footer</title>
    </head>
    <body>
    <header>
        <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
        <div id="menu"> <!-- Меню -->
            <ul>
             <li><a href="/">Главная</a></li>
             <li><a href="/about">О нас</a></li>
             <li><a href="/contacts">Контакты</a></li>
            </ul>
        </div>
    </header>
    <footer>
        <p>Все права защищены</p>
    </footer>
    </body>
</html>
Навигация
Элемент <nav>...</nav>
В него вставляется основное меню навигации сайта. Он сообщает поисковым системам, где на веб-странице расположена основная навигация и помогает структурировать сайт в поисковой выдаче. Также различные устройства для чтения с экрана, которыми пользуются люди со слабым зрением, используют этот тег, чтобы определить, стоит ли его отображать на странице.

Поскольку <nav> представляет собой раздел в первую очередь, а не просто набор ссылок, внутри <nav> допустимо размещать и другие элементы — заголовки <h2>-<h6>, абзацы <p>, <header>, <footer> и др. В общем, всё, что продиктовано содержанием и смыслом раздела.

С одним исключением, внутри <nav> запрещено размещать <main>.

Также допускается несколько элементов <nav>, если это продиктовано логикой и структурой веб-страницы. Так, первый <nav> можно использовать как навигацию по сайту, а второй как навигацию по текущей веб-странице.

Уже обратили внимание?
В примере выше меню сайта специально было размечено с помощью обычного тега <div> с идентификатором menu. Но такое обозначение понимают только разработчики, но не браузеры. Они не понимают, что это меню, а не просто обёртка для списка.

Заменим <div id="menu"></div> на тег <nav>:
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Header и Footer</title>
    </head>
    <body>
    <header>
        <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
        <nav> <!-- Меню -->
            <ul>
             <li><a href="/">Главная</a></li>
             <li><a href="/about">О нас</a></li>
             <li><a href="/contacts">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <footer>
        <p>Все права защищены</p>
    </footer>
    </body>
</html>
Уникальный контент
Элемент <main>...</main>
Основной смысл каждой страницы — уникальный контент. Это самое главное, что должно быть на вашей странице. Пользователь вполне справится без меню или футера, но если на странице нет своего уникального контента, то страница бесполезна.

Для разметки уникального контента используется тег <main>.
Он поможет обозначить область с самым важным контентом на странице. Старайтесь в нём держать только контент. Обычно меню, боковые панели и футер в эту область не входят.
Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.

Наличие тега main также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит всё оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключённая в тег main. Такой режим отлично подходит для людей, у которых, в настоящий момент, слабое подключение к интернету.

Теперь добавим в наш код уникального контента.
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>main</title>
    </head>
    <body>
    <header>
        <img src="https://static.tildacdn.com/tild6337-3162-4735-b439-313232366462/logo.png" alt="Логотип"> <!-- Логотип сайта -->
        <nav> <!-- Меню -->
            <ul>
             <li><a href="/">Главная</a></li>
             <li><a href="/about">О нас</a></li>
             <li><a href="/contacts">Контакты</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Цифра — практические курсы по программированию</h1>
        <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
        <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
        <p>Цифра — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
    </main>

    <footer>
        <p>Все права защищены</p>
    </footer>
    </body>
</html>
<main> нельзя вставлять внутрь элементов <article>, <aside>, <footer>, <header>, <nav>, <section> из-за того, что эти элементы допускается использовать несколько раз.

<main> — уникальная секция, которая используется один раз на всю страницу.
Разделы
Элемент <section>
Контент на странице не является однородным. Обычно это цепочка логических областей, каждая из которых описывает что-то конкретное. Например, на странице могут присутствовать область с описанием преимуществ, цены, формы и так далее. Их хочется как-то выделить.
В большинстве случаях, когда надо добавить раздел, но есть сомнения, какой элемент для этого использовать, подходит именно <section>.

Он позволяет сгруппировать разное содержимое, связанное друг с другом общим смыслом, и задать ему заголовок. Для заголовков обычно применяется элемент <h2>, <h3> и ниже, а для сложных случаев, когда кроме заголовка есть картинка, форма или что-то ещё, можно воспользоваться элементом <header>.

Добавим ее в код:
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>main</title>
    </head>
    <body>
    <header>
        <img src="https://static.tildacdn.com/tild6337-3162-4735-b439-313232366462/logo.png" alt="Логотип"> <!-- Логотип сайта -->
        <nav> <!-- Меню -->
            <ul>
             <li><a href="/">Главная</a></li>
             <li><a href="/about">О нас</a></li>
             <li><a href="/contacts">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Цифра — практические курсы по программированию</h1>
        <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
        <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
        <p>Цифра — это готовый путь от абсолютного новичка до первого трудоустройства.</p>

    <section>
        <h2>Преимущества</h2>
        <ul>
            <li>Много теории</li>
            <li>Много практики</li>
            <li>Сильные наставники</li>
        </ul>
    </section>

    </main>
    <footer>
        <p>Все права защищены</p>
    </footer>
    </body>
</html>
Стоит ли включать участок контента в отдельную секцию?
Если вы можете описать участок контента в одном или двух словах (преимущества, цены, форма заказа, каталог, контакты и так далее), то с большой вероятностью этот участок является самостоятельной секцией.
<section> подходит для одностраничных сайтов, чтобы отделить один раздел от другого, а также для содержимого вкладок.

Область <section> дополняет основной контент и не должна существовать сама по себе.
Независимые разделы
Элемент <article>
Помимо тега <section>, для обозначения секции (раздела) используется тег <article>.
Он нужен для разметки секции, которая может быть использована самостоятельно и не привязана структурно к конкретной странице.
Например, представьте себе страницу новостей и отдельную статью в ней. Сможем ли мы понять статью, если она окажется не на странице новостей, а скажем на странице с услугами? Да, сможем. Потому что, статья - законченный текст и следовательно, ее можно обернуть в тег <article>.

Добавим колонку новостей в наш пример вёрстки.
Сразу подумаем, как она может быть разделена. Сами по себе новости являются достаточно уникальным элементом, ведь даже если их перенести на другую страницу, то они не потеряют свою актуальность. В этом случае каждую новость можно обернуть в article.
А что делать с обёрткой блока новостей? Она объединяет по смыслу несколько различных новостей, её можно спокойно назвать одним словом, и она точно будет иметь свой заголовок. Следовательно, ей подойдёт тег section.
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>main</title>
    </head>
    <body>
    <header>
        <img src="https://static.tildacdn.com/tild6337-3162-4735-b439-313232366462/logo.png" alt="Логотип"> <!-- Логотип сайта -->
        <nav> <!-- Меню -->
            <ul>
             <li><a href="/">Главная</a></li>
             <li><a href="/about">О нас</a></li>
             <li><a href="/contacts">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Цифра — практические курсы по программированию</h1>
        <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
        <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
        <p>Цифра — это готовый путь от абсолютного новичка до первого трудоустройства.</p>

    <section> <!-- Добавили раздел, подходящий по смыслу -->
        <h2>Преимущества</h2> <!-- Добавили заголовок раздела -->
        <ul>
            <li>Много теории</li>
            <li>Много практики</li>
            <li>Сильные наставники</li>
        </ul>
    </section>

    <section> <!-- Добавили раздел, подходящий по смыслу -->
        <h2>Новости</h2> <!-- Добавили заголовок раздела -->

        <article> <!-- Добавили независимый раздел новостей -->
            <h3>Новость 1</h3> <!-- Обязательный заголовок! -->
            <p>Текст новости 1</p>
            <a href="#">Подробнее</a>
        </article>

        <article> <!-- Добавили независимый раздел новостей -->
            <h3>Новость 2</h3> <!-- Обязательный заголовок! -->
            <p>Текст новости 2</p>
            <a href="#">Подробнее</a>
        </article>

        <article> <!-- Добавили независимый раздел новостей -->
            <h3>Новость 3</h3> <!-- Обязательный заголовок! -->
            <p>Текст новости 3</p>
            <a href="#">Подробнее</a>
        </article>
    </section>

    </main>
    <footer>
        <p>Все права защищены</p>
    </footer>
    </body>
</html>
Если область не потеряет свой смысл вне страницы, то её можно обернуть в <article>.

Все области article обязательно имеют заголовок.
Дополняющие разделы
Элемент <aside>...</aside>
Это область с дополнительной информацией. Она может быть как связана с текущей страницей, так и не очень.
Подобные секции вы можете встречать в виде боковых панелей на сайтах. Там содержится дополнительное меню, баннеры, реклама и другая информация.

Часто применяется комбинация элементов <main> и <aside>, где <main> определяет основную уникальную часть веб-страницы, а <aside>вспомогательную. В коде HTML это выглядит следующим образом.
<main>Основная часть</main>
<aside>Вспомогательная часть</aside>
<aside> не обязан являться боковой панелью по внешнему виду. Это может быть даже дополнительная информация внутри статьи. Но чаще всего внешнее оформление у такого тега именно в виде боковой панели.

Давайте добавим такую информацию в нашу вёрстку. Внутри этой дополнительной секции будет находиться ещё одно меню, которое не будем оборачивать в <nav>, так как оно не является основным.
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>main</title>
    </head>
    <body>
    <header>
        <img src="https://static.tildacdn.com/tild6337-3162-4735-b439-313232366462/logo.png" alt="Логотип"> <!-- Логотип сайта -->
        <nav> <!-- Меню -->
            <ul>
             <li><a href="/">Главная</a></li>
             <li><a href="/about">О нас</a></li>
             <li><a href="/contacts">Контакты</a></li>
            </ul>
        </nav>
    </header>

    <aside> <!-- Боковая панель (сайдбар) -->
      <nav> <!-- Дополнительное меню страницы -->
        <ul>
          <li><a href="/service-1/">Услуга 1</a></li>
          <li><a href="/service-2/">Услуга 2</a></li>
          <li><a href="/service-3/">Услуга 3</a></li>
        </ul>
      </nav>
    </aside>

    <main>
        <h1>Цифра — практические курсы по программированию</h1>
        <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
        <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
        <p>Цифра — это готовый путь от абсолютного новичка до первого трудоустройства.</p>

    <section> <!-- Добавили раздел, подходящий по смыслу -->
        <h2>Преимущества</h2> <!-- Добавили заголовок раздела -->
        <ul>
            <li>Много теории</li>
            <li>Много практики</li>
            <li>Сильные наставники</li>
        </ul>
    </section>

    <section> <!-- Добавили раздел, подходящий по смыслу -->
        <h2>Новости</h2> <!-- Добавили заголовок раздела -->

        <article> <!-- Добавили независимый раздел новостей -->
            <h3>Новость 1</h3> <!-- Обязательный заголовок! -->
            <p>Текст новости 1</p>
            <a href="#">Подробнее</a>
        </article>

        <article> <!-- Добавили независимый раздел новостей -->
            <h3>Новость 2</h3> <!-- Обязательный заголовок! -->
            <p>Текст новости 2</p>
            <a href="#">Подробнее</a>
        </article>

        <article> <!-- Добавили независимый раздел новостей -->
            <h3>Новость 3</h3> <!-- Обязательный заголовок! -->
            <p>Текст новости 3</p>
            <a href="#">Подробнее</a>
        </article>
    </section>

    </main>
    <footer>
        <p>Все права защищены</p>
    </footer>
    </body>
</html>
Обратите внимание, что <aside>, в нашем примере, содержится вне тега <main>. Этот контент не обязан быть уникальным на каждой странице. Он может быть уникальным для каждого конкретного раздела (если речь идёт, например, о меню).
Если боковая панель уникальна для каждой страницы, то она должна быть расположена внутри тега <main>.

Если <aside> располагается внутри <article>, то содержимое <aside> должно иметь отношение к тексту статьи.
Хотя <aside> определяет раздел и в нём допустимы любые элементы, в <aside> запрещено вставлять <main>.
Несемантические обертки
Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы <div> и <span>.
Их нужно использовать с подходящим значением атрибута class или id, чтобы можно было легко получить к ним доступ.

Элемент <span>
С этим элементом мы уже знакомились в уроке "HTML текст".
<span> — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения.

Элемент <div>
<div> — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения.

Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:
<div class="shopping-cart">
  <h2>Корзина</h2>
  <ul>
    <li>
      <p><a href=""><strong>Кроссовки Convers</strong></a>: 5000р.</p>
      <img src="https://cdn.pixabay.com/photo/2013/07/12/18/20/shoes-153310_960_720.png" alt="Кроссовки Convers">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Итого: 10 500р.</p>
</div>
Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места).
Также не подходит и <section>, т. к. это не часть основного содержимого страницы.

Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.
<div> настолько просто использовать, что легко переборщить. Помните картинку в начале урока? Так делать точно не надо.
Поскольку <div> не несут никакого семантического значения, они просто загромождают ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе вам будет трудно обновлять и поддерживать ваши документы.
Практика
1. Структура страницы
В этом задании ваша цель — создать семантичную вёрстку небольшой веб-страницы. Пока что без стилей.

Для создания семантической вёрстки придерживайтесь следующей структуры:
  • Шапка сайта. Внутри шапки сайта находится логотип и меню из трех ссылок. Список ссылок сделайте с помощью тега ul.
  • Секция уникального контента. Состоит из:
    • Дополняющей секции. Заполните её любым содержимым.
    • Обычная секция, внутри которой:
    • 4 независимых секций. Содержание этих секций любое.
2. Исправляем код
Исправьте старую верстку на новую семантическую. Обрати внимание на то, что было пропущено торопливым верстальщиком.
    <!--START OF HEADER-->
    <div>
        <h1>Основной заголовок</h1>
        <h2>Очень краткое введение на странице</h2>
        <hr>
        <h3>Ссылки на социальные сети</h3>
        <hr>
    </div>
    <!--END OF HEADER-->
    <!--START OF CONTENT-->
    <div>
        <p>
            Первый блок текста
        </p>
        <p>
            Второй блок текста
        </p>
        <ul>
            <li>Первый пункт</li>
            <li>Второй пункт</li>
            <li>Третий пункт</li>
        </ul>
    </div>
    <!--END OF CONTENT-->
    <!--START OF FOOTER-->
    <div>
        <hr>
        <p>
            Авторские права и контактная информация
        </p>
    </div>
    <!--END OF FOOTER-->
    3. Делаем красиво
    В этом задании вам нужно использовать все семантические теги, которые мы прошли в этом уроке. А также вспомнить про подключение стилей.
    Ориентируйтесь на образец, структуру тегов можно понять из подписей к блокам на картинке.

    Подсказка: CSS-файл уже прописан, вам нужно правильно настроить селекторы в HTML-файле, чтобы они заработали.
    Стили для задания 3
    style.css
    .body 
    {   
        font-family: "Arial",sans-serif;
        font-size: 14px;
        line-height: 20px;
        margin: 0;
        position: relative;
        border-radius: 4px;
        padding: 30px 30px;
        width: 500px;
    }
    
    .header
    {
        position: relative;
        padding: 16px 15px 10px;
        border-radius: 4px;
        background-color: #DFEEF3;
        border: 2px solid #66A5AD;
        width: 446px;
        margin-bottom: 10px;
    }
    
    .main
    {
        position: relative;
        padding: 16px 15px 10px;
        border-radius: 4px;
        background-color: #DFEEF3;
        border: 2px solid #66A5AD;
        width: 446px;
        display: grid;
        grid-template-areas: "nav nav sidebar" "columns columns sidebar";
        margin-bottom: 10px;
    }
    
    .nav
    {
        position: relative;
        padding: 16px 15px 10px;
        border-radius: 4px;
        background-color: #C9EED4;
        border: 2px solid #77CD86;
        grid-area: nav;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    .section
    {
        position: relative;
        padding: 16px 15px 10px;
        border-radius: 4px;
        background-color: #C9EED4;
        border: 2px solid #77CD86;
        grid-area: columns;
        display: flex;
        justify-content: space-around;
        margin-right: 10px;
        margin-bottom: 0;
    }
    
    .aside
    {
        position: relative;
        padding: 16px 15px 10px;
        border-radius: 4px;
        background-color: #C9EED4;
        border: 2px solid #77CD86;
        grid-area: sidebar;
    }
    
    .footer{
        position: relative;
        padding: 16px 15px 10px;
        border-radius: 4px;
        background-color: #DFEEF3;
        border: 2px solid #66A5AD;
        width: 446px;
    }
    
    p
    {
        position: relative;
        padding: 16px 15px 10px;
        border-radius: 4px;
        background-color: #FFF4EA;
        border: 2px solid #A67646;
        margin-bottom: 15px;
        margin-right: 10px;
    }
    4. Резюме
    Используя изученные в этом уроке теги, попробуйте создать собственное резюме. Подключите стили и красиво оформите шрифт, картинки, задний фон.

    Цвета можно брать тут - https://colorscheme.ru/
    Предыдущее занятие | Следующее занятие