Тег article в html для чего нужен
Перейти к содержимому

Тег article в html для чего нужен

  • автор:

HTML тег

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

Примеры возможных блоков:

  • сообщение на форуме
  • газетная статья
  • запись в блоге
  • пользовательский комментарий

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

Атрибуты

Стиль по умолчанию

article

Пример

 

Netscape умер

Окончание поддержки для браузеров Netscape. AOL(America OnLine) имеет долгую историю в Интернете, являясь одной из первых компаний, которая подключила людей к Интернету.

Результат данного примера в окне браузера:

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

<article></p><div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<!-- 2electronika54 -->
<script src=

» width=»420″ height=»259″ />

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Тег article в html для чего нужен

Тег для создания самостоятельных единиц контента: от карточек до комментов. Не для статей!

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 1 марта 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Тег обозначает законченный и самодостаточный раздел документа, описывающий какую-то сущность: товар, карточку пользователя, рекламный баннер, виджет.

Пример

Скопировать ссылку «Пример» Скопировано

   

Тег <article>, и с чем его едят

Кратко

Тег <article> обозначает законченный и самодостаточный раздел документа, описывающий какую-то сущность: статью, товар, карточку пользователя и т. д.

Пример

Рекурсия! ��
article> h1>Тег code><article>code>, и с чем его едятh1> h2>Краткоh2> p> Тег code><article>code> обозначает законченный и самодостаточный раздел документа, описывающий какую-то сущность: статью, товар, карточку пользователя и т. д. p> h2>Примерh2> pre> code>Рекурсия! ��code> pre> article>

Как пишется

Скопировать ссылку «Как пишется» Скопировано

  article> article>      

Как понять

Скопировать ссылку "Как понять" Скопировано

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

Подсказки

Скопировать ссылку "Подсказки" Скопировано

или ?

Скопировать ссылку "article или section?" Скопировано

Например, если мы верстаем книгу с главой «Бран», повествующей «о 7-летнем юноше, сыне лорда Винтерфелла», то это скорее всего , так как в книге наверняка есть и другие разделы (главы, не обязательно только об этом персонаже).

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

article

Следы невиданных зверей

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

9 12 5 11.1 5 4
4.4 4 11.1 4.2

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Знакомство с HTML
  • Что всё это значит?
  • Элемент

Как правильно использовать семантические теги article и section: нюансы HTML5 и доступности сайтов

Как правильно использовать семантические теги article и section: нюансы HTML5. главное изображение

Проблема: визуальное отображение заголовков внутри создаёт иллюзию логической иерархии. Однако это просто визуальное представление, которое невозможно воспроизвести с помощью вспомогательных технологий, которыми пользуются люди с особыми потребностями, например, слабовидящие или незрячие пользователи. Как правильно использовать семантические теги и и как помечать заголовки, которые очень важны для людей с особыми потребностями? Об этом в статье.

  • Как насчёт тега ?
  • Никогда не говори никогда
  • Как применять теги article и section: итоговые рекомендации

Новички часто интересуются, в чём разница между тегами и в HTML5. Простой ответ: думайте о статье (англ. — article) не как о заметке в статье или посте в блоге, а как об артикуле товара в магазине одежды. То есть статья — это независимая завершённая сущность, которую можно при необходимости повторно использовать.

Мысль из абзаца выше надо пояснить на примере. Вы носите одежду с артикулом «брюки». Эту одежду можно надеть на работу или на прогулку. Вы также носите одежду с артикулом «рубашка». Рубашку можно носить с разными брюками. На ноги вы надеваете обувь с артикулом «туфли». А вот артикула «туфля» не существует — в общем случае завершённой сущностью будут туфли.

Профессия «Фронтенд-разработчик»

  • Изучите востребованные JavaScript и TypeScript
  • Научитесь создавать пользовательские интерфейсы сайтов и приложений
  • Освойте самый популярный фреймворк JavaScript — React
  • Познакомьтесь с языками веб-разработки HTML и CSS

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

То есть главная страница со списком постов в блоге должна быть элементом main , внутри которого есть элементы article — посты из списка. Такая же структура будет у списка видео, в котором каждый ролик — элемент article . То же касается списка товаров на странице интернет-магазина. Каждый из элементов article в описанных примерах выступает в роли самостоятельной единицы, которая доступна на отдельной странице, а также выводится в виде анонса или превью на другой странице, например, в категориях блога или товаров в интернет-магазине, в RSS-фиде.

В WatchOS компании Apple есть ридер, который использует тег , чтобы определять основной контент на странице. В документации есть такие сведения : «Мы добавили ридер в WatchOS. Он автоматически активируется, когда пользователь переходит на страницу с большим количеством текста. Важно понимать, что ридер отображает ключевые элементы страниц с помощью семантической разметки. Это нужно пояснить на примере. В первую очередь мы определяем важные части страницы и оборачиваем в article ».

Комбинация микроразметки и семантических элементов HTML5 позволяет ридеру корректно отображать контент веб-страниц на маленьких экранах Apple Watch.

