Тематические разделы (section)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 29
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Эта серия заданий поможет вам на практике освоить использование семантических тегов для создания тематических разделов на веб-странице. Вы научитесь правильно структурировать контент с помощью тега `<section>`, отделять его от других частей страницы и использовать вложенные элементы, такие как `<article>`, `<header>` и `<footer>`, для создания логичной и понятной структуры документа. Семантическая разметка важна не только для SEO, но и для доступности, так как помогает скринридерам правильно интерпретировать ваш контент. Вам предстоит работать с готовым CSS и заполнять пропуски в HTML-коде, чтобы увидеть, как семантика влияет на структуру документа.
Список тем

Создание простого раздела

id: 37870_semantic-section-1

Давайте начнем с самого простого. Ваша задача — создать базовый тематический раздел на странице. Внутри уже есть заголовок и абзац. Вам нужно обернуть их в подходящий по смыслу тег, который определяет самостоятельный раздел документа.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f4f9;
}

section {
  background-color: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

h2 {
  color: #333;
  margin-top: 0;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

p {
  color: #555;
  line-height: 1.6;
}
HTML
<input1>
  <h2>О нашем курсе</h2>
  <p>Наш курс по HTML поможет вам изучить основы веб-разработки с нуля.</p>
</input1>
Для создания общего тематического раздела используется тег `<section>`. Он группирует связанный по смыслу контент. Просто оберните существующий `h2` и `p` в открывающий и закрывающий тег `<section>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Раздел с заголовком

id: 37870_semantic-section-2

Каждый тематический раздел должен иметь заголовок, который его описывает. В этом задании вам нужно не только создать сам раздел, но и добавить для него заголовок соответствующего уровня.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f4f9;
}

.services {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.services h2 {
  color: #2c3e50;
  margin: 0 0 15px 0;
}

.services p {
  color: #34495e;
}
HTML
<input1 class="services">
  <input2>Наши услуги</input2>
  <p>Мы предлагаем широкий спектр услуг в области веб-разработки.</p>
</input1>
Оберните весь контент в тег `<section>`. Для заголовка внутри раздела используйте один из тегов заголовков, например, `<h2>`. Семантически правильно, когда у каждого раздела есть свой заголовок.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Несколько разделов на странице

id: 37870_semantic-section-3

Веб-страницы часто состоят из нескольких независимых блоков. Ваша задача — правильно разметить два тематических раздела: 'О нас' и 'Контакты', используя соответствующий семантический тег для каждого.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}

.page-section {
  padding: 15px;
  margin-bottom: 10px;
  border-left: 4px solid #1abc9c;
  background-color: #f1fefb;
}

.page-section h2 {
  margin-top: 0;
  color: #16a085;
}

.page-section p {
  margin-bottom: 0;
}
HTML
<input1 class="page-section">
  <h2>О нас</h2>
  <p>Мы — команда энтузиастов, увлеченных веб-технологиями.</p>
</input1>

<input2 class="page-section">
  <h2>Контакты</h2>
  <p>Вы можете связаться с нами по электронной почте.</p>
</input2>
Каждый блок ('О нас' и 'Контакты') является самостоятельным тематическим разделом. Вам нужно обернуть каждый из них в свой собственный тег `<section>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Раздел со статьями (section и article)

id: 37870_semantic-section-4

Часто внутри одного большого раздела есть несколько независимых, самодостаточных блоков контента, например, посты в блоге. Используйте тег `<section>` для общего блока 'Новости' и вложите в него две статьи, используя подходящий для этого тег.

CSS
body { 
  font-family: sans-serif; 
  background: #f0f2f5; 
  padding: 15px; 
}

.news-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.news-section > h2 {
  color: #1c1e21;
  margin-top: 0;
}

.news-article {
  border-top: 1px solid #ddd;
  padding-top: 15px;
  margin-top: 15px;
}

.news-article h3 {
  color: #056be1;
  margin-bottom: 5px;
}

.news-article p {
  color: #606770;
  line-height: 1.4;
}
HTML
<input1 class="news-section">
  <h2>Последние новости</h2>

  <input2 class="news-article">
    <h3>Новый рекорд в освоении космоса</h3>
    <p>Команда астронавтов успешно завершила миссию.</p>
  </input2>

  <input3 class="news-article">
    <h3>Экологическая инициатива: итоги года</h3>
    <p>Волонтеры высадили более миллиона деревьев.</p>
  </input3>
</input1>
Для создания общего тематического раздела ('Новости') используйте тег `<section>`. Каждая отдельная новость является самодостаточной записью, поэтому её следует обернуть в тег `<article>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Раздел с header и footer

id: 37870_semantic-section-5

Тематические разделы могут иметь свою собственную 'шапку' и 'подвал'. Дополните структуру раздела 'Тарифы', добавив в него семантические теги для вводной и заключительной частей.

CSS
body { 
  font-family: sans-serif; 
  padding: 15px; 
}
.tariffs {
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fafafa;
}
.tariffs header {
  padding: 10px 15px;
  background: #e9ecef;
  border-bottom: 1px solid #ccc;
}
.tariffs header h2 {
  margin: 0;
}
.tariffs p {
  padding: 0 15px;
}
.tariffs footer {
  padding: 10px 15px;
  font-size: 0.9em;
  text-align: right;
  color: #6c757d;
  border-top: 1px solid #ccc;
}
HTML
<section class="tariffs">
  <input1>
    <h2>Наши тарифы</h2>
  </input1>

  <p>Мы предлагаем гибкие тарифные планы для любого бизнеса.</p>

  <input2>
    <p>Цены указаны без учета НДС.</p>
  </input2>
</section>
Для группировки вводного контента раздела (например, заголовка) используйте тег `<header>`. Для заключительной части, содержащей, например, примечание или ссылку 'Подробнее', используйте тег `<footer>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вложенные разделы

id: 37870_semantic-section-6

Разделы можно вкладывать друг в друга для создания более сложной структуры. Создайте основной раздел 'Часто задаваемые вопросы', а внутри него — два подраздела для каждой категории вопросов.

CSS
body { font-family: sans-serif; padding: 10px; }

.faq-list {
  background: #f9f9f9;
  border: 1px solid #e3e3e3;
  padding: 20px;
  border-radius: 5px;
}
.faq-list > h2 {
  margin-top: 0;
}

.faq-category {
  margin-top: 20px;
  padding-left: 15px;
  border-left: 3px solid #5dade2;
}
.faq-category h3 {
  color: #2e86c1;
}
HTML
<input1 class="faq-list">
  <h2>Часто задаваемые вопросы</h2>

  <input2 class="faq-category">
    <h3>Общие вопросы</h3>
    <p>Здесь ответы на общие вопросы о сервисе.</p>
  </input2>

  <input3 class="faq-category">
    <h3>Технические вопросы</h3>
    <p>Решения для распространенных технических проблем.</p>
  </input3>

</input1>
Вам нужно создать три тега `<section>`. Один будет внешним, общим. Два других будут вложены в него. Не забудьте, что у каждого раздела должен быть свой заголовок (h2 для основного, h3 для вложенных).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексная структура с aside

id: 37870_semantic-section-7

Давайте соберем сложную структуру. У нас есть основной контент — статья о путешествиях. И есть дополнительный блок с интересными фактами, который связан с основным содержанием, но не является его частью. Разметьте основной раздел и боковую панель.

CSS
body { font-family: sans-serif; color: #333; }
.page-wrapper { padding: 15px; }
.main-content { 
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
}
.main-content h2 { margin-top: 0; }

.sidebar {
  background-color: #eef7ff;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #cce0ff;
}
.sidebar h3 { margin-top: 0; color: #0056b3; }
HTML
<div class="page-wrapper">
  <input1 class="main-content">
    <h2>Путешествие по Европе</h2>
    <p>Наш гид по самым красивым городам старого света.</p>
    <img src="https://naytikurs.ru/img/4j.jpeg" alt="Улица в Европе" style="max-width: 100%; border-radius: 5px;">
  </input1>

  <input2 class="sidebar">
    <h3>Интересные факты</h3>
    <p>В Европе более 400 объектов всемирного наследия ЮНЕСКО.</p>
  </input2>
</div>
Основной контент, посвященный путешествиям, должен быть в теге `<section>`. Блок с 'Интересными фактами', который относится к теме, но является второстепенным, следует разместить в теге `<aside>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру