HTML Academy · Урок

aside: дополнительное содержимое

Используйте aside для боковых панелей и косвенно связанного содержимого

«aside: дополнительное содержимое» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Дополнительный блок

Элемент <aside> размечает содержимое, которое косвенно связано с окружающим содержимым:

Его можно отделить от основного содержимого, не меняя смысл основного содержимого
Представьте боковые панели, выносные блоки, выделенные цитаты и рекламу

Дополнительный блок в статье

Внутри статьи дополнительный блок содержит связанную, но не обязательную для повествования информацию:

<article>
  <h2>How the Internet Works</h2>
  <p>The Internet is a global network of computers...</p>

  <aside>
    <h3>Did You Know?</h3>
    <p>The first email was sent in 1971 by Ray Tomlinson.</p>
  </aside>

  <p>Data travels in packets across routers...</p>
</article>

Дополнительный блок на уровне страницы

На уровне страницы дополнительный блок используется для боковых панелей:

<div class="layout">
  <main>
    <article>...</article>
  </main>

  <aside>
    <h2>Related Articles</h2>
    <ul>...</ul>

    <h2>Newsletter</h2>
    <p>Subscribe for updates.</p>
  </aside>
</div>

Роль дополнительного блока в ARIA

Дополнительный блок на уровне страницы соответствует роли role="complementary":

<aside aria-label="Related resources">
  <h2>Related resources</h2>
  ...
</aside>
<!-- Multiple asides should be uniquely labeled
     Screen reader users can jump directly to complementary regions -->

Выделенные цитаты в дополнительном блоке

Выделенные цитаты (фрагменты цитат для визуального эффекта) можно разметить как дополнительный блок:

<aside class="pullquote">
  <blockquote>
    <p>HTML is the foundation of the web — learn it well.</p>
  </blockquote>
</aside>

Реклама в дополнительном блоке

Рекламные блоки в боковых панелях можно размечать как дополнительные блоки:

<aside aria-label="Advertisement">
  <p class="sr-only">Advertisement</p>
  <img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>

Дополнительный блок и раздел

Главное различие:

<aside> — косвенно связан с основным содержимым и дополняет его
<section> — тематически относится к основному содержимому

Дополнительный блок для терминов глоссария

Используйте дополнительный блок, чтобы определять термины, употреблённые в статье:

<article>
  <p>The DOM (Document Object Model) is updated when...</p>

  <aside id="dom-def">
    <dl>
      <dt>DOM</dt>
      <dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
    </dl>
  </aside>
</article>

Несколько разделов боковой панели

Дополнительный блок боковой панели может содержать несколько независимых разделов:

<aside aria-label="Sidebar">
  <section>
    <h2>About the Author</h2>
    <p>Jane Smith is a senior web developer...</p>
  </section>
  <section>
    <h2>Popular Posts</h2>
    <ul>...</ul>
  </section>
</aside>

Дополнительному блоку не нужен заголовок

В отличие от раздела, дополнительному блоку не обязательно иметь заголовок:

<!-- Valid aside without heading: -->
<aside>
  <img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
  <h2 class="sr-only">Promotions</h2>
  <img src="banner.jpg" alt="20% off this week only">
</aside>

Дополнительный блок не предназначен для оформления боковой панели

Дополнительный блок имеет семантическое значение — не используйте его только для визуального размещения боковой панели:

<!-- BAD: aside used for layout only -->
<aside class="right-column">  <!-- no semantic relationship to main content -->
  <div class="ad">...</div>
</aside>

<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>

Быстрая проверка

Какой ориентир роли ARIA соответствует дополнительному блоку на уровне страницы?

Итоги: дополнительный блок

Основные сведения о дополнительном блоке:

Содержимое, косвенно связанное с окружающим содержимым
Боковая панель на уровне страницы → дополнительная область
Внутри статьи → вспомогательная информация (определения терминов, выносные блоки)
Помечайте несколько дополнительных блоков метками доступности
Не используйте для простых контейнеров оформления — для этого предназначен div

Часто задаваемые вопросы

Урок «aside: дополнительное содержимое» бесплатный?

Да — полный текст урока «aside: дополнительное содержимое» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «aside: дополнительное содержимое»?

Используйте aside для боковых панелей и косвенно связанного содержимого Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «aside: дополнительное содержимое»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy