Новые элементы в HTML 5

Эллиотт Расти Хэролд

Работа над HTML фактически остановилась в 1999 г. после выхода HTML 4, после чего W3C сосредоточилась на изменении синтаксиса с SGML (Standard Generalized Markup Language) на XML, а также на разработке новых языков разметки, таких как SVG (Scalable Vector Graphics), XForms и MathML. Производители браузеров были поглощены работой над новыми возможностями своих продуктов, например, закладками или чтением новостных лент RSS, а Web-дизайнеры изучали CSS и JavaScript, позволяющие использовать существующие решения на основе Ajax (Asynchronous JavaScript + XML) для разработки Web-приложений. Сам же язык HTML практически не развивался все эти восемь лет.

И вот недавно этот зверь проснулся. Три крупнейших производителя браузеров - Apple, Opera и Mozilla Foundation - создали рабочую группу под названием WhatWG (Web Hypertext Application Technology Working Group), целью которой стала разработка новой, улучшенной версии HTML. W3C обратил на это внимание чуть позднее и в итоге также включился в работу над HTML следующего поколения, причем силами многих участников WhatWG. В конце концов, эти две группы, скорее всего, объединятся. Несмотря на то, что споры над множеством деталей по-прежнему ведутся, общая картина следующей версии HTML постепенно проясняется.

Если представить себе Web-дизайнера, который проспал все восемь лет, начиная с 1999 г., то он по-прежнему сможет легко работать с HTML 5 (альтернативное название- Web Applications 1.0). Как и ранее, нет никаких пространств имен или схем, элементы закрывать необязательно, а браузеры прощают синтаксические ошибки. Другими словами, p и table - это все те же p и table.

Но в тоже время наш очнувшийся от спячки дизайнер наверняка обнаружит новые, непонятные элементы. К такому старому доброму приятелю, как div, добавились section, header, footer и nav, а к em, code и strong - meter, time и m. Также вдобавок к img и embed появились video и audio. Но если присмотреться, то можно заметить, что эти элементы не сильно отличаются от сушествующих. Многие из них требовались еще в 1999 г., просто тогда их еще не было. К тому же в них легко разобраться по аналогии с уже использующимися элементами, что делает HTML 5 более простым для изучения, чем, например, Ajax или CSS.

Если же вместе с дизайнером все восемь лет спал и его старый ноутбук с процессором 300MГц и Windows 98, то на нем по-прежнему можно будет запустить новые страницы, и, как ни странно, они будут замечательно отображаться браузерами Netscape 4 или Windows Internet Explorer 5. Разумеется, браузер не распознает новые элементы и все что с ними связано, но отобразить содержимое страницы он вполне сможет.

Это вовсе не какая-то счастливая случайность - одной из задач HTML 5 было то, что браузеры, не поддерживающие новый стандарт, должны отображать страницы с минимальными потерями. Причина этого проста: мы все в той или иной степени очнулись от спячки. Несмотря на такие возможности браузеров, как закладки, поддержка CSS или XmlHttpRequest, рендеринг HTML по-прежнему тот же, что был восемь лет назад. Web не может двигаться вперед без учета существующего положения дел, и разработчики HTML 5 это прекрасно понимали. Новый стандарт предоставляет новые возможности авторам страниц уже сейчас, обещая, что все они станут доступными для пользователей по мере выпуска новых версий браузеров. В свете этого давайте посмотрим, что же появилось нового в HTML 5.

Структура

Недостаток строгой структурированности документов создает трудности при обработке даже корректно сформированных документов. В частности, для определения границ секций приходится анализировать уровни заголовков. К тому же на единственный тег div возложены функции по описанию огромного множества конструкций, таких как боковые панели (sidebar), верхние и нижние разделы страниц, меню, области для контента и т.д. В HTML 5 эти функции распределены между следующими новыми элементами:

section: служит для определения частей и секций, например для разбивки книжных глав на разделы. Этот элемент может использоватья для любого описания любого блока текста, для которого требуется собственный заголовок.
header: определяет верхнюю секцию на странице. Учтите, что это не то же самое, что head.
footer: определяет нижнюю секцию на странице. Например, место для подписи в сообщениях email.
nav: содержит набор ссылок на другие страницы.
article: может описывать отдельные записи в блогах, статьи в журналах или руководствах и т.д.

