HTML-тег <aside>

HTML-тег <aside> определяет контент, косвенно связанный с основным содержанием документа. Он часто используется для боковых панелей, цитат, рекламы и других типов дополнительной информации.

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

Пример HTML-тега <aside>

Вот простой пример, демонстрирующий использование тега <aside> : 

<!DOCTYPE html>
<html>
    <body>
        <h1>Main Content</h1>
        <p>This is the main content of the page.</p>

        <aside>
            <h2>Related Information</h2>
            <p>Here is some related information or additional context for the main content.</p>
        </aside>
    </body>
</html>
Пример тега HTML aside

Примечание: Тег <aside> не имеет предопределенного стиля. Его внешний вид зависит от примененного к нему CSS.

Когда использовать HTML-тег <aside>

Тег <aside> обычно используется для:

  • Боковые панели: дополнительный контент, такой как навигационные меню, ссылки или реклама.
  • Цитаты: выделенные цитаты или отрывки из основного содержания.
  • Ссылки по теме: Внешние или внутренние ссылки, предоставляющие дополнительную информацию.
  • Дополнительная информация: контент, который дополняет основной контент, но не является его непосредственной частью.

Стилизация тега <aside>

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            aside {
                background-color: #f0f0f0;
                border-left: 4px solid #007BFF;
                padding: 10px;
                margin: 10px 0;
            }
        </style>
    </head>
    <body>
        <h1>Main Content</h1>
        <p>This is the main content of the page.</p>

        <aside>
            <h2>Did You Know?</h2>
            <p>Supplementary information or interesting facts can be placed here.</p>
        </aside>
    </body>
</html>
Пример тега HTML aside

Семантическая важность HTML-тега <aside>

Тег <aside> имеет семантическое значение, поскольку он чётко указывает на то, что контент связан с основным контентом, но отделен от него. Это улучшает доступность и SEO, помогая поисковым системам и вспомогательным технологиям лучше понимать структуру вашего контента.

Советы по обеспечению доступности для HTML-тега <aside>

Для обеспечения доступности:

  • Используйте содержательные заголовки в <aside> для предоставления контекста.
  • Убедитесь, что дополнительный контент действительно полезен и дополняет основной контент.
  • Обеспечьте правильное оформление, чтобы сделать <aside> визуально отличным для пользователей.