HTML элемент article

HTML элемент article — Задает содержание сайта, например, новости, статьи, записи блога, форума или др.
. Все HTML элементы.

HTML элемент article: Пример кода

 <h2>Пример создания HTML элемента article</h2>
Ниже приведен пример сообщения блога, размеченного элементом article:

<article>
 <header>
 <h2><a href="https://herbert.io">Краткая заметка о ношении шорт</a></h2>
 <p>Опубликовано среда, 10 февраля 2016 Лев Горбунов
 <a href="https://herbert.io/short-note/#comments">6 комментариев</a></p>
 </header>
 <p>Попутчик задал интересный вопрос: Почему вы носите шорты, а не брюки? Человек был одет в брюки как раз, так что я рассмотрел в вопросе двусмысленный характер, но я попытался дать честный ответ, несмотря на сомнительность. </p>
 <p>Короткий ответ заключается в том, что мне нравится носить шорты, длинный ответ...</p>
 <p><a href="https://herbert.io/short-note/">Читать далее: Краткая заметка о ношении шорт</a></p>
</article>


 <h2>Пример 2: создание элемента article</h2>
В этом примере показана запись в блоге с использованием элемента article, с некоторыми аннотациями <a href="http://htmllab.ru/semanticheskaya-razmetka/">schema.org</a>:

<article itemscope itemtype="https://schema.org/BlogPosting">
 <header>
 <h2 itemprop="headline">The Very First Rule of Life</h2>
 <p><time itemprop="datePublished" datetime="2016-02-28">3 days ago</time></p>
 </header>
 <p>If there’s a microphone anywhere near you, assume it’s hot and
 sending whatever you’re saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
 <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>
Here is that same blog post, but showing some of the comments:

 <article itemscope itemtype="https://schema.org/BlogPosting"> <header>
 <h2 itemprop="headline">The Very First Rule of Life</h2>
 <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
 </header>
 <p>If there’s a microphone anywhere near you, assume it’s hot and
 sending whatever you’re saying to the world. Seriously.</p>
 <p>...</p>
 <section>
 <h3>Comments</h3>
 <ol>
 <li itemprop="comment" itemscope itemtype="https://schema.org/UserComments" id="c1">
 <p>Posted by: <span itemprop="creator" itemscope itemtype="https://schema.org/Person">
 <span itemprop="name">George Washington</span>
 </span></p>
 <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
 <p>Yeah! Especially when talking about your lobbyist friends!</p>
 <li itemprop="comment" itemscope itemtype="https://schema.org/UserComments" id="c2">
 <p>Posted by: <span itemprop="creator" itemscope itemtype="https://schema.org/Person">
 <span itemprop="name">George Hammond</span>
 </span></p>
 <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
 <p>Hey, you have the same first name as me.</p>
 </li>
 </ol>
 </section>
</article>
Notice the use of an ordered list ol to organize the comments. Also note the comments are a subsection of the article, identified using a section element.

HTML элемент article: атрибуты

globals