Мастерство в использовании тега Aside HTML5

Введение

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

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Настройка HTML-страницы

Откройте свой редактор кода и создайте новый файл с именем index.html, а затем добавьте следующую базовую структуру HTML:

<!doctype html>
<html>
  <head>
    <title>HTML Aside Tag Tutorial</title>
  </head>
  <body></body>
</html>

Создание основного контента

Внутри тега <body> давайте создадим некоторый основной контент. Добавьте следующий код:

<h1>Welcome to my blog!</h1>
<p>
  In this article, we'll explore the benefits of using HTML5. HTML5 is a markup
  language used for structuring and presenting content on the World Wide Web.
</p>

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

Теперь давайте добавим тег <aside>, который будет содержать дополнительную информацию о основном контенте. Добавьте этот код ниже абзаца в шаге 2:

<aside>
  <h2>About this article</h2>
  <p>
    This article was written by John Doe, a web developer who has been working
    in the industry for more than 8 years. He is passionate about web
    development and loves to share his knowledge with others.
  </p>
</aside>

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

Стилизация тега

Теперь добавьте следующий CSS, чтобы придать некоторый стиль тегу <aside>:

<style>
  aside {
    width: 300px;
    margin-left: 30px;
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
  }
</style>

Добавив этот CSS, мы дали некоторый стиль тегу <aside>. Ширина установлена в 300px, отступ слева равен 30px, и у него есть светло-серый фон с рамкой.

Добавление дополнительного контента в статью

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

<p>
  HTML5 is an important update to the HTML language. It offers new features and
  functionality, making it easier for developers to create web pages and
  applications. Some of the new features in HTML5 include:
</p>
<ul>
  <li>New semantic tags such as header, footer, article, and section</li>
  <li>Improved support for multimedia with video and audio tags</li>
  <li>Better accessibility with the nav and main tags</li>
</ul>

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

Резюме

В этом пошаговом практическом занятии мы узнали, как использовать тег HTML <aside> для добавления дополнительного контента, связанного с основным содержанием веб-страницы. Мы также узнали, как добавить некоторый стиль к тегу с использованием CSS. Использование тега <aside> помогает поисковым системам и веб-браузерам понять, какое содержание является важным, а какое — необязательным.

HTML-контент в aside