Тег article в HTML - семантика и практическое использование

Введение

Тег article в HTML относится к семантическим тегам и помогает явно обозначать автономные фрагменты контента. Грубо говоря, это такие куски страницы, которые имеют самостоятельный смысл и могут существовать отдельно от остального содержимого. Например, новостная статья, запись в блоге, карточка товара с полноценным описанием, пост на форуме, комментарий с развернутым текстом.

Смотрите, идея семантической вёрстки в том, чтобы не просто «рисовать» страницу визуально, а давать браузерам, поисковым системам и вспомогательным технологиям (читалки экрана, голосовые ассистенты) понять, что именно находится в документе. article как раз один из ключевых элементов для этого.

В этой статье вы разберётесь:

• что такое article и в чём его семантика;
• когда article действительно уместен, а когда лучше использовать section, div и другие теги;
• как правильно вкладывать article друг в друга и в общую структуру документа;
• как использовать article вместе с header, footer, aside, nav;
• как article влияет на SEO и доступность;
• какие типичные ошибки возникают при его использовании.

Давайте пошагово разберём все эти моменты на практике.

Смысл и назначение тега article

Что такое «самодостаточный фрагмент контента»

Спецификация HTML описывает article как «самодостаточный, независимый фрагмент контента документа». Проще говоря, это часть страницы, которую можно:

• показать вне контекста сайта (в RSS-ленте, в виджете «рекомендованные статьи», в поисковой выдаче);
• расшарить по ссылке, как отдельную сущность (конкретный пост блога, самодостаточную карточку события и т.п.);
• скопировать на другой сайт без существенной потери смысла.

Примеры подходящих сущностей:

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

Формальное определение и важные особенности

Кратко по ключевым признакам article:

• Имеет собственный заголовок (обычно через h1–h6 внутри).
• Обладает смысловой завершённостью.
• Может содержать внутреннюю структуру: разделы, изображения, подзаголовки.
• Может быть частью списка таких же «самодостаточных» сущностей (лента новостей, список постов).

Важно: article не просто «блок с текстом». Если это обычный абзац пояснения внутри контента и он не имеет самостоятельной ценности — article использовать не нужно, достаточно section или div.

Простой пример article в новостной ленте

Смотрите, я покажу вам, как это выглядит в ленте новостей:

<article>
  <header>
    <!-- Заголовок статьи -->
    <h2>Новый релиз HTML стандарта</h2>
    <!-- Метаинформация о публикации -->
    <p>Опубликовано 3 марта 2025</p>
  </header>

  <!-- Основной текст статьи -->
  <p>Сегодня был опубликован новый релиз спецификации HTML, включающий...</p>

  <!-- Дополнительный контент статьи -->
  <p>Среди ключевых изменений специалисты отмечают...</p>

  <footer>
    <!-- Информация об авторе -->
    <p>Автор: Иван Иванов</p>
  </footer>
</article>

Комментарии к примеру:

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

Когда использовать article, а когда нет

Типичные случаи, когда article подходит

Используйте article, если элемент:

1. Представляет отдельную логическую сущность.
2. Может быть показан отдельно от остальной части сайта.
3. Обладает собственным заголовком.

Давайте перечислим частые сценарии:

• Статья в блоге.
• Новостной пост.
• Руководство или документация по продукту (как отдельный материал).
• Пост в социальной сети или на форуме.
• Развёрнутый отзыв пользователя.
• Элемент ленты «похожие материалы».

Пример списка статей блога:

<main>
  <!-- Список статей. Каждая запись — отдельный article -->
  <article>
    <h2>Как использовать семантическую вёрстку</h2>
    <p>Краткое описание статьи для ленты...</p>
  </article>

  <article>
    <h2>Тег article в HTML - полный разбор</h2>
    <p>В этой статье вы узнаете, когда именно стоит использовать article...</p>
  </article>
</main>

Здесь каждая статья логически отделима, и каждая имеет индивидуальный смысл.

Ситуации, когда article не нужен

Теперь давайте посмотрим, где article будет избыточен и даже некорректен:

• Контейнер чисто ради оформления (сеточная вёрстка, колонки, фон).
• Мелкие куски интерфейса: карточка кнопки, модальное окно, простой баннер без самодостаточного текста.
• Небольшие текстовые блоки типа «подсказка», «примечание», «небольшое пояснение».

