От автора: несомненно, вы каждый день взаимодействуете в Сети по меньшей мере с одной формой. Занимаетесь ли вы поиском контента, или входите в свой аккаунт на странице 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 > |
Наряду с атрибутами, характерными для конкретных тегов, в 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-кода или стилей.
Атрибуты обеспечивают дополнительную информацию об элементе, при этом они всегда определяются в начальном теге независимо от того парный это тег, либо одиночный.
В HTML существует ряд атрибутов, которые универсальны и могут применяться практически к любым тегам, поэтому входящие в эту группу атрибуты называются глобальными атрибутами .
Глобальные атрибуты будут часто встречаться в примерах этого учебника, предлагаю Вам бегло повторить те атрибуты, которые мы уже рассмотрели и ознакомиться с теми глобальными атрибутами, которые будут рассмотрены в ближайших статьях:
Вопросы и задачи по темеПеред тем как перейти к изучению следующей темы пройдите практическое задание:
Подсказка: не забудьте определить язык содержимого страницы и элементов, где это требуется. После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы его выполнили правильно.
Чтобы посмотреть описание и пример использования интересующего вас глобального атрибута, нажмите на него или проскрольте страницу вниз до его описания.
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. Если вы хотите заказать сайт или отдельно , можете оставить заявку, написав по любому из адресов, указанных на странице или через форму обратной связи. Будем рады сотрудничеству!
