Html5 — Атрибут role в HTML5


Содержание

Эффективное использование ARIA в HTML5

15 Февраля 2020

ARIA это аббревиатура от Accessible Rich Internet Applications (доступные насыщенные интернет-приложения), использование этого стандарта позволяет сделать сайт более доступным для людей с ограниченными способностями, например, с нарушениями слуха или зрения. Посмотрим, что могут сделать разработчики, чтобы облегчить им жизнь.

Один из способов использования этого стандарта — добавление ARIA в разметку HTML. Вы наверняка знакомы с семантическими элементами HTML такими как nav , button или header . Легко понять, для чего можно использовать эти элементы. Они дают больше смысла содержимому страницы и мы можем использовать комбинацию этих элементов и ARIA в разметке. Однако для совместного их использования стоит учитывать несколько вещей.

Роли ARIA

Роли ARIA добавляются в разметку HTML как атрибуты. Они определяют тип элемента и указывают цель, которой он служит. В следующем примере элемент идентифицируется как баннер:

Еще один пример: здесь роль сообщает сведения о том, что элемент содержит информацию о содержимом страницы.

Оповещение будет выглядеть так:

role=”alert” полноценно работает с элементами, динамически добавляемыми в DOM или при смене отображения, например, с display:none to display:block

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

Элементы span (как и div) в большинстве случаев не нуждаются в указании role=”presentation”, так как не являются объектами в дереве доступности браузера (accessibility tree). Но для семантических элементов типа h1 — h6 это имеет смысл.

Атрибуты ARIA

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

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

Пример ARIA атрибута-состояния это aria-checked , используемый в таких элементах как чекбоксы и радиокнопки.

На самом деле использование атрибута ARIA в нативной радио-кнопке излишне, связывание input type=»radio» и aria-checked производится автоматически.

Образец атрибута-свойства это aria-label . Этот атрибут используется, когда метка элемента формы не видима на страница (это может быть продиктовано дизайном или просто не иметь смысла). Для случаев, когда текст метки видим, подходит атрибут aria-labelledby . Он используется также как и предыдущий, значение этого атрибута совпадает со значение id метки.

Это также можно сделать в элементе figure .

Правила ARIA

Прежде чем бросаться в атаку, запомните, что по нескольким причинам не стоит добавлять ARIA к каждому элементу.

Старайтесь максимально использовать семантические элементы HTML

Семантика ARIA по умолчанию ссылается на семантику, применяемую к элементам в браузере. Такие элементы как nav , article и button обладают уже заложенными ролями role=»navigation» , role=»article» и role=»button» соответственно. До появления семантических элементов HTML было распространена разметка по типу

У элемента может быть только одна роль

У элемента не может быть множественных ролей. Согласно определению, роль это:

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

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

Не изменяйте нативную семантику

Вы не должны применять роль, не соответствующую семантике элемента, так как добавленная роль переписывает нативную семантику элемента. Например:

Однако второе правило ARIA позволяет в случае необходимости использовать вложение элементов.

Как еще можно сделать разметку более доступной?

Максимально используйте семантические элементы

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

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

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

Вот пример с использованием обоих упомянутых элементов:

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

Атрибут alt

Это часто забываемая часть разметки, которая может серьезно сказаться на доступности, особенно в случае скринридеров. Этот атрибут появился в спецификации со времен HTML2 и описывается следующим образом:

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

По причине ограничений или предпочтений пользователя. Независимо от причин, по которым не загружается изображение, у пользователей с ослабленным зрением на самом деле нет предпочтений. Они просто испытывают проблемы при просмотре изображения. Хотя спецификация ничего не говорит о термине “доступность”, она предполагает, что изображение не может быть загружено как следует, а у пользователя есть возможность отключить загрузку изображения. Хотя мы живем в мире, в котором второй вариант кажется менее вероятным, мы не можем предугадать, что делает пользователь на другом крае. Поэтому мы должны предлагать пользователям альтернативу.

Люди часто заполняют атрибут alt не информативно, например, пишут текст типа “собака” для фотографии своей собаки, играющей в парке. К сожалению, этот текст не нарисует никакой картины для слабовидящих. Следующий подход более приемлем:

Отметьте, что атрибут alt создан не для того же, что и элемент figcaption : цель alt это создание альтернативного текста для изображения, а figcaption это просто правильный заголовок для figure . Если развивать наш предыдущий пример у figcaption следующий текст:

