HTML5. Введение
Время наступило и мы начинаем новую рубрику на МэйкКоде про 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 документ.
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>
(5 votes, average: 4,20 из 5)
Loading ...
Loading ...
2 Комментариев на «HTML5. Введение»
Да, намного всё упростилось, особенно
Ответить
Насколько я понял, предполагается использовать тег section внутри тега article для разбития последней на логические части (например главы) или, к примеру, в табах и т.д. Также подразумевается, что внутри тега section будет заголовок. Внутри section допускается по одному заголовку h1 и в итоге наличие нескольких заголовков h1 на одной странице, что ранее было крайне нежелательно.
Ответить