На больших страницах содержится много контента, который помещён друг в друга. Внутри шапки может быть отдельная область с правилами использования, внутри main секции с формой, дополнительной информацией и так далее. Они могут быть выделены с помощью тега <section>, значение которого — разметка связанных, по смыслу, блоков внутри секции.
Может звучать немного запутано, но представьте себе страницу музыкального портала, у которого есть области:
Если это страница об исполнителе, то весь этот контент будет расположен внутри секции main, при этом стоит выделить и эти 4 секции. Они связаны с общим контентом, но являются самостоятельными единицами внутри него. Такая вёрстка может выглядеть следующим образом:
<main>
<h1>Blue October</h1>
<p>Американская группа из Хьюстона, играющая в стиле альтернативный рок</p>
<section>
<h2>Популярные треки</h2>
</section>
<section>
<h2>Дискография</h2>
</section>
<section>
<h2>Ближайшие концерты</h2>
</section>
</main>
Если «вытащить эти секции» из тега <main>, то они потеряют свой смысл, так как без текста об исполнителе такая информация может быть непонятна. Такая информация напрямую связана с основным содержанием и не может существовать без него.
Добавим в учебный пример форму заказа услуги. Эта форма для заказа именно той услуги, которая представлена на странице, поэтому секция находится внутри области main и вынесена в отдельный тег <section>.
<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>
<main>
<p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>
<section class="callback-form">
<h2>Оставить заявку</h2>
<form>
<!-- Здесь форма заказа услуги -->
</form>
</section>
</main>
В большинстве случаев все области section имеют свой заголовок. Это хороший способ понять, когда нужно добавить область section.
Создайте шапку сайта. Она состоит из 2-х элементов:
Добавьте секцию <main>. Внутри создайте две секции с заголовками второго уровня
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Область section дополняет основной контент и не должна существовать сама по себе
Следите за тем, что бы каждая секция имела свой заголовок