Автор: Elliotte Rusty Harold (elharo@metalab.unc.edu), Adjunct Professor, Polytechnic University, 07 Aug 2007
Оригинал статьи: http://www.ibm.com/developerworks/library/x-html5/?ca=dgr-lnxw01NewHTML
Перевод: Олег Петрачёв // cronfy, 10-08-2007.
HTML 5 вносит новые элементы в HTML - впервые в новом тысячелетии.
Новые структурные элементы:aside,figureиsection;
инлайновые элементы:time,meter, иprogress;
элементы для внедрения объектов:videoиaudio;
интерактивные элементы:details,datagridиcommand.
Разработка HTML остановилась в 1999 году на HTML 4. W3C сфокусировался на переводе основы языка HTML с SGML на XML, а также на разработке совершенно новых языков разметки: Scalable Vector Graphics (SVG), XForms и MathML. Разработчики браузеров занимались реализацией вкладок и поддержкой RSS, а дизайнеры повалили изучать CSS и JavaScript для создания собственных приложений поверх существующих фреймворков с использованием AJAX. Впрочем, HTML и сам не стоял на месте эти 8 лет.
Не так давно всё начало шевелиться. Три разработчика основных браузеров - Apple, Opera, и Mozilla Foundation - организовали Web Hypertext Application Technology Working Group (WhatWG), чтобы начать разрабатывать улучшенную и дополненную версию классического HTML. Чуть позже W3C заметили эти продвижения и начали предпринимать усилия по разработке своего языка HTML нового поколения. В конечном счёте эти разработки, судя по всему, объединяются. И несмотря на то, что многие детали ещё будут обсуждаться, общие черты следующей версии HTML уже становятся чёткими.
Эта новая версия HTML, обычно называемая HTML 5, но также известная как Web Applications 1.0,
должна быть совершенно понятна веб-дизайнеру, который замёрз во льдах в далёком 1999-м и в наши дни имел счастье оттаять и отогреться.
В ней нет страшных слов namespace и scheme. Тэги не обязательно закрывать. Браузеры прощают ошибки.
Даже p всё тот же p, а table всё та же table.
В то же время, этот пресловутый оттаявший веб-дизайнер прошлого века заметил бы
некоторые непонятные новые элементы. Да, старые добрые
div'ы всё ещё здесь, но кроме них теперь есть ещё section,
header, footer и nav. Да, em, code
и strong остаются, но к ним добавляются
meter, time и m. Всё ещё используются img и embed, но появились video и audio.
Тем не менее, более близкое изучение привело бы нашего дизайнера к мысли, что новые элементы не сильно отличаются от старых.
Многие из них могли бы быть тем, что дизайнеру нужно было в 1999-м, но чего у него не было.
Все новые элементы легко опознаются по аналогии с уже известными дизайнеру элементами.
На самом деле разобраться в них гораздо проще, чем понять AJAX или CSS.
Наконец, если бы древний дизайнер включил замёрзший вместе с ним ноутбук о трехстах мегагерцах с Windows 98, он мог бы поразиться тому, что новые страницы нормально отображаются в Netscape 4 и IE 5. Естественно, браузер не смог бы ничего сделать с новыми элементами, но страница всё равно бы отображалась, и всё её содержимое тоже.
И это не было бы случайным совпадением. HTML 5 специально был задуман так, чтобы он нормально отображался в браузерах, не поддерживающих его. Причина проста: мы все похожи на древнего веб-дизайнера. У браузеров теперь есть вкладки, они знают CSS и умеют XmlHttpRequest, но движки, отображающие HTML, застряли в 1999-м. Веб не может развиваться без оглядки на существующую ситуацию. HTML 5 это понимает. Он предлагает широкие возможности современным верстальщикам, обещая ещё больше тем, кто будет просматривать эти страницы в будущем, когда браузеры постепенно усовершенствуются. Зная это, давайте посмотрим, что несёт нам HTML 5.
Даже корректно составленные HTML-страницы труднее обрабатывать,
чем это могло бы быть в идеале, из-за недостаточной структурированности.
То, как разделяются секции, приходится выяснять, анализируя
уровни заголовков. Боковые меню, подвалы, шапки, меню навигации,
разделы основного содержания, отдельные врезки - всё размечается
всепоглощающим элементом div. HTML 5 привносит новые элементы
для определения каждой из этих часто употребляемых конструкций:
section:
часть главы в книге, раздел статьи, по существу всё, что может обладать собственным заголовком в HTML 4;
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.
<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'ов. Вместо использования индивидуальных для каждого сайта
классов для разметки, разделение на секции описывается непосредственно названиями
элементов.
Это особенно важно для аудио, мобильных телефонов и других нестандартных браузеров.
Кроме структурных элементов HTML 5 вводит несколько исключительно семантических блоковых элементов:
aside
figure
dialog
Я постоянно использую первые два в своих статьях и в книгах. Третий лично я использую не часто, но он довольно часто встречается во многих текстах.
Элемент aside используется для обозначения заметки, подсказки, бокового меню, врезки
и всех прочих вставок вне основной линии повествования. Например, в статьях developerWorks
вы можете встретить врезки, свёрстанные как таблицы, как показано в Примере 3.
<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 border="1" 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. Врезка developerWorks на 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 позволяет показать блок с картинкой и заголовком.
Например, во многих статьях developerWorks можно найти разметку такого вида, как показано в Примере 5
(результаты вывода демонстрируются на Figure 1).
<a name="fig2"><b>Figure 1. 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 />Figure 1. Install Mozilla XForms dialog
В HTML 5 можно записать это более оформленно, как показано в Примере 6.
Пример 6. Иллюстрация developerWorks в HTML 5
<figure id="fig2">
<legend>Figure 1. 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 создан для представления беседы между людьми.
Элемент HTML 5 dt предназначен для обозначения говорящего,
а элемент dd используется для отображения речи.
Это обеспечивает приемлемое форматирование даже в старых браузерах.
Пример 7 приводит отрывок известного "Диалога о двух главнейших системах мира" Галилея.
<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>
Точный синтаксис этого элемента ещё обсуждается. Некоторые люди хотят иметь возможность
вставлять дополнительный, не относящийся к диалогу текст (например, авторские
пометки) внутрь элемента dialog, а другие не довольны тем, что значение
элементов dt и dd переназначается.
Однако практически все соглашаются, что семантическое представление диалога - вещь хорошая,
независимо от синтаксиса.
В HTML 4 есть пять разных элементов для представления программного кода:
var, code, kbd, tt и samp.
Однако в нём нет средств для отображения таких вещей как время, количество или интонация.
HTML 5 намерен исправить эту несправедливость по отношению к обычным (не техническим) писателям,
вводя несколько новых инлайновых элементов.
Элемент 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 показывает на какое-либо время, скажем,
5:35 P.M., EST, April 23, 2007.
<p>I am writing this example at <time>5:35 P.M. on April 23rd</time>. </p>
Элемент time помогает выделить обозначение времени на HTML-страницах.
Он не предъявляет каких-либо специальных требований к своему содержанию.
Тем не менее, каждый элемент time должен иметь атрибут
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 для обозначения некоторых данных, полученных мной от
программиста Google на Software Development 2007:
<p>An entry level programmer in Silicon Valley can expect to start around <meter>$90,000</meter> per year. </p>
Элемент meter помогает браузерам понимать обозначение количества на страницах HTML.
Он не предъявляет каких-либо требований к своему содержанию. Тем не менее, каждый
элемент meter может иметь до шести атрибутов, предоставляющих информацию
о количестве в более удобном для компьютера виде:
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, хотя конечно, идеальный результат - это 100. Клиентское приложение может отобразить эту информацию, используя какую-либо шкалу и показывая дополнительные данные во всплывающей подсказке, но большинство, скорее всего, отобразит содержимое как обычный инлайновый элемент.
Элемент progress представляет степень выполнения, как индикатор выполнения в GUI-приложении.
Например, он может показать, какая часть файла была загружена, или какой отрезок фильма вы просмотрели.
приведённый ниже индикатор показывает, что загрузка завершена на 33 процента:
<p>Downloaded: <progress value="1534602" max="4603807">33%</progress> </p>
Атрибут value отражает текущее положение вещей. Атрибут
max содержит информацию о конечном результате, к которому идёт процесс.
Здесь элемент показывает, что было загружено 1 534 602 байта из 4 603 807.
Можно показывать не ограниченный индикатор прогресса, не указывая атрибут
max.
Для динамического обновления индикатора прогресса придётся использовать JavaScript. Не изменяющийся элемент не представляет особенного интереса.
Видео в сети стремительно развивается, но практически всё в проприетарном формате.
В YouTube используется Flash, Microsoft использует Windows Media, Apple использует Quicktime.
Разметка, позволяющая внедрить такое содержимое в одном браузере, не работает в другом.
Вследствие этого 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.
Также предлагается дополнительный элемент audio.
Например, к странице можно будет добавить фоновую музыку таким образом:
<audio src="spacemusic.mp3" autoplay="autoplay" loop="20000" />
Атрибут autoplay
сообщает браузеру, что он должен начать воспроизведение как только страница загрузится,
без ожидания запроса пользователя.
Он должен будет прекратить проигрывание после 20 000 повторений (или если пользователь
закроет окно или уйдёт на другую страницу).
Конечно, браузеры могут (и должны) предоставлять пользователям вохможность
отключать или приостанавливать проигрывание файла, независимо от того, позаботился об этом автор
страницы или нет.
Браузеры должны поддерживать формат WAV. Браузеры могут также поддерживать другие форматы, например MP3.
Так как эти элементы не поддерживаются старыми браузерами и не могут быть
использованы пользователями с нарушениями зрения или слуха,
элементы audio и video
могут содержать дополнительную разметку, описывающую содержимое видео или аудио.
Это также полезно для поисковых систем. В идеальном случае это должна быть полная
расшифровка содержимого. В Примере 8 показано, как можно было бы сверстать блок, посвящённый
инаугурационному обращению Джона Кеннеди:
<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. И раз так, некоторые новые элементы должны представить интерактивную сторону будущих страниц:
details
datagrid
menu
command
Эти элементы обладают свойством изменять отображаемое в зависимости от действий и выбора пользователя без подгрузки страниц с сервера.
Элемент 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. Если атрибут установлен, в исходном положении
детали будут показаны посетителю. Если атрибута нет, элемент будет скрыт, пока пользователь
не запросит его отображение.
В любом случае, пользователь может кликнуть на значок или другой индикатор, чтобы скрыть или показать
детали.
Элемент datagrid служит для реализации
grid control. Он предназначен для деревьев, списков и таблиц, которые могут быть
изменены как пользователем, так и скриптами. Обычные же таблицы, наоборот, в основном используются
для отображения статичных данных.
Элемент datagrid получает первоначальные данные из своего содержимого: table, select
или другой группы элементов HTML.
Например, в Примере 9 изображён экзаменационный лист. В этом примере
структура данных порождена таблицей. Простейший одномерный
datagrid может быть порождёт select'ом.
Если использованы другие элементы HTML, каждый дочерний элемент становится новым рядом в структуре.
<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>
Что отличает этот элемент от обычной таблицы, так это то, что пользователь
может выбирать ряды, колонки и ячейки, соединять ряды, ячейки и колонки,
сортировать данные и другими способами взаимодействовать с данными непосредственно
в браузере. Код на JavaScript отслеживает изменения. Интерфейс HTMLDataGridElement (Пример 10)
добавлен к DOM для обеспечения этой возможности.
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.
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 на самом деле существует в HTML со второй версии.
Он был запрещён в HTML 4, но возвращается к нам в новом воплощении в HTML 5.
В HTML 5 menu содержит элементы command, обращение к каждому из которых
приводит к немедленной реакции. Пример 12 - это меню, которое разрождается alert'ами.
<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>
Команды могут быть также превращены в чекбоксы с помощью атрибута checked="checked".
Можно сделать из чекбоксов радио-переключатели, прописав атрибут radiogroup,
содержащий имя группы исключающих друг друга кнопок.
В дополнение к простому списку команд, мы можем использовать
menu для создания панели инструментов или появляющегося контекстного меню,
установив атрибуту type значение toolbar
или popup. Например, в Примере 13 показано исполнение панели инструментов,
которую можно встретить в редакторе блога вроде WordPress. Здесь использован
атрибут icon для создания связи с картинками кнопок.
<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 мог бы стать меню "Edit".
<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 - это часть будущего Веба. Новые элементы позволяют более ясно и просто
размечать страницы, что делает их более читаемыми. Элементы div и span
всё ещё имеют место быть, но их использование будет гораздо более ограничено, чем мы привыкли.
На многих страницах можно будет больше не использовать их.
Хотя поначалу не все браузеры будут поддерживать новые
элементы, то же самое когда-то происходило для большинства элементов в пору
первоначальной разработки HTML: для img, table, object
и многих других. Подержка будет реализована со временем. Тем временем,
поведение HTML, предписывающее игнорировать неизвестные элементы,
означает, что пользователи с устаревающими браузерами тоже будут способны просматривать
страницы на HTML 5. Они могут делать это и сейчас. Пользователи
с более современными браузерами будут получать больше возможностей,
но никто не останется в стороне.
Восемь лет - это довольно долгий период ожидания новых возможностей, особенно в быстро меняющемся мире Веба. HTML 5 напоминает о волнениях того времени, когда Netscape, Microsoft и другие изобретали новые элементы каждую неделю. В то же время разработчики HTML 5 подходят к вопросу гораздо более аккуратно, тщательно отбирая новые элементы так, чтобы все могли бы легко использовать их. Будущее выглядит ясным.