Веб-технологии постоянно эволюционируют. Каждый день создаются новые
сайты, которые расширяют возможности HTML. HTML 4 существует в течение
почти десяти лет, но издатели ищут новые способы расширения функционала
этого формата. Однако разнообразие языков и браузеров ограничивает
некоторые его возможности.
Чтобы дать разработчикам более гибкий, совместимый продукт, а также
позволяющий делать проекты более интерактивными и интересными, HTML 5
внедряет и расширяет спектр функций, включая формы управления, API,
мультимедиа, структуру и семантику.
Работа над HTML 5 была начата в 2004 году. В настоящее время разработки осуществляются в рамках совместных усилий и .
Многие известные компании принимают участие в разработках, в том числе:
Apple, Mozilla, Opera, а Microsoft, и ряд других организаций и частных
лиц с различными интересами и опытом.
Заметим, что
находится еще в стадии разработки, и весьма далека от завершения. Таким
образом, вполне возможно, что любые функции, упомянутые в этой статье,
могут измениться в будущем. Данная статья призвана описать новые
возможности формата HTML версии 5.
Структура
HTML 5 вводит целый ряд новых элементов, которые делают структуру
страниц намного проще. Большинство HTML4 страниц содержат ряд общих
структур, например, колонтитулы (шапка и футер страницы) и столбцы, и
сегодня это становится уже традицией - выделять их, используя элементы
div, присваивая ему класс или id.
На иллюстрации типичный 2х колоночный макет с использованием div
элементов, с присвоением им класса или id. Структура сожержит - “шапку”
страницы, подвал, навигационное меню и контент, разбитый на 2 колонки -
Использование div элементов преимущественно, потому что в текущей
версии HTML 4 не хватает семантики для описания этих частей более
конкретно. HTML 5 данную проблему решает за счет введения новых
элементов, каждый из который имеет свое отдельное название.
Есть несколько преимуществ использования этих элементов. При
использовании их в сочетании с заголовками элементов (h1 - h6), это
дает возможность внедрить в каджый уровень свой подраздел с заголовком,
в отличие от возможных 6 уровней в предыдущей версиии HTML.
Спецификация включает в себя .
Эти элементы могут быть использованы как авторские и браузерные
инструменты для генерации оглавления и помощи пользователям в навигации
по документу.Например, следующая структура разделена на уровни с
вложенными элементами h1:
Заметим, что для наибольшей совместимости с разными браузерами,
можно использовать различные уровни заголовков, такие как h2, h3 и
т.д.Определив назначение разделов на странице, используя конкретные
элементы разделов, такая технология может помочь пользователю легче
перемещаться по странице. Например, пользователь может легко перейти в
раздел меню или быстро переходить от одной статьи к следующей без
необходимости для разработчика делать такую ссылку-переход.
Разработчики также могут торжествовать, потому что заменив элементы div
на соотвествующие элеметы, исходный код будет проще и “чище”.
Элемент “header” представлет собой заголовок страницы. Этот
раздел может содержать не только заголовок как таковой, но также и
любые подзаголовки, которые помогут пользователю больше понять
содержание страницы.
<header> <h1>A Preview of HTML 5</h1> <pclass="byline">By Lachlan Hunt</p> </header> <header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header>
Элемент “footer” представляет собой “подвал” страницы. В этой части страницы обычно размещают ссылку на права автора, счетчики, и т.д.
Элемент “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” представляет собой непосредственно
содержание страницы, т.е. определяет контент как таковой: статьи,
новости, комментарии и т.п.
<articleid="comment-2"> <header> <h4><ahref="#comment-2"rel="bookmark">Comment #2</a> by <ahref="http://example.com/">Jack O'Niell</a></h4> <p><timedatetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time> </header> <p>That's another great article!</p> </article>
В следующей части статьи описание внедрения видео- и аудио-элементов
