Верстка HTML5

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

Новый doctype выглядит просто и элегантно что обеспечивает легкое запоминание:

<!DOCTYPE html>

Структурные элементы HTML5:

В HTML5 введены некоторые структурные элементы, о которых многие наверное слышали, но все же кратко:

<section>

Элемент группирует тематические блоки. Section могут быть вложены друг в друга.

<header>

Содержит в себе заголовок какой либо секции, таблицы и т.д.

<footer>

Обычно включает в себя копирайт или контактную информацию.

<nav>

Определяет область навигации, обычно список ссылок.

<article>

Отдельная запись в блоге или статья на сайте.

<aside>

Вторичный контент, обычно находится в стороне от основного.
В последних версиях всех современных браузеров, кроме, всеми любимого, Internet Explorer эти элементы поддерживаются по умолчанию. Но при помощи волшебного пендаля небольшого javascript и он начинает понимать.

<script>

document.createElement(‘header’);

document.createElement(‘nav’);

document.createElement(‘section’);

document.createElement(‘article’);

document.createElement(‘aside’);

document.createElement(‘footer’);

</script>

Тот же код можно загрузить с google:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

По умолчанию, во всех браузерах новые элементы будут инлайновыми, поэтому еще нужно добавить такой CSS:

header,

nav,

section,

article,

aside,

footer {

display: block

}

Подготовка закончена, приступим:

Сделаем классическую схему для блога:

blog-scheme.png

В реализации на 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>