В таких случаях лучше использовать:

• section — если блок имеет смысловую объединяющую тему, но не самодостаточен;
• div — если это просто структурный или визуальный контейнер без особой семантики.

Пример неправильного использования article:

<!-- Плохо - article используется как просто контентный блок без самостоятельного смысла -->
<article class="sidebar-block">
  <h3>Контакты</h3>
  <p>Телефон: +7 (000) 000-00-00</p>
</article>

Здесь контакты — часть страницы, которую обычно не выносят как отдельную статью или сущность. Логичнее использовать section или div:

<!-- Лучше - используем section как тематический блок -->
<section class="sidebar-block">
  <h3>Контакты</h3>
  <p>Телефон: +7 (000) 000-00-00</p>
</section>

Отличие article от section и div

Давайте разберёмся на сравнительной схеме.

• article — самодостаточный фрагмент контента:

  • можно публиковать отдельно;
  • есть свой заголовок;
  • есть самостоятельная ценность.

• section — тематический раздел:

  • объединяет контент по теме;
  • может быть частью article;
  • сам по себе обычно не предназначен для распространения отдельно.

• div — «просто контейнер»:

  • не несёт дополнительной семантики;
  • нужен для группировки и стилизации.

Небольшой пример, как совместить эти элементы:

<article>
  <!-- Заголовок всей статьи -->
  <h1>Семантическая вёрстка сайта</h1>

  <!-- Тематический раздел внутри статьи -->
  <section>
    <h2>Почему семантика важна</h2>
    <p>Семантическая разметка помогает поисковым системам...</p>
  </section>

  <!-- Ещё один раздел -->
  <section>
    <h2>Ключевые теги HTML5</h2>
    <p>Рассмотрим header, footer, article, section и другие...</p>
  </section>

  <!-- div только для оформления, без отдельного смысла -->
  <div class="promo-banner">
    <!-- Этот блок не является самостоятельной статьей -->
    <p>Подпишитесь на обновления блога</p>
  </div>
</article>

Как видите, article — «контейнер смысла», section — «подразделы», div — «контейнер без смысла».

Структура article в реальных макетах

article внутри страницы с layout

Смотрите, я покажу вам базовую структуру страницы блога:

<body>
  <header>
    <!-- Общий заголовок сайта -->
    <h1>Блог о веб-разработке</h1>
    <!-- Навигация по сайту -->
    <nav>
      <a href="/">Главная</a>
      <a href="/articles">Статьи</a>
      <a href="/about">О проекте</a>
    </nav>
  </header>

  <!-- Основное содержимое страницы -->
  <main>
    <!-- Основная статья страницы -->
    <article>
      <header>
        <!-- Заголовок конкретной статьи -->
        <h2>Тег article в HTML - подробное руководство</h2>
        <!-- Метаинформация -->
        <p>Опубликовано 10 апреля 2025 - Автор Олег Марков</p>
      </header>

      <!-- Здесь текст статьи -->
      <p>Тег article позволяет выделить автономный фрагмент контента...</p>

      <!-- Внутри статьи можно использовать разделы -->
      <section>
        <h3>Где использовать article</h3>
        <p>article подходит для новостей, записей блога и т.п.</p>
      </section>

      <footer>
        <!-- Теги, рубрики, ссылки на автора -->
        <p>Теги - HTML - семантика</p>
      </footer>
    </article>
  </main>

  <aside>
    <!-- Боковая колонка сайта -->
    <h2>Последние статьи</h2>
    <!-- Здесь могут быть ссылки на другие article -->
  </aside>

  <footer>
    <!-- Общий подвал сайта -->
    <p>© 2025 Блог о веб-разработке</p>
  </footer>
</body>

Ключевой момент: есть article как основная статья, и есть header/footer страницы. Они не должны путаться между собой.

Несколько article в одном main

Если у вас лента, например на главной странице, вполне нормально разместить несколько article внутри main:

<main>
  <!-- Лента последних публикаций -->
  <article>
    <h2>Как начать изучать HTML</h2>
    <p>Краткий конспект для начинающих...</p>
  </article>

  <article>
    <h2>CSS Grid на практике</h2>
    <p>Рассмотрим, как строить макеты с помощью Grid...</p>
  </article>

  <article>
    <h2>Тег article в HTML</h2>
    <p>Подробный разбор семантики и использования article...</p>
  </article>
