Значение атрибутов тега заключается в. Введение в формы HTML5 и новые атрибуты. Пример использования атрибутов
Мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом
вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.
Как писать атрибуты?Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ 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”
От автора: несомненно, вы каждый день взаимодействуете в Сети по меньшей мере с одной формой. Занимаетесь ли вы поиском контента, или входите в свой аккаунт на странице 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 > |
Чтобы посмотреть описание и пример использования интересующего вас глобального атрибута, нажмите на него или проскрольте страницу вниз до его описания.
accesskeyАтрибут accesskey используется браузерами в качестве руководства для создания сочетания клавиш, активирующее элемент или переводящее на него фокус.
Примечание: до HTML5 атрибут accesskey можно было использовать только со следующими тегами: , , , , , и . С пятой версии HTML данный атрибут можно использовать с любым валидным HTML тегом.
Значением атрибута accesskey должен быть символ, который можно ввести нажатием одной клавиши. Пробельные символы в качестве значения атрибута не допустимы.
Сочетания клавиш для атрибута accesskey зависит от используемого браузера:
Использование атрибута accesskey для разных элементов с одним и тем же значением приводит к игнорированию атрибута.
classАтрибут class используется для последующего получения доступа к элементам (через имя класса) в CSS и JavaScript .
В атрибуте class в качестве значения можно указать не один, а несколько классов, в этом случае имена классов должны быть разделены пробелами, порядок следования имён классов не имеет значения:
Если в блоках объявлений разных классов используются одинаковые CSS свойства с разными значениями, то для свойства будет применено то значение, которое в CSS коде определено ниже остальных. Поэтому порядок следования имён классов в значение атрибута значения не имеет, так как в этом случае срабатывает механизм каскадности .
contenteditableАтрибут contenteditable указывает, может ли пользователь редактировать содержимое данного элемента. Атрибут может принимать одно из следующих значений:
- true или пустая строка ("") - содержимое элемента можно редактировать
- false - редактирование содержимого запрещено
Атрибут draggable определяет, может ли пользователь перетаскивать элемент с помощью drag-and-drop API. Атрибут может принимать одно из трёх значений:
- true - указывает, что элемент можно перетаскивать
- false - указывает, что элемент не перетаскивается
- auto - указывает, что перетаскивание элемента будет зависеть от значения, установленного в браузере по умолчанию.
С помощью атрибута id можно создавать ссылки на конкретный элемент, а не только на страницу в целом. Такие ссылки могут вести либо на раздел данной страницы, либо на раздел другой страницы. Чтобы создать ссылку на элемент, надо добавить к небу атрибут id . Сама ссылка, в этом случае, должна будет содержать имя идентификатора элемента, на который она ссылается, перед которым обязательно ставится символ # . Если ссылка ведет на раздел текущей страницы, то в качестве адреса можно указать только имя идентификатора, если ссылка ведёт на раздел другой страницы, то имя идентификатора указывается в самом конце адреса:
langАтрибут lang позволяет указать, какой язык используется для текста внутри элемента. В качестве значения атрибута используются коды языков :
Текст на английском: "Hello world!".
Использование данного атрибута помогает браузерам правильно отображать некоторые национальные символы, речевым программам определить язык текста, выполнять проверку текста программам для проверки орфографии и грамматики.
Атрибут lang также может использоваться для улучшения качества в поисковой выдаче результатов поиска, которые основаны на лингвистических предпочтениях пользователя.
spellcheckАтрибут spellcheck указывает, разрешается ли проверять содержимое элемента на наличие орфографических ошибок. Атрибут может принимать одно из следующих значений:
- true - указывает, что содержимое элемента должно быть, по возможности, проверено на наличие орфографических ошибок.
- false - указывает, что элемент не должен проверяться на наличие орфографических ошибок.
Атрибут spellcheck является перечисляемым . Это значит, что требуется явное указание значения атрибута. Добавление атрибута без значения запрещено:
Атрибут spellcheck определяет лишь рекомендацию для браузера: браузеры не должны иметь возможность проверки на орфографические ошибки. Обычно не редактируемые элементы не проверяются на наличие ошибок, даже если для атрибута установлено значение true , а браузер поддерживает проверку.
styleАтрибут style используется для добавления CSS стилей к элементу. Стили, добавленные с помощью атрибута style , имеют приоритет над стилями, расположенными в элементе или во внешнем файле.
При добавлении стилей в значение атрибута, селектор и фигурные скобки не используются. Каждое объявление должно заканчиваться точкой с запятой, после которой можно писать следующее объявление. Между свойствами и их значениями, так же как и между объявлениями, пробелы ставятся по желанию:
Жирный красный текст
tabindexАтрибут tabindex указывает может ли элемент быть в фокусе и порядок приоритета при переходе фокуса между элементами (при использовании клавиши " tab "). В качестве значения атрибут принимает целое число:
Число 5 означает, что элемент получит фокус после элемента с tabindex="4" и до элемента с tabindex="6" . Но давать последовательные значения не обязательно, в любом случае элементы, имеющие меньшее значение, получат фокус до элементов, имеющих большее значение. Если несколько элементов имеют одинаковые положительные значения, то порядок получения фокуса будет зависеть от порядка их следования в исходном коде документа.
titleАтрибут title используется для указания дополнительной информации о содержимом элемента (отображается браузерами в виде всплывающей текстовой подсказки при наведении курсора мыши на элемент).
Атрибут title часто используется с картинками, для добавления описания картинки:
Примечание: внешний вид и размер всплывающей подсказки, шрифт и цвет текста, зависят от браузера и не могут быть изменены с помощью CSS стилей.
На 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. Если вы хотите заказать сайт или отдельно , можете оставить заявку, написав по любому из адресов, указанных на странице или через форму обратной связи. Будем рады сотрудничеству!
