Теория
Теория

Тег aside, дополнительное содержание

Помимо <section> и <article> есть ещё один крупный логический контейнер. Это тег <aside>.

Тег <aside> включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями.

<aside>
  Я скромный блок с курсами валют на сайте про рыбок
</aside>

На нашей внутренней странице тоже стоит предусмотреть <aside>. Позже мы сможем включить туда ссылки на похожие посты блога или ленту постов из Твиттера, или что-то подобное (кто знает, что придёт в голову боссу).

В стилях для прототипирования мы по-разному оформили теги, которые применяются для решения разных задач. При этом мы опирались на систему типов спецификации HTML. Вот расшифровка:

Пунктиром выделен особый тег <body>.
Синей рамкой выделяются поточные теги, которыми обычно размечают крупные структурные блоки страниц, например <main>.
Фиолетовой рамкой выделяются теги для создания смысловых разделов, например <section>.
Оранжевой рамкой выделяются заголовочные теги, например <h1>.
Розовой рамкой выделяются поточные теги, которыми обычно размечают непосредственно текстовые элементы, например <p>.

Конечно, в спецификации больше типов, но мы не стали оформлять все, а ограничились только теми тегами, которые понадобятся нам в прототипе.

index.html

HTML

<!DOCTYPE html> <html lang="ru"> <head> <title>Сайт начинающего верстальщика</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> <nav> На главную </nav> </header> <main> <article> День первый. Как я забыл покормить кота. Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить. Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота. </article> </main> <footer> Подвал сайта </footer> </body> </html>

ЗадачиВыполнено

После <article> внутри <main> добавьте тег <aside> с текстом Здесь могла быть ваша реклама.

Тег aside, дополнительное содержание

Вход

Регистрация

Восстановление доступа