</main>

Поисковые системы и вспомогательные технологии видят здесь набор независимых материалов внутри основного содержимого страницы.

Вложенные article

Иногда внутри статьи вам нужно выделить отдельные самостоятельные фрагменты. Например, у вас есть статья, а внутри неё — блок с «связанными историями», и каждая история сама по себе является законченной сущностью. В таком случае допускаются вложенные article.

Давайте посмотрим пример:

<article>
  <h1>Главная новость дня</h1>
  <p>Сегодня произошло важное событие...</p>

  <!-- Внутри основной статьи - связанные материалы, которые тоже самодостаточны -->
  <section aria-label="Связанные материалы">
    <h2>Связанные новости</h2>

    <article>
      <h3>Мнение эксперта</h3>
      <p>Эксперты считают, что...</p>
    </article>

    <article>
      <h3>Как это повлияет на пользователей</h3>
      <p>Пользователи смогут...</p>
    </article>
  </section>
</article>

Здесь:

• внешний article — основная новость;
• внутренние article — «подстатьи», которые тоже можно представить отдельно (как отдельные карточки, при необходимости).

Важно: не стоит вкладывать article без необходимости. Если внутренний блок не предполагается как отдельный контент, лучше ограничиться section.

article и заголовки h1–h6

Общий принцип с заголовками внутри article

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

Раньше рекомендовалось строго использовать иерархию заголовков по уровням (h1–h6). Сейчас браузеры и читалки стали терпимее к «плоской» структуре, но базовая логика всё равно остаётся полезной:

• для основной статьи страницы — зачастую h1 внутри article;
• для статей в ленте — чаще всего h2 или h3, в зависимости от структуры.

Пример с корректной структурой заголовков

Смотрите пример страницы, где одна основная статья и список «ещё по теме»:

<main>
  <!-- Основная статья страницы -->
  <article>
    <h1>Тег article в HTML</h1>
    <p>В этой статье мы рассмотрим...</p>
  </article>

  <!-- Блок с дополнительными материалами -->
  <section aria-label="Дополнительные материалы">
    <h2>Читайте также</h2>

    <article>
      <!-- Здесь логично использовать h3, так как это уже вложенный по смыслу уровень -->
      <h3>Семантические теги в HTML5</h3>
      <p>Обзор header footer nav section и других...</p>
    </article>

    <article>
      <h3>Структура документа HTML</h3>
      <p>Как правильно выстраивать main, section, article...</p>
    </article>
  </section>
</main>

Комментарий:

• h1 — главный заголовок основной статьи;
• h2 — заголовок раздела «Читайте также»;
• h3 — заголовки статей внутри этого раздела.

Структура заголовков при множестве article

Если у вас страница-лента, где все записи равнозначны и нет ярко выраженной «основной» статьи, можно использовать одинаковый уровень заголовков для всех article. Например, все на уровне h2:

<main>
  <h1>Последние статьи</h1>

  <article>
    <h2>Как использовать article</h2>
    <p>Кратко о семантике...</p>
  </article>

  <article>
    <h2>Основы HTML</h2>
    <p>С чего начать изучение...</p>
  </article>
</main>

Так структура заголовков остаётся понятной и предсказуемой.

Взаимодействие article с другими семантическими тегами

article и header/footer

Часто возникает путаница между:

• header и footer как элементами страницы в целом;
• header и footer как частями конкретного article.

Оба варианта валидны и полезны, важно только правильно понимать уровень.

Покажу вам типичную комбинацию:

<body>
  <header>
    <!-- Глобальный шапка сайта -->
    <h1>Новости технологий</h1>
  </header>

  <main>
    <!-- Отдельная новостная статья -->
    <article>
      <header>
        <!-- Заголовок именно этой статьи -->
        <h2>Новый браузер появился на рынке</h2>
        <p>Опубликовано 5 апреля 2025</p>
      </header>

      <p>Сегодня была представлена новая версия браузера...</p>

      <footer>
        <!-- Локальный подвал статьи -->
        <p>Автор: Ирина Петрова</p>
      </footer>
    </article>
  </main>

  <footer>
    <!-- Глобальный подвал сайта -->
    <p>© 2025 Новости технологий</p>
  </footer>
