Статья, в которой рассматривается HTML-элемент article из категории sectioning.
Назначение элемента article
Элемент article предназначен для создания секции в документе, контент которой представляет собой некоторое завершённое или автономное содержимое. Другими словами, с помощью данного элемента можно добавить смысл в документ, который будет говорить о том, что данный контент является некоторой вещью, и может быть рассмотрен и понят пользователем отдельно от остального содержимого страницы.
Обычно этот элемент применяется для создания секции на странице, содержимое которой представляет собой статью, пост блога, запись на форуме, комментарий пользователя, интерактивный виджет, гаджет, или любой другой независимый контент.
Применение элемента article
Например, рассмотрим использование элемента article для разметки поста блога:
Вложенные элементы article
Например, рассмотрим фрагмент кода, содержащий статью с комментариями.
Вышеприведенный пример будет иметь следующую структуру (outline):
Что такое семантическая вёрстка и зачем она нужна
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.
Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа
Ну и представьте, насколько проще читать вместо
Основные семантические теги HTML
Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег
, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.
Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.
Как разметить страницу с точки зрения семантики
Процесс разметки можно разделить на несколько шагов с разной степенью детализации.
Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.
Создание семантической разметки по макету
Навык, без которого фронтенд-разработчикам ну просто никуда.
Сомневаюсь, какие теги использовать
Есть простые правила для выбора нужных тегов.
Как точно не нужно делать
Не используйте семантические теги для украшательств. Для этого есть CSS.
Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.
Здесь сразу несколько ошибок:
использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.
А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.
Поэтому используйте семантические теги по назначению.
Почему вам стоит выбрать элемент HTML5 article, а не section
Дата публикации: 2020-01-29
От автора: визуальное отображение браузерами заголовков, вложенных в элементы section, создает впечатление, что они назначают логическую иерархию этим заголовкам. Однако это чисто визуальный эффект и не передается вспомогательным технологиям. Какой смысл в section и как авторы должны отмечать заголовки, которые чрезвычайно важны для пользователей AT?
Несколько дней назад я разговаривал с несколькими друзьями, один из которых спросил меня о разнице между article и section в HTML. Это одна из вечных загадок веб-разработки: «почему white-space: nowrap, а не white-space: no-wrap?» и «почему цвет CSS «gray» более темный, чем «darkgray»?».
Я дал свой обычный ответ: представьте себе article не просто как газетную статью или пост в блоге, но и как одежду — отдельный объект, который можно использовать в другом контексте. Ваши брюки — это article, и вы можете носить их с другим нарядом; ваша рубашка — это article, и ее можно носить с разными брюками; ваши сапоги из лакированной кожи — это article (вы не наденете их только одни без других предметов гардероба, не так ли?).
В спецификации сказано: «Элемент article представляет собой полную или самодостаточную композицию в документе, странице, приложении или сайте и, в принципе, может независимо распространяться или использоваться повторно, например, в синдикации. Это может быть сообщение на форуме, статья в журнале или газете, запись в блоге, пользовательский комментарий, интерактивный виджет или гаджет или любой другой независимый элемент контента».
Таким образом, главная страница со списком записей в блоге будет элементом main, обертывающим ряд элементов article, по одному для каждой записи в блоге. Вы бы использовали ту же структуру для списка видео (например, YouTube) с каждым видео, обернутым в article, список товаров (например, Amazon) и так далее. Любой из этих пунктов article является концептуально синдицируемым — каждый может выделяться на отдельной выделенной странице, в объявлении на другой странице, в качестве записи в RSS-ленте и т. д.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Apple WatchOS содержит Reader, который использует элемент article, чтобы узнать основное содержание вашей страницы. Apple говорит:
«Мы перевели Reader на watchOS 5, где он автоматически активируется при переходе по ссылкам на веб-страницы с большим количеством текста. Важно убедиться, что Reader выделяет ключевые части веб-страницы, используя семантическую разметку для усиления значения и назначения элементов в документе. Давайте рассмотрим пример. Сначала мы указываем, какие части страницы являются наиболее важными, оборачивая их в тег article».
В сочетании article с микроданными HTML5 Reader создает оптимальное представление дисплея для небольших экранов смарт-часов:
«В частности, включение этих элементов заголовка в статью гарантирует, что все они отображаются в Reader. Reader также стилизует каждый элемент заголовка по-разному в зависимости от значения его атрибута itemprop. Используя itemprop, мы можем обеспечить, чтобы автор, дата публикации, заголовок и подзаголовок были заметны».
Так что насчет section?
Мой обычный совет таков: не беспокойтесь о section и не беспокойтесь о том, чем он отличается от article. Он был введен как универсальная оболочка для заголовков, чтобы браузер мог определять структуру документа HTML5.
Что? Алгоритм контура документа предполагает использование только одного тега заголовка — h1 — и он волшебным образом «становится» правильным уровнем заголовка (например, превращается в h2, h3 и т.д.), в зависимости от того, насколько глубоко он вложен в секционировании элементов HTML5: article, section и так далее.
HTML5 Семантические элементы
Семантика – это изучение значений слов и фраз на языке.
Семантические элементы = элементы с смыслом.
Что такое семантические элементы?
Семантический элемент четко описывает его значение как для браузера, так и для разработчика.
Примеры не семантических элементов:
Примеры семантических элементов:
HTML5 элемент
Статья должна иметь смысл самостоятельно, и она должна быть возможность читать его независимо от остальной части веб-сайта.
Примеры того, где можно использовать элемент :
Пример
What Does WWF Do?
WWF’s mission is to stop the degradation of our planet’s natural environment,
and build a future in which humans live in harmony with nature.
Вложение в или наоборот?
Элемент определяет раздел в документе.
Можем ли мы использовать определения, чтобы решить, как вкладывать эти элементы? Нет, мы не можем!
HTML5 элемент
Элемент задает заголовок для документа или раздела.
Элемент должен использоваться в качестве контейнера для вступительного содержания.
В следующем примере определяется заголовок для статьи:
Пример
What Does WWF Do?
WWF’s mission is to stop the degradation of our planet’s natural environment,
and build a future in which humans live in harmony with nature.
HTML5 элемент
Элемент указывает нижний колонтитул для документа или раздела.
Элемент должен содержать сведения о содержащем его элементе.
Нижний колонтитул обычно содержит автора документа, информацию об авторском праве, ссылки на условия использования, контактные данные и т.д.
Пример
Posted by: Hege Refsnes
HTML5
HTML5 элемент
Пример
My family and I visited The Epcot center this summer.
Epcot Center
The Epcot Center is a theme park in Disney World, Florida.
HTML5 & и элементы
Целью рисунка является добавление визуального пояснения к изображению.
В HTML5 изображение и заголовок могут быть сгруппированы вместе в элементе :
Пример
Элемент определяет изображение, элемент определяет заголовок.
Почему семантические элементы?
С HTML4, проявители использовали их собственные имена удостоверения личности/типа к элементам типа: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
Это сделало невозможным для поисковых систем, чтобы определить правильное содержание веб-страницы.
С новыми элементами HTML5 ( ) это станет проще.
Согласно W3C, семантический Web: «позволяет обмениваться данными и повторно использовать их в различных приложениях, предприятиях и сообществах».
Семантические элементы в HTML5
Ниже приведен алфавитный список новых семантических элементов в HTML5.
Забудьте про div, семантика спасёт интернет
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном
Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом
