HTML5 — Элемент article — ИТ Шеф
Статья, в которой рассматривается HTML-элемент article из категории sectioning.
Назначение элемента article
Элемент article предназначен для создания секции в документе, контент которой представляет собой некоторое завершённое или автономное содержимое. Другими словами, с помощью данного элемента можно добавить смысл в документ, который будет говорить о том, что данный контент является некоторой вещью, и может быть рассмотрен и понят пользователем отдельно от остального содержимого страницы.
Обычно этот элемент применяется для создания секции на странице, содержимое которой представляет собой статью, пост блога, запись на форуме, комментарий пользователя, интерактивный виджет, гаджет, или любой другой независимый контент.
Применение элемента article
Например, рассмотрим использование элемента article для разметки поста блога:
<article>
<!-- Заголовок поста -->
<header>
<h2>Тема поста</h2>
<p>
<time datetime="2015-10-09">
Дата публикации
</time>
</p>
</header>
<!-- Основное содержимое поста -->
<p>.
..</p>
<!-- Футер поста -->
<footer>
<!-- Содержимое футера -->
</footer>
</article>
..</p>
<!-- Футер поста -->
<footer>
<!-- Содержимое футера -->
</footer>
</article>
Вложенные элементы article
При создании структуры документа спецификация HTML 5 позволяет помещать одни элементы article в другие. Это используется для того, чтобы показать то, как контенты этих элементов относятся друг к другу. А именно передать то, что содержимое дочерних элементов article связано с содержимым родительского элемента
Например, рассмотрим фрагмент кода, содержащий статью с комментариями.
<article>
<!-- Заголовок статьи -->
<header>
<h2>Тема статьи</h2>
<p>
<time datetime="2015-10-09">
Дата публикации
</time>
</p>
</header>
<!-- Основное содержимое статьи -->
<p>. ..</p>
<!-- Секция статьи, содержащая комментарии -->
<section>
<!-- Заголовок секции, содержащей комментарии -->
<h2>Комментарии</h2>
<!-- 1 комментарий к статье -->
<article>
<!--Футер 1 комментария-->
<footer>
<p>Автор комментария</p>
<p>
<time datetime="2015-10-10">
Дата комментария
</time>
</p>
</footer>
<!-- Содержимое 1 комментария -->
<p>
Текст комментария...
</p>
</article>
<!--2 комментарий к статье-->
<article>
<!--Футер 2 комментария-->
<footer>
<p>Автор комментария</p>
<p>
<time datetime="2015-10-11">
Текст комментария
</time>
</p>
</footer>
<!-- Содержимое 2 комментария -->
<p>
Содержимое комментария. ..
</p>
</article>
</section>
</article>
..</p>
<!-- Секция статьи, содержащая комментарии -->
<section>
<!-- Заголовок секции, содержащей комментарии -->
<h2>Комментарии</h2>
<!-- 1 комментарий к статье -->
<article>
<!--Футер 1 комментария-->
<footer>
<p>Автор комментария</p>
<p>
<time datetime="2015-10-10">
Дата комментария
</time>
</p>
</footer>
<!-- Содержимое 1 комментария -->
<p>
Текст комментария...
</p>
</article>
<!--2 комментарий к статье-->
<article>
<!--Футер 2 комментария-->
<footer>
<p>Автор комментария</p>
<p>
<time datetime="2015-10-11">
Текст комментария
</time>
</p>
</footer>
<!-- Содержимое 2 комментария -->
<p>
Содержимое комментария.
Вышеприведенный пример будет иметь следующую структуру (outline):
[article] Тема статьи
[section] Комментарии
[article] Untitled
[article] Untitled
Примечание: Согласно спецификации HTML5, элемент article не может иметь элемент main в качестве своего потомка.
| HTML | WebReference
- Содержание
- Синтаксис
- Закрывающий тег
- Атрибуты
- Пример
- Спецификация
- Браузеры
Элемент <article> (от англ. article — статья) представляет собой независимый фрагмент веб-страницы и, как правило, включает «шапку», основное содержимое и «подвал», в которых располагаются такие части, как заголовок, текст, имя автора, дата публикации, метки, рейтинг статьи и др. <article> обычно применяется для статей сайта, сообщений блога и форума, комментариев.
Внутри <article> запрещено использовать элемент <main>.
Каждый элемент <article> обязательно должен содержать заголовок через <h2>,…,<h6>. Минимальная структура элементов продемонстрирована ниже.
<article> <h2>Заголовок</h2> <p>Текст статьи</p> </article>
Синтаксис
<article> </article>
Закрывающий тег
Обязателен.
Атрибуты
Для этого элемента доступны универсальные атрибуты и события.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>article</title> </head> <body> <article> <header> <h2>Следы невиданных зверей</h2> </header> <p>История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.</p> </article> </body> </html>
Спецификация
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
HTML5. | Рабочий проект |
| HTML5 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
| 9 | 12 | 5 | 11.10 | 4.1 | 4 |
| 2.2 | 4 | 11 | 5 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Документ
См. также
- Знакомство с HTML
- Что всё это значит?
- Элемент <article>
Практика
- Дата публикации
- Комментарии
- Создание статьи
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.
10.2018
Редакторы: Влад Мержевич
&двоеточие; Элемент «Содержание статьи» — HTML: Язык гипертекстовой разметки
HTML-элемент
Данный документ может содержать несколько статей; например, в блоге, который показывает текст каждой статьи одну за другой по мере прокрутки читателем, каждая запись будет содержаться в элементе
| Категории контента | Потоковое содержание, раздел контента, ощутимое содержание |
|---|---|
| Разрешенный контент | Текущее содержимое. |
| Отсутствие тега | Нет, начальный и конечный теги обязательны. |
| Разрешенные родители | Любой элемент, принимающий
потоковое содержание. Обратите внимание, что элемент . |
| Неявная роль ARIA | статья |
| Разрешенные роли ARIA | приложение , документ , подача , основная , нет , презентация регион |
| Интерфейс DOM | HTMLЭлемент |
Этот элемент включает только глобальные атрибуты.
- Каждый
<артикул>следует идентифицировать, как правило, путем включения заголовка (элемент— - Когда элемент
элементов, вложенных вэлемента, представляющего сообщение в блоге. - Информация об авторе 9Элемент 0004
может быть предоставлен через элемент - Дата и время публикации элемента
datetimeэлемента
<артикул>Парк Юрского периода
<раздел>Обзор
Динозавры были великолепны!
<раздел>Отзывы пользователей
<статья>Слишком страшно!
Слишком страшно для меня.
<нижний колонтитул> <р> опубликовано <время datetime="2015-05-16 19:00">16 мая Лиза.Люблю динозавров!
Согласен, динозавры мои любимые.
<нижний колонтитул> <р> опубликовано Том. <нижний колонтитул> <р> опубликовано <время datetime="2015-05-15 19:00">15 мая по персоналу.
<статья>
| Спецификация |
|---|
| HTML Standard # the-article-element |
000Z»> 1 ноября 2022 г. , участниками MDN
