Основы HTML5 или учимся верстать на HTML5

Разместил / Просмотров: 38 053 / комментариев 27

Приветствую Вас, дороги читатели блога. Сегодня мы не много узнаем о основах новой разметке веб страниц HTML5. А так же узнаем как наш уже существующий сайт перевести в этот новый HTML язык.

Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.

Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.

Верстка div (старая)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
 <head profile="http://gmpg.org/xfn/11">

<!-- ......... -->

</head>
 <body>
 <!-- Шапка сайта -->

<div id="headerInner">

<!-- Навигация -->

<div class="bottomMenu">
 <!-- ......... -->
 </div>
 <!-- Конец навигации -->

</div><!-- Конец шапки сайта -->

<div id="wrapper"><!-- основной блок -->

<div id="colLeft"><!-- блок там где отображаются посты -->

<!-- Начало поста -->
 <div class="postBox">
 <!-- ......... -->
 </div>
 <!-- Начало поста -->

<div id="colRight"> <!-- блок боковой колонки -->
 <!-- ......... -->
 </div>

</div>
 </div>

<div id="footerInner"><!-- Футер сайта -->
 <!-- ......... -->
 </div>

</body>
</html>

Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.

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

Теги HTML5

Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

<header> — данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.

<section> — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

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

<aside> — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

<footer> — в этот тег должен входить низ Вашего сайта (Футер)

<hgroup> — в данный тег входят групы заголовков сайтов, например <h2>.

<nav> — данный тег включает в себя всю навигацию на сайте (меню).

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

Вот мы и рассмотрели самые основные теги. Теперь давайте посмотрим теги, которые используются не часто или же в зависимости от тематики сайта:

<audio> — данный тег выводит аудио на сайте.

<canvas> — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

<menu> — в этот тег должны входить список меню, например ul li.

<time> — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

<video> — вставляет видео на страницу.

<wbr> — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу <br>.

Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

А вот как он выглядит по новому:

<!doctype html>

Ну как Вам разница? :-) По моему существенная. Так же ещё проще стал тег <html>. Он был такой:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">

А стал такой:

<html lang=ru>

Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.

Верстка (новая)

Перед тем как приступить к вёрстке нам между тегами <head> и </head> нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

footer, nav, header, section, aside {

display: block

}

Всё, первый шаг готов. Теперь давайте посмотри на готовый уже HTML5 код, который у меня получился, а также подробно разберём его:

<!DOCTYPE html>
<html lang="ru">
<head>

<!-- ......... -->

</head>
<body>

<!-- Шапка сайта -->

<header id="headerInner">

<!-- Навигация -->

<nav class="bottomMenu">
<!-- ......... -->
</nav>
<!-- Конец навигации -->

</header><!-- Конец шапки сайта -->

<section id="wrapper"><!-- основной блок -->

<aside id="colLeft"><!-- блок там где отображаются посты -->
<!-- Начало поста -->
<article class="postBox">
<!-- ......... -->
</article>
<!-- Начало поста -->

<aside id="colRight"> <!-- блок боковой колонки -->
<!-- ......... -->
</aside>

</div>
</section>

<footer id="footerInner"><!-- Футер сайта -->
<!-- ......... -->
</footer>

</body>
</html>

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

Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div  с классом headerInner — <div id=»headerInner»>. Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 (<header>) можем смело его использовать вместо div  только с таким же классом. Таким образом у нас получилось следующее:

<header id="headerInner">

И не забываем поставить закрывающий тег </header>, а также удалить закрывающий div.

Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом <section>. В старой вёрстке этот главный блок выглядел так <div id=»wrapper»>, а в HTML5 будет выглядеть вот так <section id=»wrapper»>. И опять же не забудьте поставить закрывающий тег и удалить старый div.

Придерживайтесь такого же принципа и в других тегах на сайте. Таким образом я перевёл свой блог в HTML5. И был приятно удивлён тем, что это совсем не сложно.

Вывод

Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.

Опять рекомендую Вам переходить Вам на новую технологию.