Пример разметки с использованием семантического HTML и ARIA, ориентированный на доступность

Если вы смотрели на примеры в этой статье, то вы ожидаете увидеть в качестве образца следующее:

  • использование семантического HTML для изображения и заголовка
  • целевое использование элемента cite
  • добавление атрибута alt
  • использование одного из атрибутов ARIA

Заключение

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

Как использовать data-атрибуты HTML5

Давным-давно, во времена XHTML/HTML4 у разработчиков было всего несколько возможностей, которыми они могли пользоваться для того, чтобы хранить произвольные данные, относящиеся к DOM. Вы могли изобретать свои собственные атрибуты, но это было рискованно — ваш код не был бы валидным, браузеры могли игнорировать ваши данные, и это могло вызвать проблемы, если название совпадало со стандартными атрибутами HTML.

Поэтому большинство разработчиков завязывались на атрибуты class или rel так как они были единственным разумным способом хранить дополнительные строки. К примеру, предположим, что мы создаем виджет для отображения сообщений типа временной линии сообщений в Twitter. В идеале JavaScript должен иметь возможность конфигурирования без необходимости переписывать код, так что мы определяем идентификатор пользователя в атрибуте class, например:

Наш JavaScript код будет искать элемент с ID msglist. С помощью скрипта мы будем искать классы, начинающиеся с user_, а “bob” в нашем случае будет идентификатором пользователя, и мы отобразим все сообщения этого пользователя.

Скажем, мы бы хотели также задать максимальное количество сообщений, и пропускать сообщения старше шести месяцев (180 дней):

Наш атрибут class очень быстро загромождается — проще допустить ошибку, а разбор строк на JavaScript становится все сложнее.

Data-атрибуты HTML5

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

  • это строки — в них вы можете хранить любую информацию, которая может быть представлена или закодирована в виде строки, например JSON. Приведение типов должно осуществляться с помощью JavaScript
  • должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов
  • относятся только к странице. В отличие от микроформатов они должны игнорироваться внешними системами, типа поисковых систем и поисковых роботов

Пример №1 обработки на JavaScript: getAttribute и setAttribute

Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:

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

Пример №2 обработки на JavaScript: метод data() библиотеки jQuery

Начиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс data-, так что подобный код будет работать:

Но как бы то ни было, имейте в виду, что jQuery пытается конвертировать значения таких атрибутов в подхдящие типы (булевы значения, числа, объекты, массивы или null) и затронет DOM. В отличие от setAttribute, метод data() физически не заменит атрибут data-list-size — если вы проверите его значение вне jQuery — оно все еще останется равным 5.

Пример №3 обработки на JavaScript: API для работы с наборами данных

И, наконец, у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объект без префиксов data-, из названий убираются знаки дефиса, а сами названия конвертируются в camelCase, например:

Имя атрибута Имя в API набора данных
data-user user
data-maxage maxage
data-list-size listSize

Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует обходной путь, но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/use-html5-data-attributes/
Перевел: Станислав Протасевич
Урок создан: 14 Марта 2014
Просмотров: 59726
Правила перепечатки

5 последних уроков рубрики «HTML5»

Расширяем возможности HTML за счёт создания собственных тегов

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


Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

Цукерберг рекомендует:  50 ретро и винтажных дизайнов для вашего вдохновения

Создание форм с помощью Webix Framework — 4 практических примера

Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Существуют ли примеры сайтов, использующих атрибут role в HTML5 / XHTML?

Я рассматривал использование атрибута role для HTML5/XHTML в W3C:http://www.w3.org/TR/wai-aria/roles и было интересно, есть ли какие-либо сайты, которые используют это или примеры того, как/когда использовать атрибут роли.

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

кроме того, я прав, предполагая, что вам нужно использовать значения, определенные в ссылке выше (e.G статья, columnheader, definition, directory, document etc), или вы также можете создавать свои собственные значения/определения для атрибута роли?

2 ответов

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

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

Структура HTML5 — div, section и article :: Хранитель заметок

Структура HTML5 — div, section и article

В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами >

Рассмотрим три элемента, которые легко можно спутать друг с другом:

  • div — «базовый контейнер», который мы все знаем и любим. Это обычный блочный элемент без какого-либо семантического значения.
  • section — «документ или раздел приложения». Обычно содержит верхний (header) и нижний (footer) колонтитулы. Это несколько схожих по смыслу статей, подраздел одной большой статьи, главная часть страницы (например, раздел новостей) или страница интерфейса с закладками.
  • article — «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.