</body>

Комментарии:

• header в начале body — шапка всего сайта;
• header внутри article — шапка конкретной статьи;
• footer внутри article — метаинформация и локальные ссылки;
• footer в конце body — подвал сайта.

article и aside

aside обычно используют для контента, который связан с основным, но не является его частью. В контексте article aside часто применяется для боковых заметок, сносок, блоков «по теме», авторских профилей.

Давайте разберём пример:

<article>
  <h1>Что такое семантическая вёрстка</h1>
  <p>Семантическая вёрстка помогает обозначить смысл блоков...</p>

  <!-- Боковой блок, связанный с этой статьёй -->
  <aside>
    <h2>Справка</h2>
    <p>Семантика - это смысловая структура документа...</p>
  </aside>

  <p>Использование тегов article, section, header, footer позволяет...</p>
</article>

Здесь aside относится к содержимому статьи, но не входит в основной поток объяснений.

article и nav

Тег nav используется для навигации (меню, пагинация, ссылки между частями контента). Внутри article вы можете использовать nav, например, для навигации по частям серии статей или для перехода к предыдущей/следующей записи.

Пример:

<article>
  <h1>Часть 2 - Семантические теги HTML</h1>
  <p>Во второй части мы рассмотрим...</p>

  <!-- Навигация между частями серии статей -->
  <nav aria-label="Навигация по частям статьи">
    <a href="part1.html">Предыдущая часть</a>
    <a href="part3.html">Следующая часть</a>
  </nav>
</article>

Комментарий:

• nav внутри article делает навигацию логически связанной именно с этой статьёй;
• атрибут aria-label помогает вспомогательным технологиям понять назначение навигации.

Атрибуты article и доступность (a11y)

Использование id и привязка к заголовку

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

Пример:

<article id="post-123">
  <h1 id="post-123-title">Тег article в HTML</h1>
  <p>Подробный разбор использования article...</p>
</article>

<!-- Где-то на странице -->
<a href="#post-123">Перейти к полной версии статьи</a>

Здесь:

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

ARIA-атрибуты и роль article

article сам по себе уже семантический элемент, и браузеры обычно воспринимают его как «регион» контента, который можно выделить. Поэтому явно указывать role="article" в большинстве случаев не нужно.

Однако можно использовать:

• aria-labelledby — чтобы указать, какой заголовок описывает article;
• aria-label — чтобы дать краткое текстовое описание области, если нет визуального заголовка.

Давайте разберём пример с aria-labelledby:

<article aria-labelledby="news-title">
  <h2 id="news-title">Обновление спецификации HTML</h2>
  <p>Консорциум опубликовал...</p>
</article>

Комментарии:

• aria-labelledby указывает, что заголовок с id news-title является текстовым представлением этого article;
• screen reader сможет корректно озвучивать блок как «Обновление спецификации HTML, регион статьи» (формулировка зависит от читалки).

Отличие article от просто region

Экранные читалки часто дают пользователю список «регионов» и «статей». article как более конкретная сущность помогает:

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

Поэтому, если блок — именно самостоятельный контент (новость, пост, статья), выбирайте article, а не просто div или section.

article и SEO

Как article помогает поисковым системам

Поисковые системы анализируют структуру страницы, чтобы понять:

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

article даёт им сигнал, что внутри находится единый контентный объект. В сочетании с:

• корректно оформленными заголовками;
• метаинформацией (дата, автор);
• микроразметкой (Schema.org);

это помогает поисковикам точнее понимать страницу.

article и микроразметка (Schema.org)

Часто article используют вместе с микроразметкой типа Article, NewsArticle, BlogPosting. Это не обязательная связка, но логичная: семантика HTML и семантика микроразметки дополняют друг друга.

Покажу вам базовый пример с микроразметкой JSON-LD (он размещается обычно в head или в конце body и не зависит от структуры article, но логически с ним связан):

<article>
  <h1>Тег article в HTML</h1>
  <p>Разбор семантики и примеры использования...</p>
</article>

<!-- Здесь мы описываем ту же статью для поисковиков с помощью JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Тег article в HTML",
  "author": {
    "@type": "Person",
    "name": "Олег Марков"
  },
  "datePublished": "2025-04-10"
}
</script>

Комментарии:

