3
2013
Примеры использования HTML5: часть 1
Индустрия веб-разработки движется очень быстро! Если Вы не будете за ней следить, то очень скоро отстанете. Поэтому ознакомьтесь с изменениями\обновлениями которые нам принес HTML5, посмотрев приведенные в этой статье примеры.
1. Новый Doctype
Все еще используете ужасный и незапоминаемый XHTML Doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Зачем? Переходите на новый HTML5 Doctype. Освободите время для что-нибудь более интересного.
<!DOCTYPE html>
Знаете ли Вы, что в HTML5 вообще не обязательно указывать Doctype? Однако, ее все еще указывают для современных и старых браузеров, которые требуют определения doctype
. Браузеры, которые не понимают данный doctype будут отображать страницу в обычном режиме. Так что отбросьте сомнения и начинайте использовать новый doctype.
2. Элемент Figure
Посмотрите на следующий пример разметки для изображения:
<img src="path/to/image.png" alt="About image" /> <p>Image of Mars. </p>
К сожалению, это совсем не семантичный способ ассоциировать подпись заключенную в параграф, с отдельно стоящим изображением. HTML5 решает эту проблему с помощью элемента <figure>
. При использовании его совместно с <figcaption>
получается семантичная верстка, ассоциирующая изображение с его подписью.
<figure> <img src="path/to/image.png" alt="Чудо-Юдо" /> <figcaption> <p>На картинке нечто интересное. </p> </figcaption> </figure>
3. <small> переопределен
Недавно, я использовал <small>
для создания подзаголовков, расположенных рядом с логотипом. Это удобный презентационный элемента; однако, теперь, это было бы некорректным использованием. Элемент <small>
был переопределен, стал более правильным, теперь означает мелкий шрифт. Представьте сообщение об авторских правах в подвале сайта; согласно новому определению HTML5 для этого элемента, <small>
как раз подходит для подобной информации.
<small>
теперь означает мелкий шрифт.
4. Упразднен Type
для Script и Link
Вы можете все еще добавлять атрибут type
к тэгам link
и script
.
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>
В этом больше нет необходимости. Подразумевается, что эти тэги используются для подключения таблиц стилей и скриптов. Поэтому писать атрибут type
больше нет необходимости.
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
5. С кавычками или без
Вопрос вот в чем. HTML5 это не XHTML. Вам не обязательно заключать значения атрибутов в кавычки. Необязательно также и иметь закрывающий тэг. Вы можете так делать, это будет корректно, и будет работать — это дело вкуса. Получится как-то так:
<p class=myClass id=someId> Lorem Ipsum.
Однако, я такой подход не одобряю. Четкая структура XHTML мне нравится больше, но решать Вам.
6. Делайте контент редактируемым

Новые браузеры поддерживают новый отличный атрибут, называемый contenteditable
. Как следует из его названия, он позволяет посетителю изменять текстовое содержимое элемента, и его потомков. Этому есть множество применений, например приложение для списка дел. Кроме того, в этом случае используется локальное хранилище.
<!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>
Или как мы уже говорили выше, можно написать так:
<ul contenteditable=true>
7. Поле ввода Email.
Если мы применяем type
"email" для поля ввода, то мы объясняем браузеру, что здесь должна быть строка являющаяся email адресом. И это правильно. Встроенная валидация скоро будет везде! Но очевидным причинам это не дает 100% результата. В старых браузерах, которые не понимают "email" тип поле будет работать как обычное текстовое.
<!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>

Пока еще рано полностью полагаться на валидацию со стороны бразуера. Все нужно проверять еще раз с серверной стороны.
У каждого браузера есть свои особенности в работе с разными элементами или атрибутами, или они могут вообще их не поддерживать. Например, Опера поддерживает проверку электронной почты, даже если оно определено с помощью атрибута name
. Но в тоже время Опера не поддерживает атрибут placeholder
, о котором мы поговорим прямо сейчас. В итоге получается что на браузерную валидацию полностью полагаться еще нельзя, но уже можно начинать использовать.
8. Заполнители / Placeholders
Раньше мы для этого использовали небольшой JavaScript в полях ввода. Конечно, мы можете устанавливать атрибут value
для заполнения поля, но это потребует чтобы пользователь предварительно очистил поле перед вводом. Атрибут placeholder
решает эту проблему.
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
Опять же, поддержка этого атрибута все еще хромает в разных браузерах, но новые релизы постепенно исправляют это. Сейчас например, браузеры Firefox и Opera еще не поддерживают placeholder
и ситуация получается как на рисунке ниже.

9. Семантичные Header
и Footer
Дни подобного кода уходят:
<div id="header"> ... </div> <div id="footer"> ... </div>
Div’ы по своей природе не являются семантичной структурой, даже если в них используется "семантичный" id
. Теперь, в HTML5, мы получили доступ к элементам <header>
и <footer>
. Разметка идентичная вышеприведенной выглядит так:
<header> ... </header> <footer> ... </footer>
Можно использовать сразу несколько
header
‘ов иfooter
‘ов.
Они просто отражают то, что содержат в себе. Так например, если вы хотите разместить мета-информацию в подвале блога, то это следует делать с помощью элементами footer
. header
используется ровно наоборот.
10. Internet Explorer и HTML5
К сожалению, IE как обычно требует особого подхода для правильного отображения HTML5 элементов.
Все элементы по умолчанию имеют
display
равныйinline
.
Для того, чтобы быть уверенными что, HTML5 элементы будут отображаться корректно, как блочные элементы, необходимо вручную определить их стили:
header, footer, article, section, nav, menu, hgroup { display: block; }
Но IE и этого недостаточно, поскольку он вообще не в курсе существования таких элементов как header
. К счатью это поправимо:
document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu");
Для упрощения этого процесса, Remy Sharp написал скрипт, называемый HTML5 shiv. Этот скрипт также решает некоторые пролемы при печати.
<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
11. Атрибут Required
Формы теперь понимаю новый атрибут required
, который позволяет естественным образом указывать поля обязательные для заполнения. В зависимости от своих предпочтений вы можете указывать этот атрибут двумя способами:
<input type="text" name="someInput" required>
Или более строго:
<input type="text" name="someInput" required="required">
Оба метода будут работать. Этот код сообщает браузеру, которые его понимает, что данное поле не может быть пустым. Вот небольшой пример его использования, в котором также использует заполнитель:
<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>

Если поле будет пустым и посетитель попытается отправить форму, то пустое поле будет подсвечено.