Как верстать в HTML5

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

Новый DOCTYPE

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

<!DOCTYPE html>

Теперь веб-разработчикам не нужно копировать и вставлять сложную для запоминания длинную строчку. Обратите внимание, что мы даже не указываем номер версии.

Кодировка

Далее определим кодировку страницы. Лучше всего использовать UTF-8. И опять нас ждет приятный сюрприз.

<meta charset=utf-8>

Обратите внимание, какая короткая и понятная строка. Тег стал короче (раньше было типа <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">). Вы можете использовать и старый вариант, но, согласитесь, что новый вариант удобнее и его проще запомнить.

При этом можно не использовать кавычки для атрибута, а также закрывающий тег />. Но вы можете использовать и другие варианты, все они будут считаться правильными.

<META CHARSET=UTF-8>
<META CHARSET=UTF-8 />
<META CHARSET="UTF-8">
<META CHARSET="UTF-8" />
<meta charset=utf-8>
<meta charset=utf-8 />
<meta charset="utf-8" />
<MeTa CHarSet=utF-8>

Надеюсь, вы не будете извращаться и выберете самый короткий и удобный вариант.

HTML, HEAD и BODY

Вы еще больше удивитесь, когда узнаете, что можно не указывать теги <html>, <head>, <body>. При этом страница пройдет валидацию. Дело в том, что браузеры в любом случае считают, что они есть. Надо сказать, что этот способ работал и раньше, но теперь он узаконен. Но все-же лучше не выёживаться, и использовать данные теги, как и раньше, чтобы избежать неожиданных проблем.

Новые теги

В HTML5 появились новые теги (около 30). Я приведу только часть из них. Более подробно о новых тегам можно будет узнать в моем справочнике HTML в примерах.

<section>: Группирует тематические блоки. section могут быть вложены друг в друга
<header>: Содержит в себе заголовок какой либо секции
<footer>: Как правило, в нижней части страницы размещают контактную информацию об авторе
<nav>: Определяет область навигации, обычно список ссылок (вертикальный или горизонтальный)
<article>: Основное содержание страницы
<aside>: Врезка — небольшая заметка или картинка. Обычно находится в стороне от основного текста. Возможно будет использоваться также в качестве меню

На данный момент только Internet Explorer не поддерживает эти элементы по умолчанию. Для решения этой проблемы можно воспользоваться несложным сценарием JavaScript.

<br /> <script type="text/javascript"> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script><br />

Использование новых элементов HTML5

Браузеры при обработке страниц используют встроенную таблицу стилей, где определены блочные элементы. Но новые элементы HTML5 еще не вписаны в данную таблицу. По умолчанию, новые элементы являются строковыми (display:inline), поэтому нужно предварительно подготовиться и указать, что элементы являются блочными (display:block), а также для некоторых элементов указать плавающи тип (float):

header, nav, article, footer
{
    display: block;
}
nav
{
    float:left;
	width:20%;
}
article
{
    float:right;
	width:79%;
}
footer
{
    clear:both;
}

Когда в браузеры будут внедрены нужные правила для новых элементов, то наш код не будет мешать им, а послужат резервным вариантом для старых браузеров.

Для старых версий IE нужно использовать JavaScript. Для оптимизации скорости загрузки страницы код можно заключить в условные комментарии. Пример можно увидеть ниже. К счастью, разработчики IE усиленно работают над новыми версиями своего браузера, которые уже нормально работают с новыми тегами.

Теперь давайте рассмотрим стандартную схему страницы сайта.

Для этой схемы используется приблизительно такой код

В реализации на html5 это выглядит примерно так:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Пример для HTML5</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 type="text/css">
Здесь прописываем стили
</style>
</head>
<body>

<header>
Основной заголовок страницы
</header>
<nav>
Блок навигации
</nav>

<section>
<article>
<header>
Заголовок статьи
</header>
Сама статья или заметка в блоге
</article>
<article>
<header>
Заголовок второй статьи
</header>
Вторая статья
</article>
</section>
<aside>
Врезка
</aside>
<footer>
Подвал страницы. Авторское право, контакты
</footer>
</body>
</html>

Вы можете посмотреть рабочий пример для этой схемы