• article задаёт «форму» для людей и браузеров;
• JSON-LD описывает те же данные в структурированном виде для поисковых систем.

Влияние article на «основной контент» страницы

Некоторые поисковые системы ориентируются на структурные теги (main, article) при определении основного текста. Если статья обёрнута в article и находится внутри main, это помогает:

• отделить основной контент от навигации, подвалов, сайдбаров;
• уменьшить «шум» для анализа текста;
• показывать более релевантные сниппеты в поисковой выдаче.

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

Типичные паттерны использования article

Блоговая статья с блоком комментариев

Давайте соберём распространённый сценарий — статья и комментарии к ней. Здесь article будет уместен и для основного материала, и для каждого отдельного комментария (если он больше, чем короткая реплика).

<main>
  <!-- Основная статья -->
  <article>
    <header>
      <h1>Тег article в HTML</h1>
      <p>Автор: Олег Марков - 10 апреля 2025</p>
    </header>

    <p>article - это семантический тег для выделения самодостаточного контента...</p>

    <section aria-label="Структура article">
      <h2>Структура article</h2>
      <p>Обычно article включает заголовок, основной текст, meta-блоки...</p>
    </section>
  </article>

  <!-- Комментарии -->
  <section aria-label="Комментарии">
    <h2>Комментарии</h2>

    <!-- Каждый развернутый комментарий - отдельная "мини-статья" -->
    <article>
      <header>
        <h3>Комментарий от Анны</h3>
        <p>11 апреля 2025</p>
      </header>
      <p>Спасибо за подробный разбор. Хотелось бы добавить...</p>
    </article>

    <article>
      <header>
        <h3>Комментарий от Максима</h3>
        <p>12 апреля 2025</p>
      </header>
      <p>Я долго путал article и section, но теперь стало понятнее...</p>
    </article>
  </section>
</main>

Комментарии:

• основной article — «главная» сущность страницы;
• комментарии представлены как article, потому что каждый самодостаточен (у него есть автор, дата, текст);
• section объединяет комментарии тематически и имеет заголовок.

Карточки товаров или статей в сетке

Если каждая карточка представляет собой самостоятельный объект (товар, пост, мероприятие), её разумно отмечать как article.

<main>
  <h1>Новые статьи</h1>

  <div class="cards">
    <!-- Каждая карточка - отдельный article -->
    <article class="card">
      <h2>Работа с формами в HTML</h2>
      <p>Разбираем input, label, form...</p>
      <a href="/articles/forms.html">Читать далее</a>
    </article>

    <article class="card">
      <h2>Основы CSS Flexbox</h2>
      <p>Гибкие макеты и выравнивание элементов...</p>
      <a href="/articles/flexbox.html">Читать далее</a>
    </article>
  </div>
</main>

Здесь div с классом cards используется для сетки и оформления, а article — для обозначения логической сущности «отдельная статья».

Ленты новостей и страницы категорий

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

<main>
  <h1>Новости HTML и CSS</h1>

  <article>
    <a href="/news/html-spec-update.html">
      <h2>Обновление спецификации HTML</h2>
      <p>Консорциум опубликовал новое обновление...</p>
    </a>
  </article>

  <article>
    <a href="/news/css-level-5.html">
      <h2>CSS уровня 5 - чего ждать</h2>
      <p>Разработчики обсуждают новые возможности...</p>
    </a>
  </article>
</main>

Обратите внимание:

• заголовок и краткое описание находятся внутри ссылки;
• article при этом всё равно остаётся семантической оболочкой.

Частые ошибки при использовании article

Ошибка 1 - использование article для любого блока с текстом

Иногда разработчики, узнав о семантических тегах, начинают оборачивать article почти всё, что содержит текст. Это приводит к «пересемантизации» страницы, где слишком много «самодостаточных статей», которые на самом деле таковыми не являются.

Примеры неправильных кандидатов:

• небольшой блок с контактами;
• простое информативное сообщение «сайт использует cookies»;
• форма обратной связи без самостоятельной текстовой части;
• всплывающее окно с краткой подсказкой.

Исправление: используйте section или div, если блок не должен существовать отдельно.

Ошибка 2 - отсутствие заголовка внутри article

article без заголовка усложняет навигацию:

• читателям сложнее ориентироваться в структуре;
• для экранных читалок article становятся «безымянными регионами».