Ещё одна цитата из документации: «Использование элементов article гарантирует, что соответствующие блоки контента попадут в ридер. Также ридер стилизует каждый заголовок по-разному в зависимости от значения атрибута itemprop . Благодаря itemprop мы можем быть уверены, что сведения об авторе, дате публикации, а также названия и подзаголовки отображаются корректно».

Как насчёт тега ?

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

Структура документа предполагает использование одного заголовка первого порядка на странице. В зависимости от глубины вложенности в элементы article , section и так далее заголовки магическим образом получают нужный порядок: h2 , h3 и так далее.

Например, вы можете указать на странице такое:

 My Fabulous article Lorem Ipsum Trondant Fnord 

Эта разметка отлично работает, когда отображается на странице статьи, например, на этой странице. Но как быть, если вы перейдёте на страницу категорий, например, в раздел статей о разработке в нашем блоге? Разметка будет такой:

 My latest posts  My fabulous article Lorem Ipsum Trondant Fnord   Another magnum opus Magnum solero paddlepop  

В этом примере заголовки первого порядка h1 , расположенные внутри article , превращаются в логические заголовки второго порядка h2 . Это происходит благодаря семантическим элементам article , которые, как и section , структурируют веб-страницы.

К сожалению, браузеры не поддерживают отображение структуры HTML5. Поэтому в данный момент причин для использования section нет. Скринридер JAWS реализует алгоритм отображения структуры HTML5 в Internet Explorer, но эта функция не очень удачная .

Вы можете подумать, что браузеры по-разному отображают заголовки h1 в зависимости от глубины вложенности в section . Это может показаться противоречием: с одной стороны, обозреватели не отображают структуру HTML5, с другой, заголовки h1 отображаются по-разному в зависимости от вложенности в , который является семантическим тегом HTML5.

Вот наглядный пример . В левой колонке четыре заголовка первого порядка, вложенные в section . В правой колонке четыре заголовка с первого по четвёртый порядок без использования section . На скриншоте ниже видно, что Firefox автоматически отображает заголовки h1 в section так, как отображаются заголовки более низкого уровня без вложенности в section .

заголовки разных уровней

Отображение заголовков в section (слева) и без section

Такие же результаты в Chrome, а также в других браузерах, которые используют Chromium, например, в бета-версии Edge для Mac и в Safari для Mac.

Значит ли это, что в section можно смело использовать только заголовки первого порядка и ждать, что всё остальное за нас сделает браузер? Нет, так как при использовании section меняется только визуальное представление заголовка. Если открыть инструменты разработчика, видно, что элемент выглядит как h2 , но остается заголовком первого порядка.

инструменты разработчика

Элемент выглядит как h2 , но это h1

Сравните это с настоящим заголовком второго порядка из правой колонки.

порядок заголовка

Заголовок второго порядка

На иллюстрации выше видно, что дерево доступности получает корректные данные о порядке заголовка. Команда Mozilla писала об этом .

Для пользователей с особыми потребностями иерархия заголовков на странице играет важную роль. По данным исследования WebAIM , 86,1 % людей с ограниченными возможностями считают полезной практикой использование разноуровневых заголовков.

Поэтому лучшая практика — использовать заголовки h1 - h6 и игнорировать возможности section .

Начните изучать разработку с бесплатного курса «Основы современной вёрстки». Вы научитесь создавать статические веб-страницы, стилизовать элементы, использовать редакторы кода с полезными расширениями. В конце курса вы опубликуете свой первый сайт на GitHub Pages.

Никогда не говори никогда

Как же всё-таки быть с section , ведь этот элемент для чего-то нужен? Если рассматривать проблему с точки зрения доступности и удобства пользователей с особыми потребностями, тег имеет смысл. На иллюстрации ниже видно, как обёрнутое в section саммари подчёркивается горизонтальной линией.

визуальное выделение саммари

Элемент section отделяется горизонтальной чертой снизу

Горизонтальную черту, созданную с помощью


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

Проблема решается, если обернуть нужный блок в section .

 aria-label="quick summary"> Summary text 

Большинство скринридеров не выделяет контент в элементе section , если у него нет доступного заголовка. Роль заголовка в примере выше играет значение aria-label . Благодаря нему скринридер объявляет начало и конец саммари: «Quick summary region, quick summary region end». Кроме того, разметка позволяет пользователю скринридера при необходимости пропускать саммари.

Можно попробовать использовать div вместо section : . Но такая разметка семантически неверная, так как для использования aria-label у элемента должна быть встроенная ARIA-роль widget или landmark . Такие роли есть у section , но нет у div .

Как применять теги article и section : итоговые рекомендации

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

Тег используйте с aria-label , чтобы показывать скринридерам, где начинается и заканчивается элемент страницы.

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

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

Профессия «Фронтенд-разработчик»

  • Изучите востребованные JavaScript и TypeScript
  • Научитесь создавать пользовательские интерфейсы сайтов и приложений
  • Освойте самый популярный фреймворк JavaScript — React
  • Познакомьтесь с языками веб-разработки HTML и CSS

Адаптированный перевод статьи Why You Should Choose HTML5 Over by Bruce Lawson. Мнение автора оригинальной публикации может не совпадать с мнением администрации Хекслета.

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

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