Разное

Article html5: : The Article Contents element — HTML: HyperText Markup Language

10.12.2022

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>

Вложенные элементы article

При создании структуры документа спецификация HTML 5 позволяет помещать одни элементы article в другие. Это используется для того, чтобы показать то, как контенты этих элементов относятся друг к другу. А именно передать то, что содержимое дочерних элементов 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>

Вышеприведенный пример будет иметь следующую структуру (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.
1
Рабочий проект
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 мая по персоналу.

1

Загрузка таблиц JavaScript только в браузере. Включите JavaScript для просмотра данных.

  • Другие элементы, относящиеся к разделу: ,
  • Использование разделов и структур HTML

Последнее изменение:

В тегах HTML, New

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Элемент
Структура HTML-документа до и после HTML5: вот что изменилось
Элемент
идентифицирует автономный фрагмент контента, который теоретически может распространяться на другие веб-сайты и платформы как отдельная единица. Элемент
— хороший выбор для размещения целых сообщений блога, новостных статей и подобного контента.
Дисплей
блок
Использование
семантика | структурный

Независимая единица контента

Тег

является одним из новых семантических элементов, представленных в HTML5. В соответствии со спецификацией HTML5 :

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

Чаще всего используется в двух контекстах:

  • На странице с одним фрагментом контента можно использовать один элемент
    , чтобы содержать основной контент и отделять его от остальной части страницы. .
  • На странице с несколькими частями содержимого (страница индекса блога, страница результатов поиска, страница категории, лента новостей) можно использовать несколько элементов
    для содержания каждой отдельной части содержимого.

В любом случае, это функционально похоже на использование

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

Пример кода

  

Название сайта

Название сообщения в блоге

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Спецификация
HTML Standard
# the-article-element