В качестве примера рассмотрим типичную страницу блога, содержащую верхнюю и нижнюю секции, несколько записей, секцию для навигации, а также боковую панель (см. листинг 1):

Листинг 1. Типичная запись в блоге

                
<html>
  <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </div>
  <div id="container">
    <div id="center" class="column">               
      <div class="post" id="post-1000572">
        <h2><a href=
      "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
      Spring Comes (and Goes) in Sussex County</a></h2>
        
        <div class="entry">
          <p>Yesterday I joined the Brooklyn Bird Club for our
          annual trip to Western New Jersey, specifically Hyper
          Humus, a relatively recently discovered hot spot. It
          started out as a nice winter morning when we arrived
          at the site at 7:30 A.M., progressed to Spring around
          10:00 A.M., and reached early summer by 10:15. </p>
        </div>
      </div>


      <div class="post" id="post-1000571">
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
           But does it count for your life list?</a></h2>
        
        <div class="entry">
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
        </div>
      </div>

      </div>
    
    <div class="navigation">
      <div class="alignleft">
         <a href="/blog/page/2/">« Previous Entries</a>
       </div>
      <div class="alignright"></div>
    </div>
  </div>

  <div id="right" class="column">
    <ul id="sidebar">
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="footer">
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </div>
</div>
  
</body>
</html>

Даже несмотря на отступы, такая масса вложенных элементов div выглядит запутанно. Используя новые элементы HTML 5, страницу можно переписать, как показано в листинге 2.

Листинг 2. Та же запись, переписанная на HTML 5

                
<html>
 <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
  <header>
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </header>
  <section>               
      <article>
        <h2><a href=
        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County</a></h2>
        
        <p>Yesterday I joined the Brooklyn Bird Club for our
        annual trip to Western New Jersey, specifically Hyper
        Humus, a relatively recently discovered hot spot. It
        started out as a nice winter morning when we arrived at
        the site at 7:30 A.M., progressed to Spring around 10:00
        A.M., and reached early summer by 10:15. </p>
      </article>


      <article>
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?</a></h2>
        
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
      </article>    
    <nav>
      <a href="/blog/page/2/">« Previous Entries</a>
    </nav>
  </section>

  <nav>
    <ul>
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <footer>
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </footer>
  
</body>
</html>

Больше не нужны никакие div, а предзначение различных секций теперь ясно определяется используемыми элементами, а не значениями атрибута class, специфичными для конретного сайта. Это большое преимущество, особенно в случае использования нестандартных браузеров, в том числе мобильных и аудио версий.

Элементы уровня блока

Вдобавок к структурным элементам, HTML 5 предлагает набор семантических элементов уровня блока:

aside
figure
dialog

Я постоянно использую первые два в своих статьях и книгах. Несмотря на то, что я не очень часто использую dialog, он достаточно популярен у других авторов.

aside

Этот элемент обычно используется для советов, примечаний, цитат, ремарок - т.е. для всего, что не является частью основного повествования. Например, в статьях developerWorks, часто встречаются боковые панели, выполненные в виде таблиц, как показано в листинге 3.

Листинг 3. Боковая панель в статьях developerWorks на HTML 4

                
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">
<img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table class=borderall cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td class="code-outline">
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>
</td></tr></tbody></table><br>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</td></tr></table>

На HTML 5 подобный фрагмент описывается значительно элегантнее, как показано в листинге 4.

Листинг 4. Та же панель, но на HTML 5

                
<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
  
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</aside>

Используя CSS, браузер самостоятельно расположит панель в нужном месте документа.

figure

Элемент figure описывает изображение вместе с подписью. Например, в статьях developerWorks можно найти фрагменты, схожие с листингом 5. Результат показан на рисунке 1.

Листинг 5. Рисунок в статье developerWorks на HTML 4

                
<a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
<img alt="A Web site is requesting permission to install the following item: 
   Mozilla XForms 0.7 Unsigned" 
  src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
<br />

Рисунок 1. Диалог установки Mozilla XForms
A Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned

Подобные вещи реализуются значительно более осмысленно на HTML 5, как показано в листинге 6.