Разница между div, section и article

В HTML4 div использовался как базовый элемент разметки. Он не имел особого семантического значения. Так же не было особых требований на его содержимое и взаимоотношение между ним внутри блока.

Элемент section

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

Так же этот элемент служит для разбивки текста на разделы.

Элемент article

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

Что выбрать?

Если проводить аналогию с HTML4, то можно сравнить эти теги с p и blockquote. Оба тега — блочные элементы, но blockquote, как разновидность p, имеет значение «блок цитируемого текста». То же самое и с section и article: тег section обозначает близкий по смыслу текст, а тег article обозначает осмысленную часть этого текста.

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

Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:

  1. Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
  2. Если части содержимого объединены общим значением, то выбираем section
  3. Наконец, если нет никакого семантического значения, то выбираем div

Элемент section, за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.

Итак, элемент section не стоит использовать если:

  1. требуется блочный элемент для декорирования. Это функция элемента div
  2. в этом месте для разметки содержимого больше по смыслу подходят элементы article, as >nav
  3. у раздела нет естественного заголовка

Элементы section и article используются аналогично div в HTML4. Они не должны встречаться внутри p, blockquote или address.

30 необходимых практик для написания современного и эффективного HTML5

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

HTML5 уже существует много лет, стабилен и поддерживается практически всеми основными браузерами с 2014 года. Далее мы собираемся показать вам список лучших практик, связанных с непосредственно с его разметкой и использованием.

Этот список составлялся с расчётом на создание ясного, поддерживаемого и масштабируемого кода, который успешно использует элементы семантической разметки из HTML5 и который корректно отрендерится во всех поддерживаемых браузерах. Все SEO, CSS и обычные front-end практики JS выходят уже за пределы этой статьи.

A) Главное

01 — Указывайте doctype

Указание doctype должно идти первой строкой вашего HTML документа. Так рекомендуется, если вы используете HTML5 doctype:

Который на самом деле активирует стандартный режим во всех браузерах. Как альтернативу, вы можете использовать doctype , который отвечает за используемую HTML/XHTML версию.

02 — Закрывающие теги

Пустые элементы, то есть теги, которые не могут содержать какой-либо контент.

Самозакрывающиеся теги допустимы, но необязательны. Это такие элементы как:
, , , ,
, ,

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

03 — Опциональные теги

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

Опциональные закрывающиеся теги

HTML5 допускает опциональные закрывающие теги для некоторых элементов. Вам необязательно их использовать, в Google Style Guide по HTML вообще рекомендуют избегать все опциональные теги.

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

04 — Атрибут lang

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

05 — Принцип простоты

В целом, HTML 5 был разработан для обратной совместимости с более старыми версиями HTML и XHTML. По этой причине рекомендуется избегать использования XML или его атрибутов. Совершенно нет причин для его применения:

Пока вам реально не надо будет написать XHTML документ, нет смысла в его применении и использовании. Также вам не нужны и xml атрибуты, как тут:

Этот блог бесплатный, в нём нет рекламы и ограничений paywall.
Вы можете его поддержать через Яндекс.Деньги. Спасибо.

B) Metadata

06 — Тег

Это очень полезный тег, особенно для разработки на локальных серверах. Однако, при неправильном использовании он может выдать нечто странное. По-сути, если вы впишите тег , то каждая ссылка на странице будет формироваться относительно неё, если она не указана полностью. Это влечет за собой смену стандартного формирования и поведения некоторых ссылок. Для примера, внутренняя ссылка href=»#internal» будет интерпретирована браузером как href=»http://www.example.com/#internal»

Также, ссылка на внешнюю страницу сделанная таким способом: href=»example.org” , будет интерпретирована браузером как href=»http://www.example.com/example.org»

В общем, безопаснее использовать абсолютные пути для ваших ссылок.

07 — Тег

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

08 — Указывайте кодировку

Не забудьте (ну или ту кодировку, которую вы используете в вашем документе) — так вы убедитесь в том, что ваша страница отображается корректно.

09 — Метатег description

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


C) Использование семантически подходящих элементов для разметки вашей страницы

В HTML5 есть несколько элементов, которые помогут вам грамотно расставить и организовать элементы на вашей странице.

10 — Элементы и

