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

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> article> h1>Заголовок статьи h1> p>Текст статьи p> article> body>

Результат

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

Пример

html> html> head> title>Заголовок окна веб-страницы= title> head> body> section> h1>Статьи про цветы h1> article> h2>Розы h2> p>Роза - царица цветов - является предметом поклонения и пламенной любви. С незапамятных времен роза была объектом поклонения и восхищения. p> article> article> h2>Лилии h2> p>Лилия — удивительной красоты цветок, один из самых древних среди множества луковичных растений. p> article> section> body> html>

Результат

Атрибуты тега

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

• CSS свойство color определяет цвет контента и оформления текста.
• CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега :

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Поддержка браузера

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

Документ не должен иметь более одного элемента у которого не указан атрибут hidden .

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

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

не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как , заголовков, таких как (en-US) и т.п., не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.

Пример

main> h1>Яблокиh1> p>Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.p> article> h2>Сорт "Ред Делишес"h2> p>Эти ярко-красные яблоки являются одними из самых популярных в Соединённых Штатах.p> p>. p> p>. p> article> article> h2>Сорт "Гренни Смит";/h2> p>Эти сочные, зелёные яблоки являются одними из самых популярных в мире.p> p>. p> p>. p> article> main> 

Результат

Проблемы доступности

Ориентир

Элемент ведёт себя как роль-ориентир main (en-US) . Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент вместо объявления role=»main» , если не нужна поддержка старых браузеров.

Пропуск навигации

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

Добавление атрибута id в элемент позволяет ему становится целью для ссылки пропуска навигации.

body> a href="#main-content">Перейти к основному контентуa> main id="main-content"> main> body> 

Режим чтения

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

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Элемент широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль ARIA «main» в элемент , чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента после добавления атрибута role ).

main role="main">. main> 

Смотрите также

• Основные структурные элементы: , ,
• Связанные с этим разделом элементы: , , , , or
• ARIA: роль main (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Где нужно использовать тег article?

Изучаю возможности html5 и не могу понять для чего же нужен Article. Одни говорят что он нужен в тех местах где комментарии и другой динамичный контент. Другие же говорят что его надо использовать как оболочка основного контента с заголовком и текстом. Что выбрать?

• Вопрос задан более трёх лет назад
• 385 просмотров

Комментировать
Решения вопроса 1

littleguga @littleguga
Не стыдно не знать, а стыдно не интересоваться.

С английского — статья.
Для текстового содержимого на странице, как обертка для заголовка и текста.
Отличный пример — блог. Каждый пост оборачивается в article

Ответ написан более трёх лет назад
Нравится 1 8 комментариев
▪ ▪ @kingdomofcrooked Автор вопроса
Блог? Вы имеете ввиду страница с лентой блога, или сама раскрытая в отдельной странице статья?

littleguga @littleguga

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

▪ ▪ @kingdomofcrooked Автор вопроса
littleguga: странно. А разве не section нужен для того чтобы оборачивать всю статью?

littleguga @littleguga
kingdomofcrooked: article оборачивается в section, скоро скину пример.

littleguga @littleguga

littleguga @littleguga

kingdomofcrooked: секции для цельной логической части, секция шапки, огромного рекламного баннера и т.д., а article именно к статье/посту

▪ ▪ @kingdomofcrooked Автор вопроса

littleguga: спасибо за решение! Я сейчас делаю одностраничный сайт. Весь контент у него скрыт, так как я не стал делать его в стиле лендинг. При нажатии на определенную ссылку в меню навигации, открывается контент. Получается каждый контент (их всего 4) нужно оборачивать в section? То есть всего на странице будут 4 section, это нормально?

littleguga @littleguga

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