Атрибуты HTML-тегов. Глобальные атрибуты Что такое глобальные атрибуты в html
Наряду с атрибутами, характерными для конкретных тегов, в HTML5 существует и ряд атрибутов, который можно добавлять к любым тегам, поэтому входящие в эту группу атрибуты называются глобальными или универсальными. Ниже они перечислены с кратким описанием. По ссылке доступно подробное описание атрибута.
Атрибут accesskey позволяет активировать ссылку с помощью некоторого сочетания клавиш с заданной в коде ссылки буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.
- Internet Explorer: Alt + S
- Chrome: Alt + S
- Opera: Shift + Esc , S
- Safari: Alt + S
- Firefox: Shift + Alt + S
Задаёт стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.
Сообщает, что элемент доступен для редактирования пользователем - допускается удалять текст, и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.
Устанавливает контекстное меню для элемента. В качестве значения указывается идентификатор меню созданного с помощью тега .
Задает направление и отображение текста - слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.
draggableПозволяет перетаскивать элемент для дальнейшего манипулирования с ним.
dropzoneУказывает, что делать с перетаскиваемым элементом.
Скрывает содержимое элемента от просмотра. Такой элемент не отображается на странице, но доступен через скрипты.
Задаёт идентификатор - уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
itemid, itemprop, itemref, itemscope, itemtypeГруппа атрибутов, предназначенная для работы с микроданными.
Текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата. Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang . Браузер использует его значение для правильного отображения некоторых символов.
Указывает браузеру проверять или нет правописание и грамматику в тексте. Хотя атрибут можно устанавливать практически для всех элементов, результат будет заметен только для полей форм ( , ), а также редактируемых элементов (у них установлен атрибут contenteditable ).
Применяется для определения стиля элемента с помощью правил CSS.
Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab . Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде.
Создаёт всплывающую текстовую подсказку, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.
От автора: несомненно, вы каждый день взаимодействуете в Сети по меньшей мере с одной формой. Занимаетесь ли вы поиском контента, или входите в свой аккаунт на странице Facebook’а – в вебе применение онлайн-форм является одной из самых обычных задач. Для дизайнеров и разработчиков создание форм отличается некоторым однообразием, особенно написание для них скриптов валидации данных. HTML5 представляет множество новых атрибутов, типов input и прочих элементов инструментария разметки.
В этой статье мы сосредоточимся на изучении новых атрибутов, а в следующей рассмотрим типы ввода данных.
Станет видно, что новые свойства значительно облегчат нам жизнь при произведении впечатления на пользователей. Что тут самое привлекательное? Применять их можно уже сейчас. Мы начнем с очень краткой истории форм HTML5.
Эта статья – отрывок из Главы 6 книги Начинаем изучать HTML5 и CSS3: Эволюция Сети (Beginning HTML5 and CSS3: The Web Evolved) Кристофера Мерфи, Оли Стадхольма, Ричарда Кларка и Дивья Маньяна (Christopher Murphy, Oli Studholme, Richard Clark и Divya Manian), опубликованной издательством Apress.
Примечание: Так как эта статья является отрывком из книги, с момента создания скриншотов выполнение браузером атрибутов и типов ввода данных могло измениться. К тому же с момента публикации могла расшириться браузерная поддержка, поэтому по вопросу ее текущего состояния, пожалуйста, обратитесь к приведенным в конце статьи ссылкам.
История форм HTML5Раздел форм в HTML5 изначально был спецификацией под названием Web Forms 2.0 , где добавлялись новые типы инструментов управления формами. Начатая в Opera и редактировавшаяся тогдашним сотрудником Opera Айэном Хиксоном (Ian Hickson), она была утверждена W3C в начале 2005г . Работа изначально проводилась W3C. Затем ее объединили со спецификацией Web Applications 1.0 с целью создания основы спецификации HTML5 отколовшейся рабочей группы Web Hypertext Application Technology Working Group (WHATWG).
Применение принципов дизайна HTML5Одна из лучших характеристик форм HTML5 – то, что сразу же можно применять почти все новые типы ввода данных и атрибуты. Им не требуются никаких дополнительных фишек, хаков и прочих заплаток. Не то, чтобы они все уже «поддерживались», но в современных браузерах, которые по-настоящему их поддерживают, они способны проделывать классные вещи – и красиво деградировать в тех браузерах, которые их не понимают. Все это – благодаря дизайнерским принципам HTML5 . В данном случае мы особо ссылаемся на принцип красивой деградации. В целом, непростительно не начать сразу применять эти функции. Фактически это будет значить, что вы находитесь впереди планеты всей.
Атрибуты форм HTML5В этой статье мы рассмотрим 14 следующих новых атрибутов.
placeholderПервым идет атрибут placeholder, который позволяет нам установить текст-заполнитель, что до последнего времени делалось в HTML4 с помощью атрибута value. Его можно применять только для коротких описаний. Для более длинных применяйте атрибут title. Различие с HTML4 состоит в том, что текст показывается, только когда поле пустое и не в фокусе. Как только поле попадает в фокус (например, при щелчке мышью или указании на поле), и вы начинаете печатать, текст просто исчезает. Очень похоже на поле поиска в Safari.
Давайте разберемся, как выполнять атрибут placeholder.
< input type = "text" name = "user-name" id = "user-name" placeholder = "at least 3 characters" > |
Вот так! Я слышу, как вы думаете: «Что такого в нем примечательного? Я всю жизнь делал это в JavaScript’е». Да, верно. Однако с HTML5 он становится частью браузера, означая, что требуется писать меньше скрипта для достижения более доступного кроссбраузерного решения (даже при отключенном JavaScript’е). На рисунке показана работа атрибута текста-заполнителя в Chrome’е.
Браузеры, не поддерживающие атрибут placeholder, игнорируют его, поэтому он не станет выполняться. Однако включив его, вы улучшаете впечатление тех пользователей, чьи браузеры обеспечивают его поддержку, а также гарантируете своему сайту перспективность. Все современные браузеры поддерживают текст-заполнитель.
autofocusАвтофокус делает в точности то, что означает. Добавлении его к input автоматически фокусирует поле при отображении страницы. Как и в случае с placeholder’ом, в прошлом для autofocus’а мы применяли JavaScript.
Однако у традиционных методов JavaScript’а имеются серьезные проблемы юзабилити. Например, если пользователь начинает заполнять форму до полной загрузки скрипта, он будет (неприятно) возвращен после загрузки к первому полю формы. Атрибут autofocus в HTML5 обходит эту проблему, фокусируясь по мере загрузки документа, при этом не нужно ждать загрузки JavaScript’а. Однако мы рекомендуем применять его для предотвращения проблем с юзабилити только для тех страниц, чья единственная цель – форма (типа Google’а).
Это – булев атрибут (за исключением случаев, когда вы пишете XHTML5; смотрите примечание) и выполняется как здесь:
< input type = "text" name = "first-name" id = "first-name" autofocus > |
Его поддерживают все современные браузеры и, как placeholder, не выполняющие autofocus браузеры просто игнорируют его.
Примечание: Некоторые новые атрибуты формы HTML5 –булевы. Это просто означает, что они устанавливаются, если имеются, и не устанавливаются, если отсутствуют. В HTML5 их можно записать несколькими различными способами.
autofocus autofocus="" autofocus="autofocus"
autofocus autofocus = "" autofocus = "autofocus" |
Однако при написании XHTML5 вам следует применять стиль autofocus=»autofocus».
autocompleteАтрибут autocomplete помогает пользователям заполнять формы на основе предыдущего введения данных. Атрибут употребляется со времен IE5.5, но окончательно был стандартизирован как часть HTML5. По умолчанию он активен. Это значит, что в основном нам не придется его применять. Однако, если хотите настоять на введении в поле формы каждый раз после ее заполнении (в противоположность автозаполнения поля браузером), то выполните его следующим образом:
< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" > |
Состояние автозаполнения поля отменяет любое состояние autocomplete, установленное на содержащем элементе формы.
requiredАтрибут required не требует представления; как и autofocus, он делает именно то, что вы от него ожидаете. При добавлении его в поле формы браузер требует от пользователя ввести данные в это поле до отправки формы. Он заменяет базовую валидацию формы, в данное время выполняемую с помощью JavaScript’а, делая все более удобным и экономя нам еще немножко времени разработки. required – это булев атрибут, как autofocus. Давайте посмотрим его в действии.
< input type = "text" id = "given-name" name = "given-name" required > |
В настоящее время required реализован только в Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+, так что до поры до времени вам придется продолжить писать скрипты проверки заполнения полей на клиентской стороне прочих браузеров (*кхе-кхе* IE!). Opera, Chrome и Firefox показывают пользователю при отправке формы сообщение об ошибке. В большинстве браузеров ошибки затем локализуются на основе задекларированного языка. Safari не показывает сообщение об ошибке при отправке, а вместо этого помещает это поле в фокус.
Отображение по умолчанию сообщения об ошибке «required» зависит от отдельного браузера; в настоящее время «пузырю» с сообщением об ошибке во всех браузерах нельзя назначать стили CSS. У Chrome’а, тем не менее, имеется собственное свойство, которое можно применять для назначения стилей сообщению об ошибке. Также можно назначить стили вводу данных с помощью псевдокласса:required . Альтернатива состоит в отмене формулировки и стилей в JavaScript’е с помощью метода setCustomValidity(). Также очень важно не забывать, что такая браузерная валидация не заменяет валидацию серверную.
patternАтрибут pattern обычно сильно волнует многих разработчиков (ну, настолько волнует, как любой атрибут формы). Он определяет JavaScript регулярное выражение для поля, значение которого нужно проверить. Pattern облегчает нам применение отдельной проверки кодов, номеров счетов и так далее. Возможности pattern обширны, и вот всего лишь один простой пример с использованием номера продукта.
Product Number:
< label > Product Number : < input pattern = "{3}" name = "product" type = "text" title = "Single digit followed by three uppercase letters." / > < / label > |
Этот шаблон предписывает, что номер продукта должен быть одной цифрой , за которой следуют три заглавные буквы {3}. Посмотреть еще шаблоны можно на вебсайте шаблонов HTML5 , где имеется перечень обычных регулярных выражений шаблонов стиля для того, чтобы помочь вам начать с ними работать.
Как и в случае с required, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+ — единственные браузеры, поддерживающие в настоящее время шаблоны. Однако остальные скоро их нагонят по причине быстрого продвижения рынка браузеров.
Элементы list и datalistАтрибут list дает пользователю возможность ассоциировать список опций с отдельным полем. Значение атрибута списка list должно быть таким же, как ID элемента datalist, находящегося в том же документе. Элемент datalist для HTML5 является новым и представляет предопределенный список опций элементов управления формы. Он работает аналогично внутрибраузерным полям поиска, автоматически дополняющим слова при введении текста.
Следующий пример показывает, как сочетаются list и datalist.
Your favorite fruit: Blackberry Blackcurrant Blueberry If other, please specify:
< label > Your favorite fruit : < datalist id = "fruits" > < option value = "Blackberry" > Blackberry < / option > < option value = "Blackcurrant" > Blackcurrant < / option > < option value = "Blueberry" > Blueberry < / option > < ! -- …-- > < / datalist > If other , please specify : < input type = "text" name = "fruit" list = "fruits" > < / label > |
Добавив элемент select в datalist, можно обеспечить отличную деградацию, просто применив элемент option. Вот шаблон элегантной разметки, созданной Джереми Кейтом (Jeremy Keith), идеально подходящий принципам постепенной деградации HTML5.
Your favorite fruit: Blackberry Blackcurrant Blueberry If other, please specify:
< label > Your favorite fruit : < datalist id = "fruits" > < select name = "fruits" > < option value = "Blackberry" > Blackberry < / option > < option value = "Blackcurrant" > Blackcurrant < / option > < option value = "Blueberry" > Blueberry < / option > < ! -- …-- > < / select > If other , please specify : < / datalist > < input type = "text" name = "fruit" list = "fruits" > < / label > |
Браузерная поддержка list и datalist в настоящее время ограничена Opera 9.5+, Chrome 20+, Internet Explorer 10 и Firefox 4+.
На шаг вперед можно продвинуть свои list и datalist, применив булев атрибут multiple, чтобы можно было ввести из перечня данных более одного значения. Вот пример.
Your favorite fruit: Blackberry Blackcurrant Blueberry If other, please specify:
< label > Your favorite fruit : < datalist id = "fruits" > < select name = "fruits" > < option value = "Blackberry" > Blackberry < / option > < option value = "Blackcurrant" > Blackcurrant < / option > < option value = "Blueberry" > Blueberry < / option > < ! -- …-- > < / select > If other , please specify : < / datalist > < input type = "text" name = "fruit" list = "fruits" multiple > < / label > |
Однако multiple не применяется исключительно с datalist. Дальнейшим примером употребления multiple могут быть адреса электронной почты при пересылке элементов другу или вложении файлов, как показано здесь:
Upload files:
< label > Upload files : < input type = "file" multiple name = "upload" > < / label > |
multiple поддерживается в Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 и Chrome 4+.
novalidate и formnovalidateАтрибуты novalidate и formnovalidate обозначают, что при отправке формы не нужно проводить проверку правильности данных. Они оба – булевы атрибуты. formnovalidate может быть применен к input-ам с типом submit или image. Атрибут novalidate можно установить только к элементу form.
Пример использования атрибута formnovalidate может быть приведен на кнопке «сохранить черновик», где у формы есть поля, нужные для отправки черновика, но не требующиеся для сохранения черновика. novalidate будет применяться в тех случаях, когда вам не нужно делать валидацию формы, но требуется добиться преимуществ более удобного пользовательского интерфейса, предлагаемых новыми типами ввода данных.
Применение formnovalidate видно на следующем примере:
Email:
< form action = "process.php" > < label for = "email" > Email : < / label > < input type = "text" name = "email" value = "[email protected]" > < input type = "submit" formnovalidate value = "Submit" > < / form > |
А этот пример показывает применение novalidate:
Email:
< form action = "process.php" novalidate > |
Мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом
вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.
Как писать атрибуты?Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?
Значения с атрибутами записываются в таком формате:
Атрибут=”значение” lang=”en”
Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.
Абзац
Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.
Универсальные атрибутыКаждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.
- accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.
В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:
Ссылка будет открываться по нажатию сочетания клавиш с единицей
- class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
- С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true - правку разрешить, false - запретить.
- При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
- dir определяет направление текста: слева направо (ltr) или справа налево (rtl) .
- draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
- dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy ), перемещать (move ) или создать на него ссылку (link) .
- hidden - атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true - скрывается.
- id задаёт идентификатор элемента - своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_) . Русских букв содержать не может.
- lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский - ru , английский - en и т. п.).
- spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
- style позволяет задать оформление элемента с помощью CSS-кода.
- tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута - целое положительное число.
- title - всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.
- translate разрешает (yes) или запрещает (no) перевод содержимого тега.
- align
задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left
), по правому краю (right
), по центру (center)
или по ширине (justify)
. Для изображений (тег
) также доступно выравнивание по верхней границе самого высокого элемента строки (top ), по нижней границе (bottom) , а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.
Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.
Пример использования атрибутовВ качестве примера рассмотрим строку HTML-кода:
Этот текст можно редактировать
Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.
Разберём каждый элемент строки.
- открывающий тег контейнера, хранящего абзац.
- закрывающий тег.Между символами > и < расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.
contenteditable =”true ” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable =”true ”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true , написанное в кавычках через знак равно, редактирование разрешает:
Атрибут=”значение” contenteditable=”true”
На HTML5, хотя все современные браузеры уже поддерживают данный стандарт. По состоянию на декабрь 2011 года стандарт все еще находится в состоянии разработки.
В HTML5 добавляет много новых синтаксических особенностей – , , и . Эти элементы разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в вебе без необходимости обращаться к собственным плагинам и API. Другие новые элементы, такие как , , и разработаны для того, чтобы обогащать семантическое содержимое документа (страницы).
Новые теги HTML5- 1. Теги разделов (article, aside, footer, header, hgroup, nav, section)
- 2. Теги группировки контента (figure, figcaption)
- 3. Теги для семантического выделения текста (bdo, mark, time, ruby, rt, rp, wbr)
- 4. Теги для вставки контента (audio, video, canvas, embed, source)
- 5. Теги для элементов форм (datalist, keygen, output, progress, meter)
- 6. Интерактивные элементы (details, summary, command, menu)
| Определяет статью | |
| Определяет контент в стороне от основного контента страницы | |
| Определяет аудио контент | |
| Определяет графику | |
| Определяет командную кнопку | |
| Определяет данные в упорядоченный список | |
| Определяет выпадающий список | |
| Определяет шаблон данных | |
| Определяет детали элемента | |
| Определяет диалог (разговор) | |
| Определяет цель события, отправляемого по серверу | |
| Определяет группу медиа-контента, и их подписи | |
| Определяет нижний колонтитул для раздела или страницы | |
| Определяет область заголовка раздела или страницы | |
| Определяет выделенный текст | |
| Определяет измерения в течение заранее определенного диапазона | |
| Определяет навигационные ссылки | |
| Определяет вложенную точку в шаблоне данных | |
| Определяет некоторые виды результата | |
| Определяет ход выполнения задачи любого рода | |
| Определяет правила для обновления шаблонов | |
| Определяет раздел (секцию) | |
| Определяет медиа-ресурсы | |
| Определяет дату/время | |
| Определяет видео |
| Не поддерживается. Определяет акроним | |
| Не поддерживается. Определяет апплет | |
| Не поддерживается. Используетя вместо CSS для задания шрифта | |
| Не поддерживается. Определяет большой текст | |
| Не поддерживается. Определяет текст по центру | |
| Не поддерживается. Определяет список директорий | |
| Не поддерживается. Определяет фрейм | |
| Не поддерживается. Определяет набор фреймов | |
| Не поддерживается. Определяет поисковый индекс в документе | |
| Не поддерживается. Определяет секцию, не поддерживающую фрейм | |
| Не поддерживается. | |
| Не поддерживается. Определяет зачеркнутый текст | |
| Не поддерживается. Определяет телетайп текст | |
| Не поддерживается. Определяет подчеркнутый текст | |
| Не поддерживается. Определяет выровненный текст |
| contenteditable | true false |
Определяет, может ли пользователь редактировать содержимое (контент) |
| contextmenu | menu_id | Определяет контекстное меню элемента |
| draggable | true false auto |
Определяет, может ли пользователь перетащить элемент |
| irrelevant | true false |
Определяет, что элемент не имеет значения. Элемент, имеющий значение не отображается |
| ref | URL / id | Определяет ссылку на другой документ / часть документа (используется только тогда, когда значение атрибута установлено) |
| registrationmark | reg_mark | Определяет зарегистрированный знак элемента |
| template | URL / id | Определяет ссылку на другой документ / часть документа, которые должны быть применены к элементу |
При использовании обычной структуры страницы сайта можно выделить несколько типичных блоков, описываемых тегом div с соответствущим классом (, , , , и пр.).
При использовании с применением HTML5 , эти блоки описываются структурными тегами , , , , и пр., что очень упрощает жизнь разработчикам. Данные теги являются структурными эквивалентами и они делают разметку более наглядной и простой в понимании. Также, по умолчанию, они являются инлайновыми, поэтому их надо cделать блочными с помощью display:block.
Данные теги важно применять правильно. Чтобы не запутаться когда и какой применять, в сети существует замечательный ресурс , а также можно воспользоваться следующим алгоритом:
Все современные браузеры (Опера, Сафари, Хром, Мозила, ИЕ9+) уже имеют поддержку HTML5 . Для браузеров IE8 и меньше следует подключать javascript , который "научит" их понимать новые теги. Код для его подключения ниже:
В верстке макетов при мы перешли на использование нового стандарта HTML5. Если вы хотите заказать сайт или отдельно , можете оставить заявку, написав по любому из адресов, указанных на странице или через форму обратной связи. Будем рады сотрудничеству!
Давным-давно, во времена XHTML/HTML4 у разработчиков было всего несколько возможностей, которыми они могли пользоваться для того, чтобы хранить произвольные данные, относящиеся к DOM. Вы могли изобретать свои собственные атрибуты, но это было рискованно - ваш код не был бы валидным, браузеры могли игнорировать ваши данные, и это могло вызвать проблемы, если название совпадало со стандартными атрибутами HTML.
Поэтому большинство разработчиков завязывались на атрибуты class или rel так как они были единственным разумным способом хранить дополнительные строки. К примеру, предположим, что мы создаем виджет для отображения сообщений типа временной линии сообщений в Twitter. В идеале JavaScript должен иметь возможность конфигурирования без необходимости переписывать код, так что мы определяем идентификатор пользователя в атрибуте class, например:
Наш JavaScript код будет искать элемент с ID msglist . С помощью скрипта мы будем искать классы, начинающиеся с user_ , а “bob” в нашем случае будет идентификатором пользователя, и мы отобразим все сообщения этого пользователя.
Скажем, мы бы хотели также задать максимальное количество сообщений, и пропускать сообщения старше шести месяцев (180 дней):
Наш атрибут class очень быстро загромождается - проще допустить ошибку, а разбор строк на JavaScript становится все сложнее.
Data-атрибуты HTML5К счастью, в HTML5 была введена возможность использовать пользовательские атрибуты. Вы можете использовать любое имя в нижнем регистре с префиксом data- , например:
Пользовательские data-атрибуты:
- это строки - в них вы можете хранить любую информацию, которая может быть представлена или закодирована в виде строки, например JSON. Приведение типов должно осуществляться с помощью JavaScript
- должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов
- относятся только к странице. В отличие от микроформатов они должны игнорироваться внешними системами, типа поисковых систем и поисковых роботов
Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:
Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);
Это работает, но должно использоваться только для поддержания совместимости со старыми браузерами.
Пример №2 обработки на JavaScript: метод data() библиотеки jQueryНачиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс data- , так что подобный код будет работать:
Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);
Но как бы то ни было, имейте в виду, что 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 |
Наш новый код:
Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;
Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует обходной путь , но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.