На изображении выше простой шаблон, мы видим сверху страницы и в самом низу. Это то, как выглядит типичная страница, которую вы привыкли видеть, с логотипом вверху страницы и подвалом с несколькими ссылками, а также копирайтами в самом низу. Пользователи WordPress возможно привыкли называть их “masthead” и “colophon”, соответственно.

11 — Элемент

должен использоваться для навигации по всему сайту. Совершенно нет нужды в указании role, как тут:

Роль элемента уже подразумевается в самом теге:

12 — Элемент

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

Если у нас уже есть куда более точный тег для указания основного контента страницы:

13 — , или

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

И наконец, мы используем

14 — это семантический тег, а не стилистический

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

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

Для примера, вот некорректное использование тега :

Вот уже получше, но тут видно сильное злоупотребление тегом

И вот уже получше:

15 — Элемент

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

Представьте иллюстрации, таблицы или диаграммы в книге.

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

16 — Группировка элементов с помощью по общему

Тег должен располагаться либо сразу после открытия тега , либо сразу после закрытия тега .

D) Использование подходящих тегов и/или атрибутов в соответствии с их предназначением

17 — Стилизующие теги устарели в HTML5 — используйте CSS

Не используйте , , — они просто устарели и даже не смейте использовать , хоть он сам по себе и не устаревший.

Не используйте , он уже давно вышел из употребления.

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

И вообще, было бы оптимальным решением для каждого, избегать стилистических элементов в HTML разметке, для этого вообще-то есть CSS.

18 —
элемент не для разметки

Не используйте
для форматирования документа или для добавления пробелов между элементами. В письмах да, можно.

Суть тут в том, что если это может быть отформатировано с помощью margin или padding в CSS, то вам нет смысла использовать
. Однако, если вы хотите добавить перенос строки внутри одного и того же элемента, то
будет вполне подходящим решением:

19 — Указание типа не очень важно для таблиц стилей и JavaScript файлов

В HTML5 нет нужды в указании типа для и

20 — Используйте атрибут alt для ваших изображений

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

21 — Будьте аккуратны при использовании атрибута title

Атрибут title не замена атрибуту alt . alt используется вместо изображения, в то время, как title показывается вместе с изображением, обычно как всплывающая подсказка.

В спецификации HTML5.1 предостерегают от чрезмерного использования атрибута title , из-за недостаточной поддержки браузерами, такими как touch-only в телефонах и планшетах.

Вот подходящий пример использования атрибута title :

Следующего использования нужно бы избегать:

Вместо этого, попробуйте должным образом дать название ссылке и использовать атрибут alt для вашего изображения:

E) Читабельность кода и подходы к форматированию

Всё упомянутое в этой категории сугубо субъективно. Каждый front-end разработчик имеет свой подход и это хорошо, хорошо до тех пор пока подход последовательный и осмысленный. В основном, если ваш код ясный и читабельный для других разработчиков, то этого вполне достаточно.

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

22 — Последовательность отступов

Код с полным отсутствием отступов или наличием непоследовательных отступов можно считать нечитабельным. На заметку — Google Style Guide для HTML рекомендует использование двух пробелов для отступов и не использовать табуляцию.

Если бы это был общепринятый формат, то каждый бы форматировал свой HTML код последовательно. Однако, каждый разработчик делает что-то по своему, так что по крайней мере мы должны попытаться что-то делать по общим стандартам: если вы решили использовать 4 пробела или два таба для отступа(пожалуйста, никогда не используйте два таба), сделайте это на каждой строчке вашего HTML кода, хотя бы для понимания другими.

23 — нижний регистр, Заглавный Регистр, ГорбатыйРегистр и КАПС

ГорбатыйРегистр используется в JavaScript и это визуально понятное форматирование в JS. По-этому, лучше всего не использовать его в отрезках кода, которые не в JS.

Заглавный Регистр — только для текста, строк, контента. Хоть это и не является технически неправильным — называть классы или ID заглавным регистром, это всё равно сильно влияет на читабельность.

КАПС — снова, технически всё верно, кроме того, что так принято описывать крик и вообще это визуально неприятно.

нижний регистр — наиболее используемый подход.

24 — Кавычки

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

Хотя одно замечание: HTML допускает одинарные кавычки и это очень удобно при генерации HTML из PHP. Однако, если HTML написан вручную, то это реально вопрос предпочтений. Главное, чтобы вы были последовательны (!)

Так что этот код отформатируется с пустой строки. Используйте элементы

26 — Мнемоники

Используйте мнемоники с

F) Валидация и минифицирование

