Kotofey December 20, 2011 at 14:33

HTML.next or ideas for HTML6

Despite the fact that it is planned to fully approve the HTML5 specification and achieve the widest possible interoperability only in 2014, ideas about how this next-generation specification should look like HTML.next, as it is called in the W3C consortium , are already starting to crystallize. .

New elements of semantics

This element is proposed to be used to integrate files from a ZIP archive (ZIP as the main format, others are possible) directly into a web page. Advantages of this approach: web browser access to files from ZIP, reduced bandwidth requirements (which is especially true for mobile platforms).

Usage example:

Activities from our family reunion

Semantics for headings and authors

It is used to identify the names of books, blog posts, films, etc. with their respective authors, even if the markup applies to only a few paragraphs. This semantics can be implemented in the form of pseudo-markup and determine the relationship between elements.

Example:

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

This item (similar to ) is used to indicate geo-information. It is suggested to use with lat, long, altitude attributes:

Бермудский треугольник

Designed to wrap a block with content with a link in a more complete block. We see such structures everywhere: in search results on the first pages of blogs, a block resume with (or without) some kind of media resource, etc. In general, this should be a sectional element, which can be located in other sectional elements, such as navigation pages:

My First Cool Article
This is my first article on the page, and it's really cool.
3 Days Agohttp://www.myserver.com/myFirstCoolArticle.htmlMy Second Cool Article
This article is on superconducting fields, and is even cooler than my first article.
1 Days Agohttp://www.myserver.com/mySecondCoolArticle.html

Benefits of using this item:

Description of common, commonly used structures in HTML
contributes to the optimization of search engines and component management, as different widgets can use this structure in different ways
not necessarily participate in the list numbering mechanism
can be used with anchors to create fast ToC
works well on blogs that are apparently accepted as the basis for content sharing in HTML5

Forms

Automatic capitalization in input forms

A semantic description of the type of data to be written to the field. This attribute allows the browser to provide the user with a better interface for entering textual information.

For instance:


    ФИО: 
    State:

By specifying the autocapitalize = "words" tag, the browser will capitalize every new word. Actual for fields indicating the name, e.g. "Vasya Pupkin."
By specifying the autocapitalize = "characters" tag, the browser will capitalize each character. Actual for abbreviations.

More details here .

Enhanced Form Authentication

Today, most browsers have heuristics that determine that the page has authentication forms, password changes, and so on. Often these heuristic algorithms do not always work correctly. Adding annotations to forms and fields will allow browsers to more accurately process scripts and improve interaction.

Control Localization

Often, web developers lack the ability to localize controls, for example:
- “Browse” button for fields of type
- controls for setting the date / time

Multimedia

Responsive Images

Download of different image sizes depending on the current settings on the client side ( more ).

Adaptive Streaming

Work in this direction is already underway: Adaptive Streaming , Video Metrics .

There are a number of different adaptive streaming formats (just as there are a number of different progressive media formats for downloading content). In many cases, protected content is required to be streamed. Current HTML5 media elements support a choice of different formats. However, there are some aspects of adaptive streaming and secure content that require improvements in HTML for general use. In particular, they include:

additional media status element that allows displaying the current status (e.g. coordination of data transfer with the server)
additional media error element (e.g. transmission negotiation error)
additional media element of events (e.g. change in bitrate of a stream)
An additional media property item (e.g. current bit rate, which may be related to other QoS metrics)

Audio Balance

Adjusting the audio balance (left / right channel) using HTML5 for stereo compositions.

Video playback improvement

fast / slow play / rewind
previous / next frame

Full Screen and Screenshots

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

Text editing

Element

This element will allow you to save the typed text when clicking on the links.

Main goal: WYSIWYG-editing structured (semantic) text. Intended use: blogs, emails, editing articles from CMS sites, etc.

Estimated list of items to be supported:

blocks : p, ul / li, ol / li, dl / dt / dd, blockquote, pre
spans : strong / em / a / sup / sub / u / code / strike.
inline-blocks : img, br
tables : table / tr / th / td

Features:

support for copying / pasting images from / to the system buffer (connected by an attribute)
support for copying / pasting texts and HTML from / to the system buffer (connected by an attribute)
should not support inline styles
may have the attribute content-style = "some.css" that defines the styles of elements inside the editor

Copy / Paste Features

The list presented on the left side of the table will be rendered as shown on the right side of the table.

Lorem
Ipsum
Dolor
sit
et cetera

Lorem
Ipsum
Dolor
sit
et cetera

If you copy the item 'Dolor' and paste it into a regular WYSIWYG text editor, you should get “3. Dolor. "

Components and ECMAScript

“Behaviors” or dynamic subclasses of DOM elements

This feature is very useful for user interface components of frameworks and tools.

Example:

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

“Behaviors” are sets of methods assigned to all elements that satisfy the selector in the declaration. When an element receives an event, the associated function is called. In the same way it is suggested to work with CSS. This behavior is similar to jQuery event chaining.

include ('' url '');

For many programmers who are accustomed to writing in C ++, PHP, etc, this feature is sorely lacking. To preserve modularity, it is proposed to use the connection of external files as follows (works similarly to import url (...) in CSS):

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

JavaScript: namespace and classes

JavaScript code is becoming more and more complex. Several different libraries can be used on one page and the absence of namespaces (as well as classes) is becoming increasingly troublesome for web developers. You can read more about the need for this approach at web-dev.info .

Syntax highlighting for elements

Considering the fact that browsers already have HTML, JS, and CSS parsers, it would be nice to have native syntax highlighting support without the need for parsing client-side code using JavaScript. To start with, the above languages would be enough, others can be added by connecting the appropriate CSS.

Habr users probably immediately made an analogy with the tag, used by the local editor, which in this case could be eliminated.


Подсвечивает исходный код (на выбор: bash, cpp, cs, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, tex).

You can see even more ideas from developers in the form of a bug list here .
We are writing our ideas of what you think would be appropriate in HTML.next.

Tags: