Как стать автором
Обновить

Верстка на HTML5

Время на прочтение 3 мин
Количество просмотров 64K
html5

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

Итак, новый doctype выглядит превосходно! Можно выучить наизусть.
<!DOCTYPE html>
* This source code was highlighted with Source Code Highlighter.

В 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>

* 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.
Теги:
Хабы:
+92
Комментарии 122
Комментарии Комментарии 122

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн