Несмотря на то, что стандарт HTML5 официально не утвержден, использовать его можно уже сейчас. Большинство браузеров уже понимают новые структурные элементы и для его использования достаточно добавить новый
doctype.Итак, новый
doctype выглядит превосходно! Можно выучить наизусть. <!DOCTYPE html>
* This source code was highlighted with Source Code Highlighter.В HTML5 введены некоторые структурные элементы, о которых многие наверное слышали, но все же кратко:
<section>
Элемент группирует тематические блоки.section могут быть вложены друг в друга.<header>
Содержит в себе заголовок какой либо секции, таблицы и т.д.<footer>
Обычно включает в себя копирайт или контактную информацию.<nav>
Определяет область навигации, обычно список ссылок.<article>
Отдельная запись в блоге или статья на сайте.<aside>
Вторичный контент, обычно находится в стороне от основного.В последних версиях всех современных браузеров, кроме, всеми любимого, Internet Explorer эти элементы поддерживаются по умолчанию. Но при помощи
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
* This source code was highlighted with Source Code Highlighter.Тот же код можно загрузить с google:
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
* This source code was highlighted with Source Code Highlighter.По умолчанию, во всех браузерах новые элементы будут инлайновыми, поэтому еще нужно добавить такой CSS:
header,
nav,
section,
article,
aside,
footer {
display: block
}
* This source code was highlighted with Source Code Highlighter.Подготовка закончена, приступим:
Сделаем классическую схему для блога:
В реализации на html5 это выглядит примерно так:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Simple HTML5 blog</title>
<!--[if IE]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
<style>
styles
</style>
</head>
<body>
<header>
blog header
</header>
<nav>
navigation
</nav>
<section>
<article>
<header>
Article header
</header>
Article
</article>
<article>
<header>
Article header
</header>
Article
</article>
</section>
<aside>
sidebar content
</aside>
<footer>
copyright
</footer>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.Рабочий пример
P.S.: С валидацией все ок!
Стандартный валидатор уже понимает html5.
