HTML элемент article — Задает содержание сайта, например, новости, статьи, записи блога, форума или др.
. Все HTML элементы.
<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.
globals |