HTML6 Идеи и HTML.Следующий

Понятие HTML6, несмотря на то, что спецификация HTML5 планировалось полностью принять и достичь максимально широкой совместимости в 2014 году, теперь стали появляться идеи о том, как выглядит эта спецификация следующего поколения — HTML.next, как это обычно упоминается в W3C-консорциум.

Новые элементы семантики

<Dеcompress>

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

Пример использования:

Семантика для описания названий и авторов

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

[title: The praise of Shadow id:praise by:junichiro] 
is a book written by [author: Junichiro Tanizaki id:junichiro] 
explaining … etc.

<Lоcation>

Этот элемент (аналог <time />) используется для описания геоинформации. Предлагается использовать атрибуты: широта, долгота, высота:

<location lat=27.9 long=-71.3 altitude=-100>The Bermuda Triangle</location>

<Tеaser>

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

<nav>
  <teaser>
    <header>
      <h1><a href="http://www.example.com/myFirstPost.html">My First Post</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.example.com/myFirstPost.html">http://www.example.com/myFirstPost.html</a></div>
    </footer> 
  </teaser>
  <teaser>
    <header>
      <h1><a href="http://www.example.com/mySecondPost.html">My Second Post</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.example.com/mySecondPost.html">http://www.example.com/mySecondPost.html</a>
      </div>
    </footer> 
   </teaser>
</nav>

<form>
  Name: <input name="name" autocapitalize="words">
  State: <input name="state" autocapitalize="characters">
</form>

domElement.fullScreen(); 
domElement.getImageData(0, 0, domElement.offsetWidth, domElement.offsetHeight);

Редактирование текста

Элемент <editоr>

Этот элемент позволяет сохранить набранный текст.

<tеxtarea type = ”wysiwyg”>

Основная задача: WYSIWYG-редактор для структурированного (семантического) текста. Использование по назначению: блоги, электронные письма, редактирование статей на сайтах CMS и т. Д. Примерный список поддерживаемых элементов:

• блоки : p, ul / li, ol / li, dl / dt / dd, blockquote, pre
• пролеты : сильный / EM / A / SUP / Sub / U / код / ​​забастовка
• встроенные блоки : img, br
• таблицы: таблица / tr / th / td

Особенности:

• поддержка копирования / вставки изображений из / в системный буфер обмена (связанный по атрибуту)
• поддержка копирования / вставки текста и HTML из / в системный буфер обмена (связанный по атрибуту)
• не должен поддерживать встроенные стили
• может иметь атрибут content-style = «style.css», задающий стиль элементов в редакторе

Особенности копирования / вставки

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

<ol>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>sit</li>
    <li>et cetera</li>
</ol>

Если вы копируете элемент «Dolor» и вставляете его в обычный текстовый редактор WYSIWYG вместо простой записи без необходимости получать номер элемента «3. Dolor».

Компоненты и ECMAScript

«Поведения» или динамические подклассы элементов DOM

Эта функция очень полезна для каркасов и инструментов компонентов пользовательского интерфейса.

document.behaviors["ul.some>li"] = { // the behavior class:
  attached: function() {...},
  detached: function() {...},
  onmousedown: function() {...}, 
  onclick: function() {...}, 
  ...
};

«Поведения» — это набор методов, которые назначаются всем элементам, которые соответствуют селектору в объявлении. Когда элемент получает событие, он вызывает связанную функцию. Также предложено работать с CSS. Это поведение похоже на «цепочку» событий в jQuery.

window.include("url"[,mime/type])

avaScript: пространство имен и классы

JavaScript-код становится все более сложным. На одной и той же странице может использоваться несколько разных библиотек, и отсутствие пространств имен (и классов) становится все более проблематичным для веб-разработчиков.

Подсветка синтаксиса для элементов <cоde>

Учитывая тот факт, что в браузерах уже есть инструменты парсинга HTML, JS и CSS, было бы неплохо иметь встроенную поддержку подсветки синтаксиса без необходимости разбора кода на стороне клиента с помощью Javascript. Для начала было бы достаточно всех перечисленных выше языков, другие можно добавить, подключив соответствующий CSS.