Листинг 6. Тот же рисунок, но описанный на HTML 5

                
<figure id="fig2">
  <legend>Figure 2. Install Mozilla XForms dialog</legend>
  <img alt="A Web site is requesting permission to install the following item: 
    Mozilla XForms 0.7 Unsigned" 
    src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>

Самое большое преимущество подобного подхода - это то, что браузеры, в особенности программы экранной интерпретации, могут легко ассоциировать картинку с подписью.

Кроме картинок figure может использоваться для добавления подписей к таким элементам, как audio, video, iframe, object и embed.

dialog

Элемент dialog служит для оформления диалога между несколькими собеседниками. В HTML 5 элемент dt по умолчанию используется для отображения имени говорящего, а элемент dd служит для форматирования речи. В итоге диалог отображается достаточно неплохо даже в старых браузерах. В листинге 7 показан фрагмент знаменитого диалога из работы Галилео Галилея "Диалог о двух главнейших системах мира".

Листинг 7. Диалог Галилео на HTML 5

                
<dialog>
	<dt>Simplicius </dt> 
    <dd>According to the straight line AF,
	and not according to the curve, such being already excluded
	for such a use.</dd>

	<dt>Sagredo </dt> 
    <dd>But I should take neither of them,
	seeing that the straight line AF runs obliquely. I should
	draw a line perpendicular to CD, for this would seem to me
	to be the shortest, as well as being unique among the
	infinite number of longer and unequal ones which may be
	drawn from the point A to every other point of the opposite
	line CD. </dd>

	<dt>Salviati </dt> 
    <dd><p> Your choice and the reason you
	adduce for it seem to me most excellent. So now we have it
	that the first dimension is determined by a straight line;
	the second (namely, breadth) by another straight line, and
	not only straight, but at right angles to that which
	determines the length. Thus we have defined the two
	dimensions of a surface; that is, length and breadth. </p>

	<p> But suppose you had to determine a height-for
	example, how high this platform is from the pavement down
	below there. Seeing that from any point in the platform we
	may draw infinite lines, curved or straight, and all of
	different lengths, to the infinite points of the pavement
	below, which of all these lines would you make use of? </p>
	</dd>
</dialog>

Точный синтакс этого элемента пока еще не утвержден, потому как некоторые разработчики хотели бы добавить возможности для представления стороннего текста внутри диалога (например, сценических указаний), в то время как другие считают, что достаточно перегружать элементы dt и dd. Но, несмотря на эти разногласия, большинство согласно, что подобное семантическое представление диалога - это шаг вперед.

Семантические элементы уровня текста

В HTML 4 существуют несколько элементов уровня текста для представления разного рода фрагментов кода, такие как var, code, kbd, tt и samp. При этом не существует никаких специальных конструкций для выделения таких базовых понятий, как время, числа, саркастические оттенки и т.д. В целях выровнять этот перекос в сторону технических текстов, HTML 5 предлагает несколько новых встроенных элементов.

mark

Элемент m указывает, что фрагмент текста отмечен каким-либо образом (необязательно подчеркнут), скажем, для выделения важных эпизодов в книге. Классическим примером использования могут служить закешированные страницы Google, на которых отмечены ключевые слова, использованные для поиска. Если поиск был выполнен по некоторому слову, например, "Egret", то закешированная страница может быть размечена следующим образом:

The Great <m>Egret</m> (also known as the
American <m>Egret</m>)  is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>.

Название этого элемента до сих пор остается предметом обсуждения. Оно может быть измененено на mark вместо m в окончательной версии спецификации.

time

Элемент time служит для представления определенных моментов времени, таких как 23 апреля, 5:35 P.M., EST, 2007. Например:

<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p>

Этот элемент позволяет браузерам и другим программам распознавать время на страницах HTML. Содержимое самого элемента не привязано к какому-либо формату представления времени, однако необходимо включать дочерний элемент datetime, содержащий время в формате, более пригодном для распознавания внешними программами:

<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p>

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

meter

Элемент meter служит для представления числового значения в определенном интервале. Он может использоваться для таких вещей, как зарплаты, процент французов, проголосовавших за Ле Пена, результаты тестирования и т.д. В данной статьей meter используется для разметки данных полученных от одного программиста Google на конференции Software Development 2007.