29 — Валидация

W3C валидатор устанавливает стандарты индустрии, так что это должно быть первым местом куда вы пойдете проверять валидность вашего кода.

Вы также можете получить исходный код их Nu валидатора.

30 — Минифицирование и комбинирование CSS и JS файлов

У современного сайта обычно больше одного CSS файла. Главные стили, bootstrap или любые другие стили сеток, может быть ещё несколько стилей для плагинов, тем, ну и т.п. Каждый CSS файл делает отдельный HTTP запрос, тормозя загрузку вашего сайта.

Это рекомендуемая практика, в финальном продукте минифицировать и комбинировать все ваши CSS’ки для улучшения времени загрузки. Также вполне обычной является практика хранения неминифицированных файлов, к примеру в папке “css/src”, потому что редактирование и дебагинг минифицированных файлов — ну очень сложное занятие.

Таким же образом рекомендуется минифицировать и комбинировать ваши JavaScript файлы. Также рекомендуется выставлять их в конце документа, сразу над закрывающим тегом

Как использовать в html 5 data-атрибуты и другие новые атрибуты

Дата публикации: 2020-03-16

От автора: приветствую вас, дорогие читатели блога webformyself. В этой статье мы продолжим говорить о технологии html5. В этот раз я хотел бы затронуть другие нововведения этой спецификации. Таковыми являются в html5 data-атрибуты, которые можно прописывать любым тегам.

Что такое data-атрибуты и для чего они нужны?


Итак, начнем с того, что же это такое вообще. Как вы возможно знаете, в html любому тегу можно указать какой-то атрибут, будь то универсальный (class, id) или уникальный для этого элемента.

Так вот, новая спецификация HTML5 добавила несколько новых атрибутов. В основном они пишутся для таких же новых тегов, но также появилась еще одна, абсолютно новая категория – data-атрибуты.

Их первая особенность в том, что атрибут может называться как угодно. Единственное правило – он должен начинаться с префикса data- и в нем, естественно, не должно быть русских букв. Одному тегу можно записать сколько угодно таких параметров. В качестве значений также можно указывать произвольные слова. Кстати, значение можно указывать и на русском. Пример:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Способ применения 1 – обращение к элементам в css

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

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

Способ применения 2 – хранение значений и их использование

С первого взгляда, значения data-атрибутов ничего не меняют и вообще никак не влияют на веб-страницу. Так зачем они вообще нужны? На самом деле применение им найти можно, если вспомнить про функцию attr() в css.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Но такая подсказка может не удовлетворять вас по очень многим параметрам. Во-первых, она появляется плавно (что не всегда нужно). Во-вторых, она исчезает через какое-то время. В-третьих, она появляется в разных местах, в зависимости от того, куда наведен курсор. Ну а самая большая проблема – мы никак не можем стилизовать нашу подсказку – это всегда будет черный текст на белом фоне, что не очень интересно.

Итак, выше в коде мы вставили картинку, указали путь к ней и дополнительно записали произвольный data-параметр. Реализовать вывод пояснения к фото теперь можно таким образом:

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

Я не буду в этой статье приводить инструкцию, как оформить подсказку. Скажу только, что по умолчанию она будет отображаться после загрузки страницы. Зачастую ее нужно изначально скрыть, а выводить при наведении на картинку. Чтобы это реализовать, вам нужно воспользоваться селектором img:hover:after.

Ну а какие есть еще html5 атрибуты, появившиеся только в этой спецификации? К таковым можно отнести, например, controls – атрибут для новых элементов audio и video, который позволяет вывести элементы управления видеороликом или аудиозаписью.

У видео с помощью параметра poster можно указать путь к изображению, которое будет фоном до начала просмотра видео. В общем, вот таких вот мелких атрибутов появилось не так уж и мало.

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

Конечно, единственный минус всех этих нововведений в том, что они не везде должным образом поддерживаются. Так что если в одном браузере новые возможности прекрасно работают и пользователи могут использовать новые поля, то в другом веб-обозревателе все может быть по-другому. Конечно, отчасти виноваты сами пользователи, которые не обновляют ПО, но нужно также следить за тем, что и как поддерживается. В премиум-курсе по HTML5 вы как раз сможете узнать о хороших сервисах, которые определяют поддержку тех или иных свойств.

Упрощенный синтаксис

