0Pricing
HTML Academy · Урок

Элемент article: автономное содержимое

Используйте article для содержимого, которое можно распространять отдельно

«Элемент article: автономное содержимое» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое элемент статьи

Элемент <article> представляет самостоятельное содержимое, которое можно распространять отдельно:

  • Оно сохраняет смысл вне контекста страницы
  • Его можно распространять через агрегаторы (RSS, карточки в социальных сетях), не теряя смысла

Когда использовать элемент статьи

Используйте <article> для:

  • Публикаций в блоге
  • Новостных статей
  • Сообщений на форуме
  • Карточек товаров
  • Комментариев (отдельные комментарии являются статьями)
  • Виджетов или мини-приложений

Структура статьи

Типичная статья содержит шапку, содержимое и нижний колонтитул:

<article>
  <header>
    <h2><a href="/posts/html-guide">HTML5 Complete Guide</a></h2>
    <p>By <a rel="author" href="/authors/jane">Jane Smith</a></p>
    <time datetime="2025-01-15">January 15, 2025</time>
  </header>

  <p>HTML5 brought many semantic improvements to the web...</p>

  <footer>
    <p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/web">Web</a></p>
  </footer>
</article>

Вложенные статьи (комментарии)

Статьи можно вкладывать друг в друга, чтобы представить ответы или дочернее содержимое:

<article class="post">
  <h2>Main Post Title</h2>
  <p>Post content...</p>

  <section class="comments">
    <h3>Comments</h3>

    <article class="comment">
      <p>Great post! — <cite>Alice</cite></p>
    </article>
    <article class="comment">
      <p>Thanks for sharing! — <cite>Bob</cite></p>
    </article>
  </section>
</article>

Карточки товаров как статьи

Карточки товаров или содержимого могут быть статьями:

<ul class="product-grid">
  <li>
    <article class="product-card">
      <img src="widget.jpg" alt="Widget Pro">
      <h2>Widget Pro</h2>
      <p>The best widget for professionals.</p>
      <p>$49.99</p>
      <a href="/products/widget-pro">View Product</a>
    </article>
  </li>
</ul>

Статья и раздел

Распространённая путаница — статья и раздел:

  • <article> — самостоятельное содержимое; оно сохраняет смысл вне страницы
  • <section> — тематическая группа; для понимания ей нужен окружающий контекст
<!-- Article: can be shared standalone -->
<article>A blog post about HTML</article>

<!-- Section: a chapter of the post (not standalone) -->
<article>
  <section><h2>Introduction</h2>...</section>
  <section><h2>Deep Dive</h2>...</section>
</article>

Статья и Schema.org

Объединяйте статьи с разметкой Schema.org в формате JSON-LD, чтобы получать расширенные результаты поиска:

<article>
  <h1 id="title">HTML5 Guide</h1>
  <time datetime="2025-01-15" id="date">Jan 15, 2025</time>
  ...
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML5 Guide",
  "datePublished": "2025-01-15"
}
</script>

Элемент cite

Используйте <cite> для названия произведения или указания авторства:

<article>
  <h2>Book Review: <cite>Don't Make Me Think</cite></h2>
  <p>By <a rel="author" href="/authors/me">Jane Smith</a></p>
  <p>Steve Krug's book remains essential reading for UX designers...</p>
</article>

Авторство в ссылках

Обозначайте ссылки на авторство внутри статьи с помощью rel="author":

<article>
  <p>Written by
    <a href="/authors/jane" rel="author">Jane Smith</a>
  </p>
</article>
<!-- rel="author" helps search engines identify content authorship -->

Несколько статей на странице

Несколько статей могут отображаться в списке или ленте:

<main>
  <h1>Latest Posts</h1>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</main>
<!-- Each article is independently consumable -->
<!-- This is correct: multiple articles, one main -->

Когда не следует использовать статью

Не используйте <article> для:

  • Общих разделов страницы без самостоятельного смысла
  • Элементов навигации
  • Маркетинговых разделов на главной странице (используйте <section>)
  • Виджетов боковой панели (используйте <aside>)

Быстрая проверка

Какой главный признак у содержимого, которое должно находиться в элементе статьи?

Итоги: элемент статьи

Основные сведения об элементе статьи:

  • Самостоятельное содержимое, которое можно распространять отдельно
  • Его можно распространять через агрегаторы (RSS, предварительный просмотр в социальных сетях), не теряя смысла
  • Примеры: публикации в блоге, новости, карточки товаров, комментарии
  • Статьи можно вкладывать друг в друга (публикация с вложенными статьями-комментариями)
  • Используйте rel="author" в ссылках на авторство внутри статьи

Часто задаваемые вопросы

Урок «Элемент article: автономное содержимое» бесплатный?

Да — полный текст урока «Элемент article: автономное содержимое» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элемент article: автономное содержимое»?

Используйте article для содержимого, которое можно распространять отдельно Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Элемент article: автономное содержимое»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. header nav main и footer
  2. Элемент article: автономное содержимое
  3. Элемент section и div
  4. time address и mark
← Назад к HTML Academy