<p>An entry level programmer in Silicon Valley 
can expect to start around <meter>$90,000</meter> per year.
</p>

Этот элемент помогает браузерам и другим программам распознавать различные числовые параметры на страницах HTML. Сам по себе элемент не навязывает какой-либо специальный формат, однако поддерживает до шести атрибутов для представления сумм в форме, более пригодной для машинной обработки:

value
min
low
high
max
optimum

Каждый атрибут должен содержать десятичное число, задающее нужный интервал. Например, представление оценки на экзамене может быть выполнено следующим образом:

<p>Your score was 
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>

Это означает, что студент получил 88.7 баллов из 100 возможных. При этом нижний минимум оценки - 0, самая низкая из полученных оценок - 65, а самая высокая - 96 из ста. Разумеется, различные программы-агенты могут по-разному представлять эту информацию, используя различные интерфейсные элементы или же просто выдавая подсказку, расшифровывающую значение оценки, но большинство, скорее всего, будет использовать стандартное оформление для элементов уровня текста.

progress

Элемент progress служит для представления состояния некого выполняющегося процесса аналогично строке состояния в графических приложениях. Например, он может использоваться для отображения процесса скачивания файла или просмотра видео. Ниже приведен элемент progress, показывающий, что скачано 33% файла:

<p>Downloaded: 
  <progress value="1534602" max="4603807">33%</progress>
</p>

Атрибут value служит для представления текущего, а атрибут max - для конечного состояния процесса. Например, в данном случае элемент показывает, что скачалось 1,534,602 байт из 4,603,807.

Если опустить атрибут max, то можно использовать этот элемент для отображения процессов с неопределенным текущим состоянием.

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

Элементы мультимедиа

Использование видеофайлов на Web-страницах растет быстрыми темпами, но только за счет проприетарных технологий, таких как Flash на YouTube, Microsoft Windows Media® или QuickTime в случае Apple. Таким образом, способы разметки подобного контента зависят от конкретного браузера. WhatWG предложила новый элемент video, позволяющий размещать видеоролики произвольных форматов. Например, можно добавить фильм "Sora in Prospect Park" в формате QuickTime следующим образом:

<video src="http://www.cafeaulait.org/birds/sora.mov" />

В то же время продолжаются споры о том, надо ли отдавать предпочтение какому либо одному кодеку или видеоформату. В частности, очень вероятно, что поддержка Ogg Theora будет, как минимум, рекомендована, а может и вовсе стать обязательной, в отличие от проприетарных форматов, таких как QuickTime, а также форматов, защищенных патентами, например, MPEG 4. Скорее всего, набор поддерживаемых форматов определится в результате естественной конкуренции, аналогично тому, как изображения в форматах GIF, JPEG и PNG стали в итоге использоваться гораздо чаще в элементах img, чем BMP, X-Bitmap или же JPEG 2000.

Кроме video также предложен новый элемент audio. Например, он может использоваться для добавления музыкального фона к Web-странице:

<audio src="spacemusic.mp3"
    autoplay="autoplay" loop="20000" />

Атрибут autoplay служит для указания браузеру, что проигрывание должно начаться сразу после загрузки страницы, без всякого действия со стороны пользователя. Оно должно повториться 20,000 раз или же пока пользователь не покинет страницу. Разумеется, браузеры могут и должны предоставлять возможность выключить звук или же остановить проигрывание, вне зависимости от того, предусмотрел автор такую возможность или нет.

Поддержка формата WAV будет обязательной для браузеров, в отличие от других форматов, например, MP3.

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

Листинг 8. Выступление Джона Ф. Кеннеди на инаугурации. HTML 5

                
<audio src="kennedyinauguraladdrees.mp3">
    <p>
    Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
    President Eisenhower, Vice President Nixon, President Truman,
    Reverend Clergy, fellow citizens:
    </p>
    
    <p>
    We observe today not a victory of party, but a celebration of
    freedom -- symbolizing an end, as well as a beginning -- 
   signifying renewal, as well as change. For I have sworn before
    you and Almighty God the same solemn oath our forebears
    prescribed nearly a century and three-quarters ago.
    </p>
    
    <p>
    The world is very different now. For man holds in his mortal
    hands the power to abolish all forms of human poverty and all
    forms of human life. And yet the same revolutionary beliefs for
    which our forebears fought are still at issue around the globe -- 
    the belief that the rights of man come not from the
    generosity of the state, but from the hand of God.
    </p>
    
    <p>
    ...
    </p>
    
    </audio>