Решение: добавлять хотя бы один h2–h3 (или h1 для основной статьи).

Неправильно:

<article>
  <!-- Нет заголовка -->
  <p>Сегодня был опубликован новый релиз...</p>
</article>

Лучше:

<article>
  <h2>Новый релиз спецификации HTML</h2>
  <p>Сегодня был опубликован новый релиз...</p>
</article>

Ошибка 3 - дублирование article и section без нужды

Иногда встречаются конструкции вида «section внутри article, который внутри section», при этом у каждого есть заголовки, и структура становится запутанной.

Совет: перед тем как добавить article или section, задайте себе вопросы:

• Это самостоятельная сущность (ответ — да → article)?
• Это просто раздел внутри чего-то большего (ответ — да → section)?
• Это вообще нужно только для стилей или сетки (ответ — да → div)?

Ошибка 4 - вложенный article для несамостоятельных блоков

Пример лишней вложенности:

<article>
  <h1>Основы HTML</h1>
  <article>
    <h2>Введение</h2>
    <p>HTML - это язык разметки...</p>
  </article>
  <article>
    <h2>Теги и атрибуты</h2>
    <p>Теги используются для обозначения элементов...</p>
  </article>
</article>

Секции «Введение» и «Теги и атрибуты» — это разделы одной статьи, а не отдельные самостоятельные материалы. Лучше заменить article на section:

<article>
  <h1>Основы HTML</h1>

  <section>
    <h2>Введение</h2>
    <p>HTML - это язык разметки...</p>
  </section>

  <section>
    <h2>Теги и атрибуты</h2>
    <p>Теги используются для обозначения элементов...</p>
  </section>
</article>

Краткое резюме

• article — семантический тег для самодостаточных фрагментов контента: статей, новостей, постов, подробных комментариев, карточек материалов.
• Главное отличие от section — article можно «вырезать» со страницы и использовать отдельно, при этом смысл останется понятен.
• article обычно имеет свой заголовок (h1–h6), может содержать header, footer, section, aside, nav.
• Важно не злоупотреблять article: не стоит помечать им каждый текстовый блок или интерфейсный элемент, который не представляет самостоятельной единицы контента.
• article помогает SEO и доступности, делая структуру страницы более предсказуемой для поисковых систем и экранных читалок.

Если вы в сомнении, задайте себе вопрос: «Этот блок я мог(ла) бы показать отдельно в ленте или в рассылке?» Если ответ «да», article — хороший кандидат. Если «нет», вероятнее всего подойдёт section или div.

Частозадаваемые технические вопросы по теме и ответы

Нужно ли всегда помещать article внутрь main?

Нет, не обязательно. article может находиться и вне main, например в aside или footer. Но основной контент страницы логично размещать внутри main, а уже в нём использовать article. Пример: основная статья в main и блок «похожие статьи» в aside, где каждое превью также помечено как article.

Можно ли использовать article внутри списка ul или ol?

Да, можно. В таком случае каждый li может содержать article, если элемент списка — самостоятельная сущность. Пример: список новостей, где каждый пункт — отдельная статья. Структура будет такой: ul → li → article → заголовок и текст. Это валидно и семантически оправдано.

Что будет, если использовать role="article" на div вместо тега article?

Так делать обычно не нужно. Тег article уже несёт нужную семантику. role="article" на div используется только если вы по каким-то причинам не можете использовать нативный элемент, например, в очень специфичных компонентах. Но нативный article понятнее для браузеров и инструментов доступности, поэтому его следует предпочесть.

Можно ли сделать ссылкой весь article целиком?

Технически да, но нужно быть аккуратным. Нельзя помещать один интерактивный элемент внутрь другого (например, кнопку в ссылку). Если вы оборачиваете article в a, убедитесь, что внутри нет других ссылок или кнопок. Более безопасный вариант — сделать ссылкой только заголовок и/или кнопку «Читать далее», а article оставить обычным контейнером.

Как правильно скрывать article, чтобы он не мешал доступности?

Если нужно временно скрыть article и для визуальных пользователей, и для экранных читалок, используйте CSS display: none или hidden-атрибут. Пример:

. Такой блок будет полностью исключён из потока и не будет озвучиваться. Если же вы хотите скрыть article только визуально, но оставить доступным для читалок, применяйте специальные «visually hidden» классы, а не display: none.