Смысловой Блок. Тег article

Смысловой Блок. Тег article

Coursme
7-9 мин
31 янв. 2024

Тег article представляет целостный блок информации на странице, который может рассматриваться отдельно и использоваться независимо от других блоков. Например, это может быть пост на форуме или статья в блоге, онлайн-журнале, комментарий пользователя.

Один элемент article может включать несколько элементов article. Например, мы можем заключить в элемент article всю статью в блоге, и этот элемент будет содержать другие элементы article, которые представляют комментарии к этой статье в блоге. То есть статья в блоге может рассматриваться нами как отдельная семантическая единица, и в то же время комментарии также могут рассматривать отдельно вне зависимости от другого содержимого.

Использование article на примере статьи из блога с комментариями:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Семантическая разметка в HTML5</title>
</head>
<body>
   <article>
       <h2>Lorem ipsum</h2>
       <div>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat ...
       </div>
       <div>
           <h3>Комментарии</h3>
           <article>
               <h4>Неплохо</h4>
               <p>Норм статья</p>
           </article>
           <article>
               <h4>Бред</h4>
               <p>Мне не понравилось...</p>
           </article>
           <article>
               <h4>Непонятно</h4>
               <p>О чем вообще все это?</p>
           </article>
       </div>
   </article>
</body>
</html>

Здесь вся статья может быть помещена в элемент article, и в то же время каждый отдельный комментарий также представляет отдельный элемент article.

При использовании article надо учитывать, что каждый элемент article должен быть идентифицирован с помощью включения в него заголовка h1-h6.

Заключение

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

Назад
Следующий урок
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Курсы
Блог
Меню