Интерактивные элементы

HTML 5 также известен как Web Applications 1.0. В частности, поэтому он предоставляет несколько элементов для улучшения интерактивной составляющей Web-страниц:

details
datagrid
menu
command

С помощью этих элементов пользователь потенциально может изменить содержимое страницы без ее перезагрузки на сервере:

details

Элемент details служит для представления информации, которую необязательно показывать по умолчанию. Дополнительный атрибут legend может использоваться для краткого отображения содержимого details. Например, элемент может применяться для отображения сносок:

The bill of a Craveri's Murrelet is about 10% thinner 
than the bill of a Xantus's Murrelet. 
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds, 
(New York: Chanticleer Press, 2000) p. 247
 </p>
</details>

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

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

datagrid

Элемент datagrid представляет собой таблицу с данными. Он может использоваться для представления деревьев, списков или таблиц, данные в которых могут изменяться как пользователем, так и различными скриптами. Этим он отличается от обычных таблиц в HTML, которые, как правило, отображают неизменяющуюся информацию.

Изначально данные в datagrid берутся из одного или нескольких дочерних элементов, таких как table, select и т.д. Например, в листинге 9 приведен пример datagrid для показа ведомости с оценками. В этом примере, данные берутся из элемента table. В более простом случае, они могут находиться в одноразмерном элементе select. Если используются несколько дочерних элементов, то каждый из них превращается в отдельную строчку в таблице.

Листинг 9. Ведомость с оценками в datagrid

                
<datagrid>
  <table>
    <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>
    <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>
    <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
    <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>
  </table>
</datagrid>

Главным отличием данного элемента от обычных HTML-таблиц является то, что пользователь может выбирать, сворачивать, удалять строки, столбцы и ячейки, сортировать таблицу, т.е. работать с данными непосредственно в браузере на клиентской стороне. Для отслеживания изменений в данных служит HTMLDataGridElement - специальный JavaScript-интерфейс, добавленный в модель DOM (Document Object Model).

Листинг 10. HTMLDataGridElement

                
interface HTMLDataGridElement : HTMLElement {
           attribute DataGridDataProvider data;
  readonly attribute DataGridSelection selection;
           attribute boolean multiple;
           attribute boolean disabled;
  void updateEverything();
  void updateRowsChanged(in RowSpecification row, in unsigned long count);
  void updateRowsInserted(in RowSpecification row, in unsigned long count);
  void updateRowsRemoved(in RowSpecification row, in unsigned long count);
  void updateRowChanged(in RowSpecification row);
  void updateColumnChanged(in unsigned long column);
  void updateCellChanged(in RowSpecification row, in unsigned long column);
};

DOM также может быть использован для автоматической загрузки данных в таблицу. Таким образом, datagrid не обязан содержать дочерние элементы для хранения изначальных данных. Вместо этого они могут устанавливаться с помощью объекта типа DataGridDataProvider, как показано в листинге 11. Подобным образом можно получать информацию из баз данных, через XmlHttpRequest и вообще из любых источников, доступных через JavaScript.

Листинг 11. DataGridDataProvider

                
interface DataGridDataProvider {
  void initialize(in HTMLDataGridElement datagrid);
  unsigned long getRowCount(in RowSpecification row);
  unsigned long getChildAtPosition(in RowSpecification parentRow, 
      in unsigned long position);
  unsigned long getColumnCount();
  DOMString getCaptionText(in unsigned long column);
  void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
  DOMString getRowImage(in RowSpecification row);
  HTMLMenuElement getRowMenu(in RowSpecification row);
  void getRowClasses(in RowSpecification row, in DOMTokenList classes);
  DOMString getCellData(in RowSpecification row, in unsigned long column);
  void getCellClasses(in RowSpecification row, in unsigned long column, 
      in DOMTokenList classes);
  void toggleColumnSortState(in unsigned long column);
  void setCellCheckedState(in RowSpecification row, in unsigned long column, 
      in long state);
  void cycleCell(in RowSpecification row, in unsigned long column);
  void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};

