HTML: Самостоятельная секция
Помимо тега <section>, для обозначения секции используется тег <article>. Он предназначается для разметки секции, которая может быть использована самостоятельно и не привязана структурно к конкретной странице. Например, блок с курсом валют, погода, превью новости или статьи. Данные блоки хоть и могут напрямую касаться текущей страницы, но они представляют собой самостоятельную единицу, которая не потеряет смысл, если взглянуть на неё отдельно от контекста.
В связи с тем, что <article> может быть использован самостоятельно, он обязательно внутри себя содержит заголовок.
<header>
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.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>.
Полезное
Если область не потеряет свой смысл вне страницы, то её можно обернуть в
<article>Все области
articleобязательно имеют заголовок
HTML: Самостоятельная секция
Помимо тега <section>, для обозначения секции используется тег <article>. Он предназначается для разметки секции, которая может быть использована самостоятельно и не привязана структурно к конкретной странице. Например, блок с курсом валют, погода, превью новости или статьи. Данные блоки хоть и могут напрямую касаться текущей страницы, но они представляют собой самостоятельную единицу, которая не потеряет смысл, если взглянуть на неё отдельно от контекста.
В связи с тем, что <article> может быть использован самостоятельно, он обязательно внутри себя содержит заголовок.
<header>
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.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>.
Полезное
Если область не потеряет свой смысл вне страницы, то её можно обернуть в
<article>Все области
articleобязательно имеют заголовок
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, querySelectorAll, expect }) => {
const header = query(document, 'header');
expect(header).to.be.visible;
const img = query(header, 'img');
expect(img).to.be.visible;
const nav = query(header, 'nav');
expect(nav).to.be.visible;
const ul = query(nav, 'ul');
expect(ul).to.be.visible;
const li = querySelectorAll(ul, 'li');
expect(li).to.be.length(2);
const main = query(document, 'main');
expect(main).to.be.visible;
const section = query(main, 'section');
expect(section).to.be.visible;
const h2 = query(section, 'h2');
expect(h2).to.be.visible;
const articles = querySelectorAll(section, 'article');
expect(articles).to.be.length(2);
articles.forEach((article) => {
const h3 = query(article, 'h3');
expect(h3).to.be.visible;
});
});Решение учителя откроется через:
20:00
