Полезные техники HTML5 (часть первая)

О новом стандарте разметки страниц - HTML5 - наслышаны все, но в чем конкретно его новшество, и, самое главное, как его использовать по-назначению? В этом цикле статей будут описываться основные приемы HTML5, чтобы пролить свет на назначение новых элементов и модификацию уже имеющихся, согласно технологии HTML5.

Новый doctype

Пришло время забыть старый длинный доктайп - "-//W3C//DTD XHTML 1.0 Transitional ...". Теперь достаточно указать:


<!DOCTYPE html>

Элементы figure и figcaption

Эти теги необходимы для того, чтобы поисковые системы правильно распозновали и обрабатывали неоднородные, но логически связанные элементы - страницы, например:


<figure>
	<img src="buldog.jpg" alt="picture of dog"/>
		<figcaption>
			<p>Представители этой породы являются..</p>
		</figcaption>
</figure>

То есть, в контексте данного примера, поисковик обрабатывает изображение и подпись под ним как единый объект. Ключевым элементом поиска является контент, заключенный между тегами figcaption.

Small - новое назначение использования

Если раньше small использовался для простого уменьшения текста, теперь же его предлагается использовать для информации, указанной мелким шрифтом (информация о копирайте внизу страницы, сноски и т.п.).

Отсутствие атрибута Type для тегов script и link

Веб-разработчиков избавили от необходимости указывать text/javascript и text/css. Type канул в лету, также как и language когда-то...

Кавычки в названии аттрибутов тегов теперь необязательны

Ставить или не ставить кавычки? Ответ - как пожелаете. Работать будет как с кавычками, так и без них.

Редактируемый контент

Атрибут "contenteditable=true" позволяет делать контент сайта редактируемым, при этом редактируется как элемент, в теге которого находится этот атрибут, так и дочерние элементы:


<table contenteditable=true>
<th>
	<tr><td>Имя</td><td>Фамилия</td></tr>
</th>
	<tr><td>Иванов</td><td>Петя</td></tr>
	<tr><td>Петров</td><td>Ваня</td></tr>
</table>

Сфера применения этого нововведения достаточно обширна - различные он-лайн конструкторы, редакторы, заполнение бланков гос. образца и вывод на печать в режиме он-лайн без необходимости сохранения на носителе. Одним словом, этот атрибут в "умелых" руках может оказаться полезным как для разработчика, так и для пользователя веб-сайта.

Валидация email адреса

В HTML5 добавлено новое значение атрибутов type и name для input элемента формы - "type=email" и "name=email" (для Оперы обязательно указать name!):


<form>
	<label for="email">Укажите ваш email</label>
	<input type="email" name="email" />
	<input type="submit" value="Далее" />
</form>

Что особенно удобно - проверяется соответствие введеного email адреса шаблону, а при попытке отправить невалидный email-адрес автоматически всплывает подсказка, с просьбой все-таки указать электронный адрес.

Отдельные теги для header, footer, nav, article и section

Еще одно нововведение,призванное улучшить структуру сайтов. Но нужно отметить, что для Internet Explorer'a для корректного отображения необходимо внести следующую правку в CSS: header, nav, article, section, footer { display:block;} и подключить Javascript с адреса http://html5shim.googlecode.com/svn/trunk/html5.js, специально созданный для адаптации IE под HTML5.
Продолжение следует...



Комментировать

captcha

Сайты:



Новые отзывы о сайтах:

Авторизация

Если у Вас нет учетной записи, зарегистрируйтесь

captcha

Напомнить пароль
Создание учётной записи

captcha

Напомнить пароль

captcha

Войти в личный кабинет