Элементы menu и command

Элемент menu существовал в HTML как минимум со второй версии, затем был объявлен устаревшим в HTML 4, однако триумфально вернулся в HTML 5. В новом стандарте он содержит дочерние элементы command, каждый из которых моментально запускает определенное действие. В листинге 12 приведен пример использования menu для показа сообщений alert.

Листинг 12. Меню на HTML 5

                
<menu>
    <command onclick="alert('first command')"  label="Do 1st Command"/>
    <command onclick="alert('second command')" label="Do 2nd Command"/>
    <command onclick="alert('third command')"  label="Do 3rd Command"/>
</menu>

C помощью атрибута checked="checked" элементы command можно превратить в группу флажков (check boxes), которые в свою очередь легко преобразуются в группу радиокнопок путем использования атрибута radiogroup (он должен содержать название группы неповторяющихся названий кнопок).

Кроме простого списка команд, элемент menu можно использовать для создания панелей инструментов или контекстных меню, используя значения toolbar и popup атрибута type. Например, в листинге 13 показана панель инструментов, типичная для редакторов блогов, таких как WordPress. В ней используется атрибут icon для ссылок на иконки для кнопок.

Листинг 13. Панель инструментов на HTML 5

                
<menu type="toolbar">
    <command onclick="insertTag(buttons, 0);"  label="strong" icon="bold.gif"/>
    <command onclick="insertTag(buttons, 1);"  label="em" icon="italic.gif"/>
    <command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
    <command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote.gif"/>
    <command onclick="insertTag(buttons, 4);"  label="del" icon="del.gif"/>
    <command onclick="insertTag(buttons, 5);"  label="ins" icon="insert.gif"/>
    <command onclick="insertImage(buttons);"   label="img" icon="image.gif"/>
    <command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet.gif"/>
    <command onclick="insertTag(buttons, 8);"  label="ol" icon="number.gif"/>
    <command onclick="insertTag(buttons, 9);"  label="li" icon="item.gif"/>
    <command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>
    <command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
    <command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
    <command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu>

Для задания заголовка меню используется атрибут label. Пример использования в меню "Правка" показан в листинге 14.

Листинг 14. Меню "Правка" на HTML 5

                
<menu type="popup" label="Edit">
    <command onclick="undo()"   label="Undo"/>
    <command onclick="redo()"   label="Redo"/>
    <command onclick="cut()"    label="Cut"/>
    <command onclick="copy()"   label="Copy"/>
    <command onclick="paste()"  label="Paste"/>
    <command onclick="delete()" label="Clear"/>
</menu>

Также можно создавать иерархические меню путем вложения одних элементов в другие.

Заключение

HTML 5 - это часть будущего Web. Новые элементы упрощают разметку страниц, делая их более понятными для пользователя. И хотя старые теги div и span по-прежнему могут использоваться, область их применения значительно сужается, а многим страницам они становятся и вовсе не нужны.

Конечно, не все браузеры сразу станут поддерживать новые элементы, но ведь та же ситуация наблюдалась и в случае многих конструкций, добавленных после выхода первого стандарта HTML, например, тегов img, table, object и т.д. Поддержка новых элементов будет постепенно реализовываться, а пока же они будут игнорироваться старыми браузерами в соответствии с соглашением "необходимо пропускать" (must-ignore). Это означает, что браузеры по-прежнему смогут отображать страницы HTML 5, что и происходит в настоящее время. Пользователи современных браузеров, конечно, получат определенное преимущество, но возможность просматривать новые страницы будет у всех.

Восемь лет ожидания новых возможностей - это очень долго, особенно в стремительно развивающемся мире Web. HTML 5 частично возрождает радостное возбуждение ранних дней развития HTML, когда Netscape, Microsoft и другие компании еженедельно предлагали новые элементы. Но в данном случае используется гораздо более осторожный и обдуманный подход к определению элементов, направленный на то, чтобы сделать их доступными для всех. В общем, будущее выглядит очень привлекательным.