HTML: Самостоятельная секция
Помимо тега section
, для обозначения секции используется тег article
. Он предназначается для разметки секции, которая может быть использована самостоятельно и не привязана структурно к конкретной странице. Например, блок с курсом валют, погода, превью новости или статьи. Данные блоки хоть и могут напрямую касаться текущей страницы, но они представляют собой самостоятельную единицу, которая не потеряет смысл, если взглянуть на неё отдельно от контекста.
В связи с тем, что article
может быть использован самостоятельно, он обязательно внутри себя содержит заголовок.
<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>
<section class="more">
<h2>Читайте также</h2>
<article class="article-block">
<h3>Услуга 2</h3>
<p>Описание новой услуги</p>
<a href="#">Ссылка на услугу</a>
</article>
<article class="article-block">
<h3>Услуга 3</h3>
<p>Описание новой услуги</p>
<a href="#">Ссылка на услугу</a>
</article>
<article class="article-block">
<h3>Услуга 4</h3>
<p>Описание новой услуги</p>
<a href="#">Ссылка на услугу</a>
</article>
</section>
</main>
Обратите внимание, что сами article
мы обернули в section
, так как эта секция напрямую связана с текущей страницей и показывает похожие услуги. А услуги размечены с помощью article
. Они могут быть «выдернуты» из контекста, и всё равно будет понятно, что это описание конкретной услуги, которую мы предлагаем.
Задание
Создайте шапку сайта. Она состоит из 2-х элементов:
* Логотип
* Секция навигации. Внутри неё маркированный список из двух элементов
Добавьте секцию main
. Внутри создайте секцию с заголовком в теге h2
и два блока с описанием новых услуг. Не забудьте, что внутри тега article
обязательно содержится заголовок. Сами заголовки внутри article
разметьте тегом h3
.
Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.