Веб постоянно развивается. HTML 4 существует в течение 10 лет, но издатели постоянно ищут новые способы расширения функционала и возможностей этого формата.
Работа над HTML 5 была начата в 2004 году и пока еще далека от завершения. В настоящее время разработки осуществляются в рамках совместных усилий W3C HTML WG и WHATWG.
Чтобы дать разработчикам более гибкий, совместимый продукт, а также позволяющий делать проекты более интерактивными и интересными, HTML 5 внедряет и расширяет спектр функций, включая формы управления, API, мультимедиа, структуру и семантику.
Структура
В HTML 5 появился целый ряд новых элементов, которые делают структуру страниц намного проще. Большинство HTML 4 страниц содержат ряд общих структур, например, колонтитулы (шапка и футер страницы) и столбцы, и сегодня это становится уже традицией — выделять их, используя элементы div, присваивая ему класс или id.
На иллюстрации типичный 2х колоночный макет с использованием div элементов. Структура содержит — «шапку» страницы, подвал, навигационное меню и контент, разбитый на 2 колонки.
Использование в HTML 4 div-элементов преимущественно, потому что в текущей версии не хватает семантики для описания этих частей более конкретно. HTML 5 данную проблему решает за счет введения новых элементов, каждый из которых имеет свое отдельное название.
Код документа выглядит так:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Есть несколько преимуществ использования этих элементов. При использовании их в сочетании с заголовками элементов (h1 — h6), это дает возможность внедрить в каждый уровень свой подраздел с заголовком, в отличие от возможных 6 уровней в HTML 4.
Для наибольшей совместимости с разными браузерами, можно использовать различные уровни заголовков, такие как h2, h3 и т.д.
Определив назначение разделов на странице, используя конкретные элементы разделов, такая технология может помочь пользователю легче перемещаться по странице. Например, пользователь может легко перейти в раздел меню или быстро переходить от одной статьи к следующей без необходимости для разработчика делать такую ссылку-переход. Разработчики также могут торжествовать, потому что, заменив элементы div на соответствующие элементы, исходный код будет проще и «чище».
Элемент «header» представляет собой заголовок страницы. Этот раздел может содержать не только заголовок как таковой, но также и любые подзаголовки, которые помогут пользователю больше понять содержание страницы.
<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>
<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>
Элемент «footer» представляет собой «подвал» страницы. В этой части страницы обычно размещают ссылку на права автора, счетчики, и т.д.
<footer>© 2007 Example Inc.</footer>
Элемент «nav» — определяет раздел навигации по сайту:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
Элемент «aside» определяет секцию, косвенно связанную с содержанием страницы, чаще всего используемую как приложение.
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>
Элемент «section» можно использовать как общий раздел содержания страницы
<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
</p>
</section>
Элемент «article» представляет собой непосредственно содержание страницы, т.е. определяет контент как таковой: статьи, новости, комментарии и т.п.
<article id="comment-2">
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="http://example.com/">Jack O'Niell</a></h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
</p></header>
<p>That's another great article!</p>
</article>
Продолжение следует…
- ePochta Mailer — для массовой рассылки e-mail сообщений
2leep.com
24 апреля 2009 в 0:29
Спасибо, интересно.
А вообще: как скоро html5 прийдет в нашу жизнь?
Разработчики не указывали примерные сроки? )
26 апреля 2009 в 9:02
Ожидается, что html 5 достигнет статуса W3C Candidate Recommendation в 2012 году.
Хотя большинство современных браузеров уже сейчас имеют частичную поддержку спецификаций html 5.
02 декабря 2009 в 1:54
Все понятно, самые корни даны, можно уже ваять в новом формате, ждем продолжения!
28 апреля 2010 в 6:08
Мне кажется, это в общем-то излишне. html 5 не приживётся, и вот по какой причине: такие теги, как header, footer и им подобные не являются структурными, а просто задают положение на странице. Что, если я потом захочу информацию из футера переместить в боковую колонку? при использовании xhtml мне просто нужно поменять css, а в html 5 — нужно уже менять сам код. нехорошо это, не правда ли?
04 мая 2010 в 8:46
Круто! Говорят там и мультимедиа-теги будут!
10 декабря 2010 в 3:26
Я тоже так вижу. Div — удобнее, точнее универсальнее. Хотя другие нововведения безусловно полезны.