Вот и всё что хотелось сказать по этому поводу. Друзья, если у Вас что то не будет получаться, спрашивайте в комментариях, и я обязательно помогу :-) До скорых встреч.

  • Иришка))

    После такой статьи налицо преимущества HTML5. В нем не только поисковикам, но и нам в своих шаблонах удобнее будет ориентироваться, а то эти div-Ы :) ух.. :) да и не сложно вроде бы :)

  • Да, Ирина, ты права. Для вёрстки это на много удобнее :-)

  • Denis

    Александр!!! Вот на просторах инета я нашел что в HTML5 главное меню нужно верстать без использования списков а просто в тег nav помещаем ссылки. Ваше мнение!!!
    И еще я так понимаю в тег nav мы помешаем меню без использования списков, а вот если надо сверстать меню с использованием списков то мы оборачиваем его в новый тег menu. Я правильно понимаю?

  • Denis, да Вы правы в тег nav можно помещать только одни ссылки, но он также не запрещает использовать списки. На многих сайтах я встречал тег nav с использованием списков, и всё нормально работает. Тут скорее всего дело в удобстве, ведь списком легче сделать меню чем без списков.

  • Denis

    Александр а можете тогда привести пример использования тега menu, какие именно меню в него необходимо оборачивать (типа в сайдбаре или фотере)? Эти новые теги запутанные.

  • Denis, мне кажется нет разницы где находится это меню в верху или снизу.
    Порядок прост сначала идёт тег menu потом список ul и li и обязательно закрывающий тег menu

  • Denis

    Спасибо Александр за информацию!!! Будем пробовать верстать с новыми тегами :)

  • Denis, рад был помочь :-)

  • Ничего упрощающего работу верстальщика в html5 нет.

    Если в html4 были просто и классы для них, то теперь добавились спец теги. В чем тут простота?
    Поддерживается теги html5 еще не всеми версиями браузеров, приходится ставить костыли как в случае с IE.

  • Fagot, почему проще, потому что ориентироваться в коде легче, а дивы, как для меня, все сливаются. Ещё я думал, что на html5 будет очень трудно перейти с див вёрстки, оказалось, что очень просто. Об этом я и написал в статье.

    Спец теги запоминаются очень легко, и практически всегда эти теги одни и те же. Например, тег header, неужели такой сложный тег? или такие теги как audio или video. В отличии от див тегов, к которым каждый верстальщик присваивает разные классы, а ты потом думай, какой класс за какой отвечает. Ещё мне приходилось верстать шаблоны из html в вордпресс, скажу честно, что html5 шаблоны на много проще верстаются, в коде в 2 раза быстрее ориентируешься.

    А с IE это вечная проблема, о ней и говорить нечего. Если человек принципиально будет сидеть на ие 6, то ради него никто не будет мучаться с этим чудо браузером. Ну глупо НЕ переходить на новую html5 вёрстку, только потому что ие 6 её не поддерживает. Ну правда же?

  • ax-ID

    «всего дело в удобстве, ведь списком легче сделать меню чем без списков.» — Александр, не стоит вводить людей в заблуждение, если 100% не уверены в своих словах (или же не обознаны в конкретном вопросе). Разница есть и очень большая, а непосредственно на устройствах, которые поддерживают голосовое управление/распознавание объектов.
    К примеру нумерованный список будет прочтен как к примеру «элемент списка 1 — и дальше название» или же просто «элемент списка» (Я не буду удаваться в нюансы разного рода переводов — но мысль понятна). В то же время как навигация без использования списков будет восприниматься непосредственно целевым значением.
    Так что подумайте — есть разница или нет?

  • ax-ID

    «Если человек принципиально будет сидеть на ие 6, то ради него никто не будет мучаться с этим чудо браузером.» — Если вы ради азарта создали говно-сайт — тогда нет смысла. а когда у вас продажник и этот 1 человек принципиально не сидит на 6 осле, но он может принести выхлоп в десятки или сотни тысяч, купив 1 товар — то стоит. И как показывает практика — больша’я часть платежеспособных людей сидят на древних браузерах, потому что им достаточно и ихнего функционала для поиска нужной инфы… погоня за технологиями им не к чему.

  • Здравствуйте, ax-ID. Хорошо, скажите как правильно делать меню в HTML 5? И я не говорил что я уверен в правильности. Я просто видел, что в вёрстке используют списки, а иногда не используют. Я проверил два метода во всех браузерах и увидел, что 2 варианта работают корректно. По этому так и ответил.

  • ax-ID, Вы правы, если сайт продажник. Но так же и может быть отличный выхлоп и от пользователей современных браузеров. Правда? Например, у меня есть старое портфолио, и я на нём не обновляю дизайн так как «новые технологии дизайна» не поддерживает ие 6. Как вы думаете много у меня будет клиентов, если моё портфолио выглядит не современно?

    Так что это очень спорная тема, кому как, и для чего.

  • И можно подробнее о голосовом управлении? Нужно будет проверить.

  • ax-ID

    Я вроде бы не говорил, что не нужно стремится использовать новые технологии. Я дал ударение на то, что не стоит пренебрегать пользователями со старыми браузерами. Лучше немного помучатся с костылями и гордо заявить «Да, я ценю каждого своего посетителя и пока есть силы и возможности буду стремится удержать их у себя».

  • ax-ID

    Думаю вам известно, что в силу прогресса уже существуют девайсы способные преобразовывать текст в речь (голосовое сопроводжение отображаемого/происходящего на устройстве) и речь в текст (голосовое управление). Правильная HTML5 верстка для подобных творений должна быть вида:

    Ссыль 1

    Ссыль N

    В противном случае для управления нужно будет употреблять дополнительные фразы и, соответственно, при озвучивании содержимого страницы будут оглашаться сторонние служебные слова со смыслом что-то на подобии «элемент списка Ссыль #»

  • ax-ID

    Подправьте, пожалуйста, вывод теги … убрались в коменте.

    Отображаться в большинстве браузером оно то будет и со списками, но коль говорим непосредственно о правилах спецификации — то лучше изложить более верный вариант. Внутри можно использовать и дивы и спаны, но если можно обойтись без них — то зачем загромождать код. Подобного рода реализация равносильна тому, что на копейке на багажнике нарисовать логотип BMW и называть ее мереном — знак то есть? ;)

  • Хорошо. Ну и я же не говорил, что не ценю пользователей. А сделал ударение на то что, людям просто нужно чаще обновляться. Вот пример. Один человек, часто жалуется мне, что у него как то сайты «почти» все криво отображаются, иногда не работает видео, не воспроизводится музыка. А раз он попал на сайт с картинками (галерею), а она у него вообще не работает. Ну и как вы думаете какой у него браузер? Естественно ие 6. А обновляться не хочет, или же просто поставить другой браузер. Так почему тогда жаловаться?

    И Боже упаси, никто и никогда не пренебрегает пользователями. Просто нужно обновляться. И всё же ие6 уже умирает.

  • Всё понял :-) Я бы поправил, но у меня такие комментарии, блин, которые я наверное скоро заменю, они теги фильтруют. Всё, за голосовое управление понял, не знал я этого просто. Но всё же, значит не правильно теги юл и ли писать в html5? Или всё же можно?

  • ax-ID

    Проблема в нем лишь частично. Корректно отображаются единицы сайтом с общей массы. А всему виной чудо-школоло-прогеро-верстальщико. К примеру, единицы при верстке макета прописывают кросбраузерный border-radius. Разве так тяжело продублировать его в стилях и дописать сигнатуры кросбраузерности? НЕТ, а зачем? если заказчик ткнет пальцем — тогда поправят.
    Тут спорить можно долго, но не стоит этим засорять ваш блог. При сильном желании по свободе можем пообщаться в аське или скайпе :)

  • ax-ID

    Можно, но не желательно, если без них можно обойтись — урезаеться функционал для некоторых девайсов

  • ax-ID, честно, с Ваших комментариев много чего нового узнал :-) Особенно про голосовые функции, это нужно взять на заметку. :-)

  • Анастасия

    Александр, спасибо за статью. Однозначно согласна с вами о том, что стоит переходить на html 5. Сама с этим столкнулась и вот как. Мой блог на WordPress, тему верстала сама под себя по различным урокам. На сайте много кнопок соцсетей, лайкбоксы и т.д. Код этот сторонний с Vk и Facebook, html 5. Соответственно в коде кнопок были и теги новые и атрибуты, которые XHTML Transitional не поддерживала. Результат — кошмар, около 180 ошибок в валидаторе на главной странице. Сменила doctype на html, и осталось всего 20. Осталось только новые теги внедрить. А вот еще вопрос? Как быть с h1, h2 в плане SEO. Так до конца и не поняла, везде противоречивая информация. Где-то пишут, что при html 5 не жарко ни холодно от них, где то что нужны….

  • Я кстати тоже столкнулся с многими противоречиями по поводу этих тегов. И сделал так: главный заголовок поста закрыт в теги h1, а в постах в основном использую h2 иногда h1. Мне главное, чтобы удобно и читабельно было, а по поводу сео я не заморачиваюсь. Ну и естественно тегами злоупотреблять не нужно, всё в меру и будет всё хорошо.

  • Анастасия

    Поняла, спасибо.

  • Erasim Konovalov

    УЖАС! ИЗМЕНИТЕ НАЗВАНИЕ ВАШЕЙ СТАТЬИ!
    Не вводите людей в заблуждение. DIV-это часть HTML5!!!
    Мы имеем упрощённую разметку для оптимизации сайта.
    России Flash умер ещё в середине 2000х, так теперь и DIV/Ы похоронили.
    Как была дикая страна, так и останется! Изучайте Английский, чтобы знать, что вообще происходит в мире.

    Это полезно!