Не могу не упомянуть о том, как правильно записывать атрибуты и их значения. Дело в том, что HTML 5 в этом плане стал гораздо более простым. Достаточно указать , и можно писать код даже с небольшими ошибками, а в результате он все равно будет обработан правильно. Примеры:

HTML Attributes

Атрибуты предоставляют дополнительную информацию о HTML-элементах.

Атрибуты HTML

  • Все элементы HTML могут иметь атрибуты
  • Атрибуты предоставляют Дополнительные сведения об элементе
  • Атрибуты всегда указываются в начальном теге
  • Атрибуты обычно поставляются в парах «имя/значение», например: name=»value»

Атрибут href

Пример

Вы узнаете больше о ссылках и тег далее в этом учебнике.

Атрибут src

HTML-образы определяются тегом .

Имя файла источника изображения указывается в атрибуте src :

Example

Атрибуты ширины и высоты

Изображения в HTML имеют набор атрибутов size, который определяет ширину и высоту изображения:

Пример

Размер изображения указан в пикселях: w , означает 500 пикселей в ширину.

Вы узнаете больше об изображениях в наших HTML-изображениях Глава.

The alt Attribute

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

Значение атрибута может быть прочитано программами чтения с экрана. Таким образом, кто-то «прослушивание» на веб-странице, например, слепой человек, может «слышать» элемент.

Пример

Атрибут alt также полезен, если изображение не существует:

Пример

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

Атрибут style

Атрибут style используется для указания стиля элемента, например цвета, шрифта, размера и т. д.

Пример

I am a paragraph

Вы узнаете больше о стилизации позже в этом учебнике, и в нашем Учебник по CSS.

Атрибут lang

Язык документа может быть объявлен в теге .

Язык объявляется с атрибутом lang .

Объявление языка важно для приложений специальных возможностей (программы чтения с экрана) и поисковых систем:

Семантическая разметка и микроформаты

Веб-программирование — HTML5 — Семантическая разметка и микроформаты

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

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

Идея семантически осмысленной разметки не является новой. В действительности, давным-давно, когда HTML5 существовал только в задумках Яна Хиксона (Ian Hickson), редактора группы WHATWG, многие веб-разработчики настойчиво искали методы для создания более осмысленной разметки. Не всегда их требования — совпадали: одни хотели улучшить доступность своих веб-страниц, другие — возможность для интеллектуального анализа данных, а третьим просто хотелось повысить фактор впечатляемости своего резюме. Но никто из них не смог найти то, что им требовалось в стандартном языке HTML, вследствие чего было создано несколько новых стандартов, чтобы заполнить этот пробел.

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

Стандарт Accessible Rich Internet Applications

Развивающийся стандарт Accessible Rich Internet Applications (ARIA, доступные активные веб-приложения) позволяет предоставлять дополнительную информацию для программ чтения экрана (скрин-ридеров) с помощью атрибутов любого элемента HTML. Среди прочих, в нем вводится атрибут role, который указывает назначения данного элемента.

Например, назначение представляющего верхний колонтитул элемента:

можно довести до сведения программ чтения экрана, присвоив атрибуту role значение banner:

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

