Несмотря на то, что спецификацию HTML5 планируется полностью утвердить и добиться максимально широкой функциональной совместимости лишь в 2014 году, уже сейчас начинают выкристаллизовываться идеи о том как должна выглядеть данная спецификация следующего поколения — HTML.next, как его в рабочем порядке называют в W3C-консорциуме.
Новые элементы семантики
<dеcompress>
Данный элемент предлагается использовать для интеграции файлов из ZIP-архива (ZIP в качестве основного формата, возможны и другие) напрямую в веб-страницу. Преимущества такого подхода: доступ веб-браузера к файлам из ZIP, уменьшение требований к пропускной способности канала (что особенно актуально для мобильных платформ).
Пример использования:
<decompress href="http://thisisanexample.com/mobile/familyreunion.zip">
<a href="familyreunion.zip/html/activities.html">Activities from our family reunion</a>
<img src="familyreunion.zip/img/familyreunion1.jpg">
Семантика для обозначения заголовков и авторов
Служит для идентификации названий книг, блого-постов, фильмов и тд с относящимся к ним авторам даже если разметка распространяется всего на несколько параграфов. Данная семантика может быть реализована в виде псевдо-разметки и определять связи между элементами.
Пример:
[title: The praise of Shadow id:praise by:junichiro]
is a book written by [author: Junichiro Tanizaki id:junichiro]
explaining … etc.
<lоcation>
Данный элемент (по аналогии с <time />) служит для обозначения гео-информации. Предлагается использовать с атрибутами lat, long, altitude:
<location lat=27.9 long=-71.3 altitude=-100>Бермудский треугольник</location>
<tеaser>
Предназначен для того чтобы обернуть блок с контентом, имеющим ссылку, в более полный блок. Подобные структуры мы видим повсеместно: в поисковых выдачах на первые страницы блогов, блок-резюме с (или без) каким-либо медиа-ресурсом и тд. В целом это должен быть секционный элемент, который может располагаться в других секционных элементах, таких как навигационные страницы:
<nav>
<teaser>
<header>
<h1><a href="http://www.myserver.com/myFirstCoolArticle.html">My First Cool Article</a></h1>
</header>
<p>This is my first article on the page, and it's really cool.</p>
<footer>
<time>3 Days Ago</time>
<div><a href="http://www.myserver.com/myFirstCoolArticle.html"
>http://www.myserver.com/myFirstCoolArticle.html</a></div>
</footer>
</teaser>
<teaser>
<header>
<h1><a href="http://www.myserver.com/mySecondCoolArticle.html"
>My Second Cool Article</a></h1>
</header>
<p>This article is on superconducting fields, and is even cooler than my first article.</p>
<footer>
<time>1 Days Ago</time>
<div>
<a href="http://www.myserver.com/mySecondCoolArticle.html"
>http://www.myserver.com/mySecondCoolArticle.html</a
</div>
</footer>
</teaser>
</nav>
Преимущества использования данного элемента:
описание общих, часто используемых структур в HTML
способствует оптимизации поисковых движков и управления компонентами, так как разные виджеты могут использовать данную структуру по-разному
не обязательно участвовать в механизме нумерации списков
может быть использован вместе с якорями для создания быстрых ToC
хорошо работает в блогах, которые в HTML5, видимо, приняты в качестве основы для разделения контента
Формы
Автоматическое написание в input-формах прописными буквами
Семантическое описание типа данных, которые будут записаны в поле. Такой атрибут позволит браузеру предоставить пользователю лучший интерфейс для ввода текстовой информации.
Например:
<form>
ФИО: <input name="name" autocapitalize="words">
State: <input name="state" autocapitalize="characters">
</form>
Указав тег autocapitalize=«words», браузер каждое новое слово будет писать с заглавной буквы. Актуально для полей указания ФИО, напр. «Вася Пупкин».
Указав тег autocapitalize=«characters», браузер каждый символ будет писать с заглавной буквы. Актуально для аббревиатур.
Более подробно здесь.
Улучшенная проверка подлинности форм
Сегодня большинство браузеров имеют эвристики, определяющие, что на странице есть формы аутентификации, смены паролей и тп. Часто эти эвристические алгоритмы срабатывают не всегда корректно. Добавление к формам и полям аннотаций позволит браузерам более точно обрабатывать сценарии и улучшить взаимодействие.
Локализация элементов управления
Часто веб-разработчикам не хватает возможности локализовать элементы управления, например:
— кнопка «Browse» для полей типа <inрut type=file />
— элементы управления для выставление даты/времени
Мультимедиа
Адаптивные изображения
Загрузка разных размеров изображений в зависимости от текущих параметров на стороне клиента (подробнее).
Адаптивное потоковое вещание
Работы в данном направлении уже ведутся: Adaptive Streaming, Video Metrics.
Существует целый ряд различных адаптивных потоковых форматов (так же как есть ряд различных прогрессивных медиа-форматов для загрузки контента). Во многих случаях через потоковое вещание требуется передавать защищенный контент. Текущие HTML5 медиа-элементы поддерживают возможность выбора из разных форматов. Тем не менее существуют некоторые аспекты адаптивного потокового вещания и защищенного контента, которые требуют улучшения в сфере HTML для возможности общего использования. В частности они включают:
дополнительный медиа-элемент состояния, позволяющий отображать текущий статус (напр. согласование передачи данных с сервером)
дополнительный медиа-элемент ошибок (напр. ошибка согласования передачи)
дополнительный медиа-элемент событий (напр. изменение битрейта потока)
дополнительный медиа-элемент свойств (напр. текущий битрейт, который может быть связан с другими показателями QoS)
Аудио-баланc
Настройка аудио-баланса (правый/левый канал) средствами HTML5 для стерео композиций.
Улучшение воспроизведения видео
быстрое/медленное воспроизведение/перемотка
предыдущий/следующий кадр
Полноэкранный режим и скриншоты
domElement.fullScreen();
domElement.getImageData(0, 0, domElement.offsetWidth, domElement.offsetHeight);
Редактирование текстов
Элемент <editоr>
Данный элемент позволит сохранять набранный текст при переходе по ссылкам.
<tеxtarea type=''wysiwyg''>
Основная цель: WYSIWYG-редактирование структурированного (семантического) текста. Предполагаемое использование: блоги, email'ы, редактирование статей из CMS сайтов и тд.
Предполагаемый список поддераживаемых элементов:
blocks: p, ul/li, ol/li, dl/dt/dd, blockquote, pre
spans: strong/em/a/sup/sub/u/code/strike.
inline-blocks: img, br
таблицы: table/tr/th/td
Особенности:
поддержка копирования/вставки изображений из/в системный буфер (подключается атрибутом)
поддержка копирования/вставки текстов и HTML из/в системный буфер (подключается атрибутом)
не должен поддерживать встроенные стили
может иметь атрибут content-style=«some.css», определяющий стили элементов внутри редактора
Возможности копирования/вставки
Список, представленный в левой части таблицы, будет отрендерен так, как представлено в правой части таблицы.
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>sit</li>
<li>et cetera</li>
</ol>
Lorem
Ipsum
Dolor
sit
et cetera
Если скопировать пункт 'Dolor' и вставить его в обычный WYSIWYG текстовый редактор, то вместо простой записи без номера пункта должны получить «3. Dolor».
Компоненты и ECMAScript
«behaviors» или динамические подклассы элементов DOM
Данная функция очень полезна для компонентов пользовательских интерфейсов фреймворков и инструментальных средств.
Пример:
document.behaviors["ul.some>li"] = { // the behavior class:
attached: function() {...},
detached: function() {...},
onmousedown: function() {...},
onclick: function() {...},
...
};
«behaviors» представляют собой наборы методов, назначенные всем элементам, удовлетворяющим селектору в декларации. Когда элемент получает событие, то вызывается связанная функция. Таким же образом предлагается работать и с CSS. Данное поведение схоже с «цепочками» событий в jQuery.
include(''url'');
Для многих программистов, привыкших писать на C++, PHP, etc, весьма не хватает такой возможности. Для сохранения модульности предлагается использовать подключение внешних файлов следующим образом (работает аналогично @import url(...) в CSS):
window.include("url"[,mime/type])
JavaScript: пространство имен и классы
JavaScript-код становится все более и более сложным. На одной странице может использоваться несколько разных библиотек и отсутствие пространств имен (а также классов) становится все более хлопотным для веб-разработчиков. Подробнее о необходимости такого подхода можно почитать на web-dev.info.
Подсветка синтаксиса для элементов <cоde>
Учитывая тот факт, что браузеры уже имеют средства парсинга HTML, JS и CSS, было бы неплохо иметь нативную поддержку подсветки синтаксиса без необходимости парсинга кода на стороне клиента средствами JavaScript'а. Для начала хватило бы вышеперечисленных языков, другие можно добавлять с помощью подключения соответствующих CSS.
Пользователи хабра наверняка сразу провели аналогии с тегом <sоurce>, использующимся здешним редактором, который в данном случае можно было бы упразднить.
<source lang="Язык"></sоurce>
Подсвечивает исходный код (на выбор: bash, cpp, cs, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, tex).