HTML: Секция
Основной контент страницы (внутри тега main
) также может быть размечен с использованием множества различных тегов HTML5. Одним из таких тегов является section
, позволяющий разметить небольшой участок контента, связанный по смыслу с основным содержанием. Например, мы хотим разметить форму заказа услуги. Такой контент напрямую связан с содержанием нашей страницы, но не может существовать без него. В таком случае его можно разметить с помощью тега 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
является участком связанного между собой контента (раздел статьи, форма связи и т.д.), то зачастую внутри находится заголовок. Данное правило не является обязательным.
Задание
Создайте шапку сайта. Она состоит из 2-х элементов:
* Логотип
* Секция навигации. Внутри неё маркированный список из двух элементов
Добавьте секцию main
. Внутри создайте две секции с заголовками в теге h2