Время наступило и мы начинаем новую рубрику на CodeMake про HTML5. Будем рассматривать все аспекты нового стандарта и следить за его развитием. Мы пройдемся по всем нововведениям и покажем как их использовать. Для начала узнаем о стандарте, а потом сверстаем страницу.

Коротко о HTML5

В 1998 году команда W3C решила заморозить развитие HTML на версии 4.01, т.к. считали что будущее за XML. Была выпущена спецификация XHTML в двух вариациях: XHTML Transitional чтобы помочь перейти разработчикам на XHTML и XHTML Strict, так называемый - золотой стандарт. Позже, они начали разрабатывать XHTML 2.0, но...

Компания Opera была не согласна с тем, что будущее веба это XML. Они работали над экспериментальной спецификацией Web Forms 2.0, это расширения HTML форм. Позже к ним присоединились спецы из фонда Mozilla, а позже из Apple.
Называли они себя WHATWG (Web Hypertext Application Technology Working Group).

И тут, в 2006 году W3C поняли, что весь мир веб-индустрии не собирается переходить на XHTML. Они воссоздали рабочую группу HTML, та в свою очередь взяла основы спецификации WHATWG.

W3C в 2009 году прекращает работу над XHTML 2.0 и активно работает над HTML5.

HTML5 в последние 2 года развивается очень быстро, это видно как по поддержке этого стандарта браузерами так и корректировкой спецификации. HTML5 можно использовать прямо сейчас. Плюс его в том, что вам не придется переучиваться под новый стандарт. Если вы писали код на HTML, то продолжайте писать в таком же стиле. Если кодили на XHTML, то пишите на этом же синтаксисе - HTML5 это позволяет.

Старт

За один раз всего не расписать, поэтому мы будем с вами рассматривать информацию порционно. Сперва научимся некоторым аспектам и создадим простой HTML5 документ.

Чем же отличается обычная верстка на HTML от верстки на HTML5? Начнем с того, что HTML5 включает в себя кучу нового, можно воспроизводить видео или узнавать текущее положение пользователя по геолокации. Стандарт обрел новые тэги, вы наверное о них уже слышали и видели но не понимали откуда они взялись. Понятно конечно почему <article> это относится к контенту, а <section> к какому либо тематическому блоку. Но все же разберемся.
Исследование Opera MAMA показало, что на куче сайтов используются блоки с классами menu, sidebar, nav, header, footer. Вспомните свой код, большая вероятность того что вы и использовали эти классы. Но тэг <div> семантически пассивен, поэтому в HTML мы имеем уже семантически правильные тэги, по которым можно определить логику и структуру элемента.

Рассмотрим простейший документ на HTML5

<!DOCTYPE html>
  <html>
   <head>
    <meta charset="utf-8">
    <title>Пример документа на HTML5</title>
   </head>
   <body>
    <header><h1>Заголовок</h1></header>
    <nav><a href="/">Главная</a> <a href="/">Статьи</a></nav>
    <section>
       <article>
          <h1>Привет!</h1>
          <p>Это пример страницы на HTML5. Посмотрите на структуру - все просто и логично!</p>
       </article>
    </section>
    <aside>Тут может быть, например, реклама или интересные статьи.</aside>
    <footer>Copyright 2011 Makecode</footer>
  </body>
  </html>

Как видно из примера DOCTYPE стал чистым и понятным. Никаких ссылок и дополнительных аттрибутов.
Кодировка теперь указывается так же просто как и DOCTYPE. Вы пишете meta charset и указываете используемую кодировку.

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

Вот из такого малого количества тэгов можно собрать страницу. В следующих частях мы рассмотрим другие не менее интересные тэги и научимся их применять по назначению. Познакомимся с удивительно полезными аттрибутами форм избавляющих нас от использования дополнительной обработки яваскриптом и т.д.

Да, кстати. В HTML5 больше не нужно указывать type к скриптам и стилям. Теперь просто <style> и <script>.

А что обстоит со старыми браузерами не поддерживающими HTML5?
Собственно ничего страшного не обстоит, страницы загружаются и хорошо отображаются. Но т.к. они не знают о новых тэгах и какие они должны быть (блочные, строчные) то пригодится следующий CSS код:

header, nav, section, article, aside, footer {
   display: block;
}

А для IE<9 эти элементы не поддерживаются по-умолчанию, поэтому решаем с помощью небольшого сценария:

<script>
   document.createElement('header');
   document.createElement('nav');
   document.createElement('section');
   document.createElement('article');
   document.createElement('aside');
   document.createElement('footer');
</script>
(Visited 432 times, 1 visits today)