Боковая панель (aside)

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

Опубликовано 04.04.2025
Просмотры 22
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Тег `<aside>` — это ваш инструмент для создания блоков с дополнительной информацией, которая связана с основным содержанием страницы лишь косвенно. Представьте себе статью в блоге. Основной текст — это главное. А вот список похожих статей, реклама, биография автора или глоссарий терминов — всё это идеальные кандидаты для размещения внутри `<aside>`. В этих заданиях мы попрактикуемся в использовании `<aside>` для разных целей: от создания классической боковой панели (сайдбара) до выделения цитат и навигационных блоков. Вы научитесь правильно встраивать этот семантический элемент в структуру документа, чтобы сделать ваш код более понятным и для браузеров, и для других разработчиков. Главное — помнить, что контент в `<aside>` должен быть необязательным для понимания основного материала.
Список тем

Создание базовой боковой панели

id: 37867_html-aside-1

Создайте простую структуру страницы со статьей и боковой панелью. Основной контент уже находится в теге `<main>`. Ваша задача — обернуть дополнительную информацию в подходящий семантический тег, чтобы она стала боковой панелью.

CSS
.page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: sans-serif;
  background: #f0f0f0;
  padding: 15px;
  border-radius: 8px;
}
main {
  background: #fff;
  padding: 15px;
  border-radius: 4px;
}
.sidebar {
  background: #e7f5ff;
  padding: 15px;
  border-left: 4px solid #1890ff;
  border-radius: 4px;
}
HTML
<div class="page-wrapper">
  <main>
    <h1>Основной заголовок статьи</h1>
    <p>Это основной контент страницы, который несет главную смысловую нагрузку.</p>
  </main>

  <input1 class="sidebar">
    <h3>Дополнительная информация</h3>
    <p>Эти сведения связаны с основной темой, но не являются её частью.</p>
  </input1>
</div>
Для создания боковой панели с контентом, который лишь косвенно связан с основным содержанием, используется семантический тег `<aside>`. Вам нужно заменить `input1` на этот тег.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Боковая панель с заголовком

id: 37867_html-aside-2

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

CSS
.page-wrapper {
  font-family: sans-serif;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
}
.related-links {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  padding: 15px;
  border-radius: 4px;
}
.related-links h3 {
  margin-top: 0;
  color: #d46b08;
}
.related-links ul {
  padding-left: 20px;
  margin-bottom: 0;
}
HTML
<div class="page-wrapper">
  <input1 class="related-links">
    <input2>Популярные статьи</input2>
    <ul>
      <li>Статья о CSS</li>
      <li>Статья о JavaScript</li>
    </ul>
  </input1>