Этот пример иллюстрирует два важных факта. Первый: стандарт ARIA требует использования одного из коротких списков рекомендованных названий ролей. Второй: некоторые части стандарта ARIA перекрывают семантические элементы HTML5, что вполне логично, т.к. ARIA появился раньше HTML5. Но это не совсем полное перекрытие. Например, некоторые названия ролей дублируют элементы HTML5 (скажем, banner и article в то время как другие являются более продвинутыми (например, toolbar и search).

Стандарт ARIA также вводит два атрибута для работы с HTML-формами. Атрибут aria-required в текстовом поле указывает, что пользователю нужно ввести значение. А атрибут aria-invalid указывает на недействительность текущего значения в текстовом поле. Польза от этих атрибутов в том, что программы чтения экрана могут пропустить визуальные подсказки, которыми руководствуются пользователи с нормальным зрением при заполнении форм, например, звездочку рядом с заполненным полем или красный мигающий восклицательный знак рядом с полем с неправильным введенным значением.


Чтобы правильно применять стандарт ARIA, необходимо изучить его и потратить некоторое время на исследование разрабатываемой разметки. С учетом того, что стандарт ARIA все еще находится в процессе развития и HTML5 предоставляет некоторые такие же возможности, но меньшей ценой, мнение веб-разработчиков касательно ценности такого вложения усилий и времени в этот стандарт неоднозначно.

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

Стандарт Resource Description Framework

Стандарт Resource Description Framework (RDFa — инфраструктура для описания ресурсов — в атрибутах) определяет правила для интегрирования подробных метаданных в веб-документы посредством атрибутов. У стандарта RDFa есть значительное преимущество перед другими подходами: это стабильный, установившийся стандарт.

Но у него также два значительных недостатка. Первый — это сложный стандарт. Разметка со вставленными в нее метаданными RDFa получается намного объемистей и существенно неуклюжей, чем обычная HTML-разметка. Второй — стандарт этот разработан для применения с XHTML, а не с HTML5. В настоящее время несколько сверхинтеллектуальных веб-гуру занимается разработкой лучших способов адаптирования RDFa для работы с HTML5. Но, возможно, что RDFa просто не приживется в мире HTML5, т.к. ему больше подходят строгий синтаксис и железные правила XML.

Здесь стандарт RDFa не рассматривается. Но если вы хотите узнать больше о нем, солидный обзор можно получить на странице en.wikipedia.org/wiki/RDFa. А на веб-сайте Google Rich Snippets можно ознакомиться с версиями RDFa для всех примеров расширенных фрагментов Google.

Микроформаты

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

Благодаря этому подходу микроформаты пользуются огромным успехом; в недавнем исследовании, проведенном Google, было обнаружено, что у 94% страниц, содержащих какой-либо тип расширенных метаданных, эти метаданные предоставляются микроформатами.

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

Прежде чем помечать данные микроформатом, нужно выбрать, какой именно микроформат использовать для этого. Широко применяется всего лишь пара десятков микроформатов, большинство из которых продолжает совершенствоваться и обновляться. Информацию о доступных микроформатах и подробное описание каждого из них можно найти на веб-сайте Microformats. Наибольшей популярностью среди всех этих микроформатов пользуются два — hCard и hCalender, которые мы и рассмотрим.

Обозначение контактной информации с помощью микроформата hCard

Микроформат hCard предоставляет универсальный способ обозначения контактной информации для физического лица, компании или места. По результатам последнего подсчета Интернет содержит свыше 2 млрд hCard, что делает этот микроформат безоговорочно самым популярным.

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

Для создания hCard требуется корневой элемент, который присваивает атрибуту class значение vcard. Внутри этого элемента необходимо посредством другого элемента предоставить, по крайней мере, отформатированное имя. Атрибуту class этого внутреннего элемента нужно присвоить значение fn. Вот приводится пример такого определения:

При использовании для микроформата атрибута class в создании соответствующего стиля с именем этого класса нет надобности, более того, это, скорее всего, только создаст путаницу. Вместо этого атрибуту class дается другое задание объявлять, что его содержимое является хорошо структурированными, осмысленными данными.

Хотя единственной обязательной единицей информации для микроформатов является имя, большинство из них содержит дополнительные подробности, такие как почтовый адрес и адрес электронной почты, URL веб-сайта, номер телефона, дата рождения, фотография, должность, название организации и т.п. При условии использования правильных названий классов все эти подробности можно вставить в элемент, содержащий класс vcard. В следующем листинге приводится пример определения hCard, содержащего разные типы персональной информации:

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

Например, браузер мог бы обнаружить элементы hCard на странице, вывести их список в боковой панели и предоставить пользователю команды, позволяющие добавить любое лицо из списка в личную адресную книгу пользователя так же быстро, как и добавить страницу в закладки. Информацию о подключаемых модулях браузера для поддержки микроформатов можно получить на странице «Browsers».

Одним из таких расширений является Oomph для Internet Explorer, которое можно загрузить с веб-сайта oomph.codeplex.com. Этот модуль автоматически исследует каждую посещаемую веб-страницу на предмет наличия в ней трех форматов: hCard (для контактной информации), hCalendar (для календарей событий) и hMedia (для изображений, аудио и видео). В случае обнаружения в странице данных, помеченных одним из этих форматов, в левом верхнем углу окна браузера выводится значок Oomp. Щелчок по этому значку выводит в браузере всю обнаруженную информацию, а также элементы управления для обработки.

Но что особенно интересно в этом инструменте, так это возможность использовать его другим способом — через библиотеку JavaScript. Для этого всего лишь нужно добавить в страницу ссылки на сценарии:

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

Обозначение событий с помощью микроформата hCalendar

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

Если вы разобрались в том, как помечать информацию микроформатом hCard, у вас не будет никаких трудностей и с микроформатом hCalendar. Сначала событие нужно поместить в элемент с названием класса vevent. Внутри этого элемента нужно поместить, по крайней мере, две единицы информации: дату начала (которая помечается классом dtstart) и описание события (которое помечается классом summary).

Микроданные

Еще одним подходом к решению задачи придания семантического смысла разметке веб-страниц являются микроданные. Формат микроданных зародился как часть спецификации HTML5, но потом был выделен в отдельный развивающийся стандарт. В микроданных применяется подход, подобный стандарту RDFa, но проще. В отличие от микроформатов, микроданные имеют собственные атрибуты, что устраняет возможность конфликта с правилами таблиц стилей (или озадачивания веб-разработчиков, пытающихся разобраться в чужом коде).

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

Чтобы создать блок микроданных, нужно добавить атрибуты itemscope и itemtype в любой элемент (хотя логичнее будет создать элемент

Тип данных обозначается предопределенной, однозначной текстовой строкой, называющейся пространством имен XML. В данном примере пространством имен XML является формат для кодирования рейтинга http://data-vocabulary.org/Review-aggregate.

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

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

По существу, самая большая разница между микроданными и микроформатами состоит в использовании в первых для маркировки данных атрибута itemprop, а не атрибута class, как в последних.

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

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

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Устаревшие атрибуты HTML5

Какие атрибуты в HTML5, являются устаревшими?

Движение концепции HTML5 заключается в том, чтобы код HTML-документа состоял лишь из «пустых» тегов, чтобы было как можно меньше атрибутов, а атрибуты форматирования вообще полностью отсутствовали.

В спецификации HTML5, у различных тегов устарели следующие атрибуты:

У тега устарели атрибуты alink=» » , bgcolor=» » , link=» » , marginbottom=» » , marginheight=» » , marginleft=» » , marginright=» » , margintop=» » , marginw , text=» » и vlink=» » .

У тега
устарел атрибут clear=» » .

У тега устарел атрибут name=» » .

У тега устарел атрибут profile=» » .

У тега устарел атрибут version=» » .

У тега устарел атрибут longdesc=» » .

У тега устарели атрибуты border=» » , longdesc=» » , lowsrc=»http://html-5.ru/ustarevshie-atributy-html5″ и name=» » .

У тега устарел атрибут usemap=» » .

У тега
устарели атрибуты charset=» » , methods=» » , rev=» » , target=» » , type=» » и urn=» » .

У тега устарел атрибут scheme=» » .

У тега устарел атрибут name=» » .

У тега устарели атрибуты archive=» » , , code=» » , codebase=» » , codetype=» » , declare=» » и standby=» » .

устарели атрибуты type=» » и valuetype=» » .

Структура HTML5 — div, section и article :: Хранитель заметок

Структура HTML5 — div, section и article

В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами >

Рассмотрим три элемента, которые легко можно спутать друг с другом:

  • div — «базовый контейнер», который мы все знаем и любим. Это обычный блочный элемент без какого-либо семантического значения.
  • section — «документ или раздел приложения». Обычно содержит верхний (header) и нижний (footer) колонтитулы. Это несколько схожих по смыслу статей, подраздел одной большой статьи, главная часть страницы (например, раздел новостей) или страница интерфейса с закладками.
  • article — «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.

Разница между div, section и article

В HTML4 div использовался как базовый элемент разметки. Он не имел особого семантического значения. Так же не было особых требований на его содержимое и взаимоотношение между ним внутри блока.

Элемент section

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

Так же этот элемент служит для разбивки текста на разделы.

Элемент article

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

Что выбрать?

Если проводить аналогию с HTML4, то можно сравнить эти теги с p и blockquote. Оба тега — блочные элементы, но blockquote, как разновидность p, имеет значение «блок цитируемого текста». То же самое и с section и article: тег section обозначает близкий по смыслу текст, а тег article обозначает осмысленную часть этого текста.

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

Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:

  1. Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
  2. Если части содержимого объединены общим значением, то выбираем section
  3. Наконец, если нет никакого семантического значения, то выбираем div

Элемент section, за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.

Итак, элемент section не стоит использовать если:

  1. требуется блочный элемент для декорирования. Это функция элемента div
  2. в этом месте для разметки содержимого больше по смыслу подходят элементы article, as >nav
  3. у раздела нет естественного заголовка

Элементы section и article используются аналогично div в HTML4. Они не должны встречаться внутри p, blockquote или address.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих