От автора: статья об описании HTML5, эта отрасль развивается действительно очень быстро! Если вы не будете осторожны, вас оставят за бортом. Если вы чувствуете себя немного пораженным происходящими изменениями и обновлениями HTML5, воспользуйтесь этой статьёй, как примером того, что вы должны знать.
1. Новый тип документа
Всё ещё используете надоедливый, трудно запоминаемый формат XHTML?
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Зачем? Переключитесь на новый тип документа HTML5. Вы будете жить дольше, как сказал бы Douglas Quaid.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 |
<!DOCTYPE html> |
Фактически, вы знали, что это правдиво и действительно необходимо для HTML5? Однако, это используется для текущих и старых браузеров, которые требуют указанный doctype. Браузеры, которые не понимают этот тип документа, просто отобразят содержащуюся разметку в стандартном режиме. Не бойтесь и, безо всякого беспокойства, охватывайте новый тип документа HTML5.
2. Элемент Figure
Посмотрите на следующую разметку для изображения:
|
1 2 |
<img src="path/to/image" alt="About image" /> <p>Image of Mars. </p> |
К сожалению, нет никакого простого или семантического способа связать текст, обернутый в тэг параграфа, непосредственно с элементом изображения. HTML5 исправляет эту проблему с введением элемента <figure>. При комбинировании с элементом <figcaption>, мы теперь можем семантически связать надписи с их графическими аналогами:
|
1 2 3 4 5 6 |
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure> |
3. Переопределение <small>
Недавно я использовал элемент <small>, чтобы создать подзаголовки, которые тесно связаны с логотипом. Это полезный представляемый элемент; однако, теперь это было бы неправильно его использовать. Элемент small был переопределён для большего соответствия маленьким шрифтам. Представьте указание авторского права в нижнем колонтитуле вашего сайта; согласно новому HTML5 определению этого элемента, <small> правильно обернёт эту информацию.
«Элемент small теперь переименован в "small print"»
4. Теперь без атрибутов Type для ссылок и скриптов
Вы, возможно, ещё добавляете атрибут type тегам <link> и <script>.
|
1 2 |
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script> |
Это больше не требуется. Подразумевается, что оба этих тэга обращаются к таблицам стилей и скриптам соответственно. Теперь мы можем удалить атрибуты type.
|
1 2 |
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script> |
5. В кавычках или без?
… Помните, HTML5 – это не XHTML. Вы не должны оборачивать свои атрибуты в кавычки, если не хотите. Вы можете не закрывать элементы. После всего сказанного, нет ничего неправильного в таком выполнении, если так вы чувствуете себя более комфортно. Я нахожу это истиной для себя.
|
1 |
<p class=myClass id=someId> Start the reactor. |
Решите для себя, как поступать. Если вы предпочитаете более структурный документ, во что бы то ни стало, используйте кавычки.
6. Сделайте свой контент редактируемым
У новых браузеров есть изящный атрибут под названием contenteditable, который может быть применён к элементам, и, как подразумевает название, позволяет пользователю редактировать любой текст в пределах этого элемента, включая его дочерние элементы. Есть множество использований чего-то подобного этому, включая простые приложения, использующие местную память.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html> |
Или, воспользовавшись предыдущим советом, мы могли бы написать это так:
|
1 |
<ul contenteditable=true> |
7. Email Inputs
Если мы применяем тип "email" для элемента формы, мы можем проинструктировать браузер принимать только строки, которые соответствуют правильной структуре адреса email. Правильно, встроенная проверка правильности формы скоро будет здесь! Всё же мы не можем на 100% полагаться на это, по очевидным причинам. В старых браузерах, которые не понимают тип "email", это просто снизит скорость передачи данных для textbox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form> </body> </html> |
«В настоящее время мы не можем полагаться на проверку правильности браузера. Должно быть осуществлено решение со стороны сервера/клиента»
Следует также отметить, что со всеми текущими браузерами возникают проблемы, когда дело доходит до того, какие элементы и атрибуты они поддерживают, а какие – нет. Например, Opera, кажется, поддерживает проверку правильности email, также как и атрибут name. Однако, она не поддерживает атрибут placeholder, который мы будем изучать в следующем совете.
8. Placeholders
Прежде мы должны были использовать немного JavaScript, чтобы создать указатели заполнения для текстовых полей (это – своего рода подсказки, отображаемые внутри текстовых полей). Несомненно, вы можете первоначально установить атрибут value, как вы считаете нужным, но как только пользователь удалит этот текст и кликнет вне поля, поле ввода вновь останется пустым. Атрибут placeholder исправляет это.
|
1 |
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" /> |
Опять же, поддержка является теневой в лучшем случае через браузеры, однако, это продолжит улучшаться с каждым новым выпуском. Кроме того, если браузер, как Firefox и Opera, не поддерживает атрибут placeholder, это не принесет никакого вреда.
9. Семантические Header и Footer
|
1 2 3 4 5 6 7 |
<div id="header"> ... </div> <div id="footer"> ... </div> |
У div’ов по своей природе нет никакой семантической структуры, даже после применения id. Теперь, с HTML5, у нас есть доступ к элементам <header> и <footer>. Разметка выше может быть заменена на следующую:
|
1 2 3 4 5 6 7 |
<header> ... </header> <footer> ... </footer> |
«Полностью уместно иметь множество headers и footers в ваших проектах»
Попытайтесь не перепутать эти элементы с "заголовком" и "нижним колонтитулом" вашего веб-сайта. Они просто обращаются к их контейнеру. Также имеет смысл помещать, например, мета информацию внизу поста блога в пределах элемента <footer>. То же самое сохраняется для <header>.
10. Internet Explorer и HTML5
К сожалению, Internet Explorer требует небольших пререканий, чтобы «понять» новые элементы HTML5.
«У всех элементов по умолчанию есть display inline»
Чтобы гарантировать, что новые элементы HTML5 будут отображаться правильно как элементы уровня блоков, необходимо назначить им стиль:
|
1 2 3 |
header, footer, article, section, nav, menu, hgroup { display: block; } |
К сожалению, Internet Explorer всё ещё проигнорирует эти стили, потому что он не может определить такие элементы, как, например, <header>. К счастью, есть простое решение:
|
1 2 3 4 5 6 |
document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu"); |
Немного странно, этот код, кажется, вызывает Internet Explorer. Чтобы упростить этот процесс для каждого нового приложения, Remy Sharp создал скрипт, обычно именуемый «HTML5 shim». Этот скрипт также устраняет некоторые проблемы печати.
|
1 2 3 |
<!--[if IE]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
11. hgroup
Представьте, что в заголовке моего сайта у меня было название сайта, и сразу за ним следовал подзаголовок. В то время как мы могли использовать теги <h1> и <h2> соответственно, чтобы создать разметку, в HTML4 всё еще не было простого способа семантически проиллюстрировать отношения между двумя элементами. К тому же, тег <h2> вызывает больше проблем в терминах иерархии, когда дело доходит до отображения других заголовков на странице. С использованием элемента hgroup, мы можем сгруппировать эти заголовки вместе, не затрагивая иерархии документа.
|
1 2 3 4 5 6 |
<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header> |
12. Атрибут Required
Формы учитывают новый атрибут required, который определяет, обязательно ли заполнение данного поля. В зависимости от ваших предпочтений, вы можете назначить этот атрибут двумя способами:
|
1 |
<input type="text" name="someInput" required> |
Или более структурно:
|
1 |
<input type="text" name="someInput" required="required"> |
Любой метод работает. С этим кодом, и в браузере, который поддерживает эту технологию, форма не может быть подтверждена, если поле "someInput" пусто. Вот быстрый пример; мы также добавим атрибут placeholder, поскольку нет никаких причин не делать этого.
|
1 2 3 4 5 |
<form method="post" action=""> <label for="someInput"> Your Name: </label> <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> <button type="submit">Go</button> </form> |
Если поле оставят пустым и будет нажата кнопка подтверждения формы, текстовое поле будет подсвечено.
13. Атрибут Autofocus
Снова HTML5 отбрасывает потребность в решениях JavaScript. Если определённое поле должно быть "выбрано" или сфокусировано, по умолчанию мы теперь можем использовать атрибут autofocus.
|
1 |
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> |
Интересно, что в то время как я лично более склонен к подходу XHTML (использование кавычек и т.д.), устанавливая "autofocus=autofocus", я чувствую себя странно. Также, мы будем придерживаться этого подхода, когда ключевое слово имеет только один вариант.
14. Поддержка аудио
Больше мы не должны полагаться на плагины от сторонних производителей для того чтобы отобразить аудио. HTML5 теперь предлагает элемент <audio>. Хорошо, по крайней мере, в конечном счёте мы не будем волноваться об этих плагинах. В настоящее время только новые браузеры предоставляют поддержку HTML5 аудио. Сейчас, это – всё ещё хорошая практика, чтобы предложить некоторую форму обратной совместимости.
|
1 2 3 4 5 |
<audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a href="file.mp3">Download this file.</a> </audio> |
Mozilla и Webkit ещё не полностью сходятся, когда дело доходит до звукового формата. Firefox захочет увидеть .ogg файл, в то время как браузеры Webkit будут работать только с .mp3. Это означает, что, по крайней мере, пока вы должны создавать две версии файла.
Когда Safari загрузит страницу, он не распознает формат .ogg и, соответственно перейдёт к версии mp3. Пожалуйста, помните, что IE, обычно, не поддерживает это, а Opera 10 и ниже работает только с файлами .wav.
15. Поддержка видео
Кроме элемента <audio>, у нас, естественно, есть и HTML5 видео в новых браузерах! Фактически, только недавно, YouTube анонсировал новое внедрение видео в HTML5 для своего видео и для браузеров, поддерживающих это. К сожалению, опять же, потому что спецификация HTML5 не определяет специальный кодек для видео, это оставляют браузерам. В то время, как Safari и Internet Explorer 9 поддерживают видео в формате H.264 (который обычно могут проигрывать Flash плееры), Firefox и Opera придерживаются открытых форматов Theora и Vorbis. Так, отображая HTML5 видео, вы должны предложить оба формата.
|
1 2 3 4 5 |
<video> <source src="cohagenPhoneCall.ogg" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> </video> |
«Chrome может корректно отображать видео как в формате "ogg", так и "mp4"»
Здесь есть несколько ценных замечаний:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее1. Мы технически не обязаны устанавливать атрибут type; однако, если мы не делаем это, браузер должен выяснить тип непосредственно. Лучше, установите его сами.
2. Не все браузеры понимают HTML5 видео. Ниже исходного элемента мы можем дать ссылку на загрузку файла или внедрить Flash-версию видео. Решать вам.
3. Атрибуты controls и preload будут обсуждаться в следующих двух советах.
16. Атрибут Preload
Атрибут preload делает именно то, что вы предположили. Хотя, вы должны сначала решить, хотите ли вы, чтобы браузер делал предварительную загрузку видео. Действительно ли это необходимо? Возможно, если посетитель обращается к странице, которая сделана специально для отображения видео, вы определённо должны сделать предварительную загрузку и немного сократить время ожидания для посетителя. Видео может быть предварительно загружено при помощи preload="preload", или просто добавлением preload. Я предпочитаю последнее, этого вполне достаточно.
|
1 |
<video preload> |
17. Атрибут Controls
Если вы работаете с каждым из этих советов, вы, наверное, заметили, что с кодом выше, видео выглядит как обычное изображение, без каких-либо элементов управления. Чтобы отобразить эти элементы, мы должны определить атрибут controls внутри элемента video.
|
1 |
<video preload controls> |
Заметьте, что каждый браузер отображает свой проигрыватель по-своему.
18. Регулярные выражения
Как часто вы пишете какие-то беглые регулярные выражения для проверки определённого текстового поля? Благодаря новому атрибуту pattern, мы можем вставлять регулярные выражения прямо в нашу разметку.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form action="" method="post"> <label for="username">Create a Username: </label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required> <button type="submit">Go </button> </form> |
Если вы знакомы с регулярными выражениями, вы знаете, что этот шаблон: [A-Za-z]{4,10} вводит только заглавные и строчные буквы. Также эта строка должна содержать не менее 4 и не более 10 символов.
Обратите внимание, что мы начинаем комбинировать все эти новые удивительные атрибуты!
19. Определение поддержки атрибутов
Как хороши эти атрибуты, если вы не можете определить, распознаёт ли их браузер? Есть несколько способов понять это. Мы обсудим два. Первый способ использует превосходную библиотеку Modernizr. Кроме этого, мы можем создать и проанализировать эти элементы, чтобы определить, на что способны браузеры. Например, в нашем предыдущем примере, если мы хотим узнать, может ли браузер осуществить атрибут pattern, мы должны добавить немного JavaScript на нашу страницу:
|
1 |
alert( 'pattern' in document.createElement('input') ) // boolean; |
Фактически, это популярный метод определения совместимости браузеров. Библиотека jQuery использует эту уловку. Выше, мы создаем новый элемент input и определяем, распознан ли браузером атрибут pattern. Если так, браузер поддерживает эти функции. В противном случае – нет.
|
1 2 3 4 5 |
<script> if (!'pattern' in document.createElement('input') ) { // do client/server side validation } </script> |
Имейте в виду, что это реализовано на JavaScript.
20. Элемент <mark>
Думайте об элементе <mark> как о выделителе. Строка, обёрнутая в этот тег, должна относиться к текущим действиям пользователя. Например, если бы я искал "Откройте свой разум" на каком-то блоге, я мог бы использовать JavaScript, чтобы обернуть каждое слово этой строки в тег .
|
1 2 |
<h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p> |
21. Когда использовать <div>
Некоторые из нас первоначально задались вопросом, когда мы должны использовать div. Теперь, когда мы имеем доступ к header, article, section, и footer, есть ли у нас время использовать …div? Абсолютно.
«Div’ы должны использоваться, когда нет лучших элементов для работы»
Например, если вы находите, что вам нужно обернуть блок кода в элемент, чтобы позиционировать контент, <div> имеет совершенный смысл. Однако, если вы вместо этого оборачиваете новый пост блога, или, возможно, список ссылок в нижнем колонтитуле, лучше использовать элементы <article> и <nav> соответственно. Они более семантичны.
22. Что не является HTML5
Людям можно простить то, что они предположили, что удивительные переходы JavaScript сгруппированы во всеобъемлющий HTML5. Даже Apple по неосторожности продвинул эту идею. Для не разработчиков это простой способ обратиться к новым сетевым стандартам. Однако, для нас, хотя это может быть просто семантикой, важно понять, что не является HTML5.
1. SVG: Не HTML5. Этому, по крайней мере, пять лет.
2. CSS3: Это не HTML5. Это CSS.
3. Geolocation: Не HTML5.
4. Client Storage: Не HTML5. Это было однажды реализовано, но было удалено из спецификаций, вследствие того, что многие волновались, что это, в целом, становилось слишком сложным. У этого теперь есть своя собственная спецификация.
5. Web Sockets: Не HTML5. Опять же, было экспортировано в собственную спецификацию.
Независимо от того, сколько различий вам требуется, все эти технологии могут быть сгруппированы в современный стек сети. Фактически, многими из этих разветвленных спецификаций все еще управляют те же самые люди.
23. Атрибут Data
У нас теперь официально есть поддержка custom attribute в пределах всех элементов HTML. В то время, как прежде мы могли осуществить это как:
|
1 |
<h1 id=someId customAttribute=value> Thank you, Tony. </h1> |
…валидатор поднял бы суету! Но теперь, если мы снабжаем наш атрибут предисловием “data,” мы можем официально использовать этот метод. Если вы когда-либо прикрепляли важные данные к чему-то вроде атрибута class, вероятно для использования JavaScript, это будет большой помощью!
HTML код
|
1 |
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div> |
Исправьте значение заказного атрибута
|
1 2 3 |
var theDiv = document.getElementById('myDiv'); var attr = theDiv.getAttribute('data-custom-attr'); alert(attr); // My Val |
Это также может быть использовано в вашем CSS, подобно этому глупому тексту, исправляющему примеру.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sort of Lame CSS Text Changing</title> <style> h1 { position: relative; } h1:hover { color: transparent; } h1:hover:after { content: attr(data-hover-response); color: black; position: absolute; left: 0; } </style> </head> <body> <h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1> </body> </html> |
Вы можете просмотреть демо этого примера на JSBIN.
24. Элемент Output
Как вы, вероятно, предположили, элемент output используется для отображения своего рода вычислений. Например, если вы хотите отобразить координаты позиции курсора или сумму чисел, эта информация должна быть помещена в элемент output.
Как простой пример, давайте, используя JavaScript, вставим сумму двух чисел в пустой output, когда будет нажата кнопка подтверждения форы (submit).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<form action="" method="get"> <p> 10 + 5 = <output name="sum"></output> </p> <button type="submit"> Calculate </button> </form> <script> (function() { var f = document.forms[0]; if ( typeof f['sum'] !== 'undefined' ) { f.addEventListener('submit', function(e) { f['sum'].value = 15; e.preventDefault(); }, false); } else { alert('Your browser is not ready yet.'); } })(); </script> |
Испытайте это непосредственно.
Пожалуйста, отметьте, что поддержка этой технологии, всё ещё работает плохо. На момент написания этой статьи, я был в состоянии заставить это работать только в Opera, что и отражено в коде выше. Если браузер не распознаёт этот элемент, он просто выведет сообщение об ошибке. В противном случае, он выведет значение под именем "sum", и установит его равным 15, соответственно, после того, как форма подтверждена.
Этот элемент может также получить атрибут for, который отражает название элемента, с которым связан output, подобно тому, как работает label.
25. Создание бегунков с Range Input
HTML5 вводит новый тип input – range.
|
1 |
<input type="range"> |
Особенно, это получает атрибуты min, max, step и value среди других. Хотя, кажется, только Opera поддерживает этот элемент полностью прямо сейчас, это будет фантастически, когда мы сможем полностью использовать эти функции!
Для быстрой демонстрации, давайте сделаем датчик, который позволит пользователям решить насколько удивителен "Total Recall". Мы не будем встраивать реальное решение для последовательного опроса, но мы сделаем обзор того, как это могло быть сделано весьма легко.
Шаг 1: Разметка
В первую очередь мы сделаем разметку.
|
1 2 3 4 5 |
<form method="post"> <h1> Total Recall Awesomness Gauge </h1> <input type="range" name="range" min="0" max="10" step="1" value=""> <output name="result"> </output> </form> |
Обратите внимание, что в дополнение к настройке min и max, мы всегда можем определить, какой шаг будет для каждого перехода. Если step установлен как 1, будет 10 значений для выбора. Мы также используем в своих интересах новый элемент output из предыдущего совета.
Шаг 2: CSS
Затем мы добавим немного стилей. Мы также используем :before и :after, чтобы сообщить пользователю, каковы наши минимальное и максимальное значения.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body { font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif; text-align: center; } input { font-size: 14px; font-weight: bold; } input[type=range]:before { content: attr(min); padding-right: 5px; } input[type=range]:after { content: attr(max); padding-left: 5px;} output { display: block; font-size: 5.5em; font-weight: bold; } |
Выше мы создаём контент до и после range input, и делаем значения равными минимуму и максимуму соответственно.
Шаг 3: JavaScript
Наконец, мы:
Определяем, знает ли текущий браузер, что такое «range input». Если нет, мы сообщаем пользователю, что демонстрация не будет работать.
Динамически обновляем элемент output, поскольку пользователь перемещает бегунок.
Следим, когда пользователь уводит курсор от бегунка, захватываем текущее значение и сохраняем его в местной памяти.
Тогда, в следующий раз, когда пользователь обновит страницу, «range» и «output» автоматически будут установлены так, как они были выбраны в последний раз.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
(function() { var f = document.forms[0], range = f['range'], result = f['result'], cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; // Determine if browser is one of the cool kids that // recognizes the range input. var o = document.createElement('input'); o.type = 'range'; if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.'); // Set initial values of the input and ouput elements to // either what's stored locally, or the number 5. range.value = cachedRangeValue; result.value = cachedRangeValue; // When the user makes a selection, update local storage. range.addEventListener("mouseup", function() { alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser."); localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead."); }, false); // Display chosen value when sliding. range.addEventListener("change", function() { result.value = range.value; }, false); })(); |
Готовы к реальному миру? Вероятно, ещё нет; но это всё ещё развлечения и подготовка!
Скачайте исходный код, и используйте его непосредственно для себя. Но используйте Opera.
Заключение учебника об описании HTML5, для начинающих
Спасибо за чтение статьи об описании HTML5! Мы охватили многое, но это лишь малая часть всех возможностей HTML5. Я надеюсь, что эта статья послужила хорошим уроком для начинающих!
Автор: Jeffrey Way
Источник: //net.tutsplus.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Комментарии (22)