</div>
Сначала используйте тег `<aside>` для создания контейнера боковой панели. Затем для заголовка 'Популярные статьи' используйте один из тегов заголовков, например, `<h3>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вложенный aside для цитаты

id: 37867_html-aside-3

Тег `<aside>` не всегда является боковой панелью. Его можно использовать внутри `<article>` для выделения информации, например, цитаты или сноски. Создайте такой блок внутри статьи и примените к нему готовый CSS-класс.

CSS
.article-content {
  font-family: sans-serif;
  line-height: 1.6;
}
.pull-quote {
  float: right;
  width: 45%;
  margin: 0 0 10px 15px;
  padding: 10px;
  background: #f0f2f5;
  border-left: 3px solid #595959;
  font-style: italic;
}
HTML
<article class="article-content">
  <h2>История HTML</h2>
  <p>HTML (HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц.</p>
  
  <input1 class="input2">
    <p>"Семантическая верстка улучшает доступность и SEO."</p>
  </input1>

  <p>Первая версия HTML была создана Тимом Бернерсом-Ли в 1991 году. С тех пор язык постоянно развивался.</p>
</article>
Для выделения цитаты, которая является дополнением к основному тексту, используйте тег `<aside>`. В качестве значения для атрибута `class` укажите `pull-quote`, чтобы применить стили.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Рекламный блок

id: 37867_html-aside-4

Реклама — еще один распространенный кандидат на размещение в `<aside>`, так как она не является частью основного контента. Создайте рекламный блок с изображением, указав тег для блока и атрибут для стилизации.

CSS
.ad-banner {
  padding: 10px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  text-align: center;
  border-radius: 4px;
}
.ad-banner span {
  display: block;
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 5px;
}
.ad-banner img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
HTML
<input1 input2="ad-banner">
  <span>Реклама</span>
  <img src="https://naytikurs.ru/img/5.png" alt="Рекламный баннер">
</input1>
Используйте тег `<aside>` для обертывания рекламного блока. Чтобы применить CSS-стили, добавьте атрибут `class` со значением `ad-banner`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Панель с дополнительными определениями

id: 37867_html-aside-5

Представьте, что вы пишете техническую статью. Можно вынести определения терминов в отдельный блок. Создайте такой глоссарий, используя теги `<aside>` и `<dl>` (список определений).

CSS
.glossary {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  padding: 15px;
  font-family: sans-serif;
  border-radius: 5px;
}
.glossary h4 {
  margin: 0 0 10px 0;
  color: #389e0d;
}
.glossary dt {
  font-weight: bold;
}
.glossary dd {
  margin-left: 0;
  margin-bottom: 10px;
}
HTML
<input1 class="glossary">
  <h4>Глоссарий</h4>
  <input2>
    <dt>Семантика</dt>
    <dd>Раздел языкознания, изучающий значение единиц языка.</dd>
    <dt>HTML5</dt>
    <dd>Пятая версия языка гипертекстовой разметки.</dd>
  </input2>
</input1>
Для контейнера глоссария используйте `<aside>`. Внутри него для создания списка терминов и их определений используется тег `<dl>` (description list).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ссылки на соцсети

id: 37867_html-aside-6

Блок со ссылками на социальные сети часто размещают в боковой панели. Создайте такой блок, используя тег `<aside>` и добавив ему уникальный идентификатор для возможной навигации или стилизации.

CSS
#social-links {
  padding: 15px;
  background: #e6f7ff;
  border-radius: 8px;
  font-family: sans-serif;
}
#social-links h4 {
  margin: 0 0 10px;
}
#social-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
}
#social-links a {
  text-decoration: none;
  color: #096dd9;
}
HTML
<input1 input2="social-links">
  <h4>Мы в соцсетях</h4>
  <ul>
    <li><a href="#">vk</a></li>
    <li><a href="#">od</a></li>
    <li><a href="#">tg</a></li>
  </ul>
</input1>
Используйте тег `<aside>` как контейнер. Для присвоения уникального идентификатора элементу применяется атрибут `id`. Его значением должно быть `social-links`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Полная структура боковой панели

id: 37867_html-aside-7

Закрепим знания. Создайте полноценную боковую панель, которая включает заголовок, текстовый абзац и список. Вам предстоит заполнить несколько пропусков, включая основной тег контейнера.

CSS
.sidebar-full {
  font-family: sans-serif;
  padding: 1em;
  background-color: #f3f3f3;
  border-radius: 5px;
}
.sidebar-full h4 {
  margin-top: 0;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5em;
}
.sidebar-full p {
  font-size: 0.9em;
  line-height: 1.5;
}
.sidebar-full ul {
  list-style: square;
  padding-left: 20px;
}
HTML
<input1 class="sidebar-full">
  <input2>О нас</input2>
  <p>Это краткая информация о нашем проекте, его целях и задачах.</p>
  <h4>Наши разделы</h4>
  <input3>
    <li>Новости</li>
    <li>Статьи</li>
    <li>Контакты</li>
  </input3>
</input1>
Основной контейнер должен быть тегом `<aside>`. Заголовок 'О нас' следует обернуть в тег `<h4>`. Для списка разделов используйте тег `<ul>` (маркированный список).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру