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.