Фев
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>

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

Метки: css, CSS3, html, HTML5, Nettuts+, советы Источник

Примеры использования HTML5: часть 1

1. Новый Doctype

2. Элемент Figure

3. <small> переопределен

4. Упразднен `Type` для Script и Link

5. С кавычками или без

6. Делайте контент редактируемым

7. Поле ввода Email.

8. Заполнители / Placeholders

9. Семантичные `Header` и `Footer`

10. Internet Explorer и HTML5

11. Атрибут Required

Похожие записи

Немного об авторе: Сергей Белянин

1. Новый Doctype

2. Элемент Figure

3. <small> переопределен

4. Упразднен Type для Script и Link

5. С кавычками или без

6. Делайте контент редактируемым

7. Поле ввода Email.

8. Заполнители / Placeholders

9. Семантичные Header и Footer

10. Internet Explorer и HTML5

11. Атрибут Required

Похожие записи

Немного об авторе: Сергей Белянин

4. Упразднен `Type` для Script и Link

9. Семантичные `Header` и `Footer`