Часть 1. Переходим на HTML5. Введение.

HTML 4 предлагает нам использовать для разметки контента обобщенные структуры. К примеру, <div> — это обобщенный блок, который сообщает браузеру что-то вроде «вот тут есть что-то, и оно рассматривается как нечто целое», однако этот элемент не имеет значения; никакой семантики, выходящей за рамки выражения «оно рассматривается как нечто целое», здесь нет. Там, где это возможно, мы заменим обобщенные блоки новыми HTML5-элементами; если в каком-то случае мы не найдем подходящего нового элемента, будем использовать <div> так, как мы делали это в HTML 4.

В HTML5 добавлены 28 элементов с новой семантикой, которые можно использовать при создании традиционных «статических» веб-страниц.

Но прежде чем перейти к описанию особенностей верстки на HTML5, рассмотрим предварительные данные html-страницы.

<head>

Упрощение написания типа документа.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Документ без названия</title>
<script></script>
</head>
<body></body>
</html>

Упрощение написания кодировки. Но старый вариант остается допустимым:

1
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

Элемент <script> не требует объявления типа скрипта, js выбирается по умолчанию.

Распознавание новых структурных элементов

HTML5 и CSS

В некоторых браузерах (даже современных) новые структурные элементы (такие как <header>, <nav>, <footer> и проч.) рассматриваются как неизвестные и никак особо не обрабатываются. По умолчанию все эти элементы являются строковыми (display: inline), поэтому для них способ отображения должен быть задан вручную:

1
header, nav, footer, article { display: block; }

HTML5 и Internet Explorer

В IE8 и во всех более старых версиях новые элементы не будут оформлены стилями CSS. Обмануть IE в этом случае можно с помощью JS:

1
2
3
4
5
6
7
8
<!—[if lt IE 9]>
<script>
document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘article’);
document.createElement(‘footer’);
</script>
<![endif]—>

Реми Шарп уже давно написал скрипт для решения данной проблемы, поэтому альтернативным решением может служить его подключение:

1
2
3
<!—[if lt IE 9]>
<script src=»http://html5shim.googlecode.com/svn/trunk/html5.js»></script>
<![endif]—>