Что такое article в html
Статья, в которой рассматривается HTML-элемент article из категории sectioning.
Назначение элемента article
Элемент article предназначен для создания секции в документе, контент которой представляет собой некоторое завершённое или автономное содержимое. Другими словами, с помощью данного элемента можно добавить смысл в документ, который будет говорить о том, что данный контент является некоторой вещью, и может быть рассмотрен и понят пользователем отдельно от остального содержимого страницы.
Обычно этот элемент применяется для создания секции на странице, содержимое которой представляет собой статью, пост блога, запись на форуме, комментарий пользователя, интерактивный виджет, гаджет, или любой другой независимый контент.
Применение элемента article
Например, рассмотрим использование элемента article для разметки поста блога:
Вложенные элементы article
Например, рассмотрим фрагмент кода, содержащий статью с комментариями.
Вышеприведенный пример будет иметь следующую структуру (outline):
Как правильно использовать семантические теги article и section: нюансы HTML5 и доступности сайтов
Проблема: визуальное отображение заголовков внутри создаёт иллюзию логической иерархии. Однако это просто визуальное представление, которое невозможно воспроизвести с помощью вспомогательных технологий, которыми пользуются люди с особыми потребностями, например, слабовидящие или незрячие пользователи. Как правильно использовать семантические теги и и как помечать заголовки, которые очень важны для людей с особыми потребностями? Об этом в статье.
Мысль из абзаца выше надо пояснить на примере. Вы носите одежду с артикулом «брюки». Эту одежду можно надеть на работу или на прогулку. Вы также носите одежду с артикулом «рубашка». Рубашку можно носить с разными брюками. На ноги вы надеваете обувь с артикулом «туфли». А вот артикула «туфля» не существует — в общем случае завершённой сущностью будут туфли.
Учитесь на Хекслете: Вы можете пройти десятки курсов по HTML и CSS, познакомиться с препроцессорами, сверстать свои первые страницы на Bootstrap
В документации есть такое определение: элемент article представляет собой завершённую или самодостаточную композицию в документе, приложении, на странице или сайте, которая независимо распространяется и может повторно использоваться. Элементом article может быть пост на форуме, статья в журнале или газете, заметка в блоге, сообщение пользователя, интерактивный виджет или гаджет или другая независимая контент-единица.
Комбинация микроразметки и семантических элементов HTML5 позволяет ридеру корректно отображать контент веб-страниц на маленьких экранах Apple Watch.
Например, вы можете указать на странице такое:
Эта разметка отлично работает, когда отображается на странице статьи, например, на этой странице. Но как быть, если вы перейдёте на страницу категорий, например, в раздел статей о разработке в нашем блоге? Разметка будет такой:
К сожалению, браузеры не поддерживают отображение структуры HTML5. Поэтому в данный момент причин для использования section нет. Скринридер JAWS реализует алгоритм отображения структуры HTML5 в Internet Explorer, но эта функция не очень удачная.
Отображение заголовков в section (слева) и без section
Такие же результаты в Chrome, а также в других браузерах, которые используют Chromium, например, в бета-версии Edge для Mac и в Safari для Mac.
Сравните это с настоящим заголовком второго порядка из правой колонки.
Заголовок второго порядка
На иллюстрации выше видно, что дерево доступности получает корректные данные о порядке заголовка. Команда Mozilla писала об этом.
Для пользователей с особыми потребностями иерархия заголовков на странице играет важную роль. По данным исследования WebAIM, 86,1 % людей с ограниченными возможностями считают полезной практикой использование разноуровневых заголовков.
Начните изучать разработку с бесплатного курса «Основы современной вёрстки». Вы научитесь создавать статические веб-страницы, стилизовать элементы, использовать редакторы кода с полезными расширениями. В конце курса вы опубликуете свой первый сайт на GitHub Pages.
Никогда не говори никогда
Элемент section отделяется горизонтальной чертой снизу
Можно попробовать использовать div вместо section :
Как применять теги article и section : итоговые рекомендации
Всегда используйте заголовки разных порядков в зависимости от логической структуры документа. На странице должен быть один заголовок первого порядка, в который вкладываются заголовки второго порядка, в которые вкладываются заголовки третьего порядка и так далее.
Адаптированный перевод статьи Why You Should Choose HTML5 Over by Bruce Lawson. Мнение автора оригинальной публикации может не совпадать с мнением администрации Хекслета.
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Почему вам стоит выбрать элемент 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 и так далее.
Что такое семантическая вёрстка и зачем она нужна
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.
Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа
Ну и представьте, насколько проще читать вместо
Основные семантические теги HTML
Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег
, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.
Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.
Как разметить страницу с точки зрения семантики
Процесс разметки можно разделить на несколько шагов с разной степенью детализации.
Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.
Создание семантической разметки по макету
Навык, без которого фронтенд-разработчикам ну просто никуда.
Сомневаюсь, какие теги использовать
Есть простые правила для выбора нужных тегов.
Как точно не нужно делать
Не используйте семантические теги для украшательств. Для этого есть CSS.
Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.
Здесь сразу несколько ошибок:
использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.
А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.
Поэтому используйте семантические теги по назначению.
Как использовать семантические теги HTML5?
Правильно сверстанный сайт будет лучше ранжироваться поисковыми роботами и с большей вероятностью попадет на первые страницы поисковых систем.
И если для вас это важно, то предлагаю почитать статью, в которой я объясню, как использовать семантические теги.
Что такое семантические теги
Это теги, которые предназначены для того, чтобы компьютерные программы (поисковые системы, сборщики информации, речевые браузеры и т.д.) понимали, какой тип информации заложен в данных тегах.
Проще говоря, это как таблички в супермаркетах, которые указывают, где и какой находится отдел. Таким образом клиент быстрее найдет то, что ему нужно.
И если на вашем сайте будут такие же правильно расставленные таблички в виде тегов, поисковым роботам не составит труда найти информацию, которую запросил пользователь, и вывести в результат именно ваш сайт.
Семантика HTML относится к синтаксису, который делает HTML более понятным за счет лучшего определения различных разделов и макета веб-страниц. Она делает веб-страницы более информативными, позволяя браузерам и поисковым системам лучше ориентироваться на сайте.
Список новых тегов в HTML5
Если вдруг вы еще не знакомы с новыми тегами HTML5, предлагаю быстренько пробежаться и познакомиться
Как использовать семантические теги
На самом деле ничего сложного в использовании нет, главное – применять теги там, где они будут лучше всего отражать суть контента.
Давайте разберем простой пример:
Если внимательнее изучить структуру, вроде как понятно, что
Чтобы исправить ситуацию, давайте сверстаем страницу, используя семантические теги.
Ну или например блок статьи.
Тут даже без особых знаний верстки можно сразу определить, что это за блок и какая у него роль. И теперь вам не нужно добавлять атрибут id или class, чтобы хоть как-нибудь обозначить элемент на странице.
И напоследок давайте пройдемся по некоторым тегам, к которыми могут возникнуть вопросы.
Возможно, у вас сразу возник вопрос: “В чем разница между этими тегами?”
Оба служат для разделения контента путем группировки логически связанных элементов и могут использоваться как взаимозаменяемые. Вопрос только в том, в какой ситуации.
Если в пример взять статью, то обычно используют теги в таком порядке
Думаю суть уловили.
И если попробуем поменять теги местами,
Его можно не только использовать как подвал страницы, как может показаться на первый взгляд, но и добавить, например, в нижнюю часть статьи, где будет информация об авторе, дате публикации или какие-то ссылки.
То же самое можно сказать и про этот тег. Его можно располагать в начале страницы, над основным контентом, или в секции – размещать в нем, например, заголовок или навигацию.
Предназначен для контента, который не является частью основного потока на сайте, однако все равно имеет к нему какое-то отношение. Обычно выступает в качестве боковой панели к вашему основному содержимому.
Обычно располагается около тега
Заключение
Я думаю, вы поняли, что использовать семантические теги не так уж и сложно. Главное – понять, где их применять и зачем 🙂
Если подвести итог, можно определить два основных плюса:
На этом всё. Надеюсь, у вас появилось представление о том, зачем нужны семантические теги и как их использовать.
Узнать больше о новых элементах HTML5 можно тут:
w3schools – предоставляет простое и ясное описание многих html-элементов и того, как/где их следует использовать.
MDN – также предоставляет отличное описание всех элементов HTML + углубляется в каждый из них.