HTML.next or ideas for HTML6

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

New elements of semantics

<decompress>

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. The advantages of this approach are: web browser access to files from ZIP, reduced bandwidth requirements (which is especially important for mobile platforms).

Example of use:

<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"> 

Semantics for headings and authors

It is used to identify titles of books, blog posts, films, etc., with their respective authors, even if the markup covers only a few paragraphs. This semantics can be implemented in the form of pseudo-markup and define relationships between elements.
')
Example:

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

<location>

This element (by analogy with <time />) is used to designate geo-information. It is proposed to use with the attributes lat, long, altitude:

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

<teaser>

Designed to wrap a block with content that has a link into a more complete block. We see similar structures everywhere: in search results on the first pages of blogs, a block resume with (or without) any media resource, and so on. In general, it should be a sectional element, which can be located in other sectional elements, such as navigation pages:

 <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> 

The advantages of using this element:

• description of common, frequently used structures in HTML
• helps to optimize search engines and control components, since different widgets can use this structure in different ways
• it is not necessary to participate in the mechanism of numbering lists
• can be used with anchors to create quick toC
• works well in blogs, which in HTML5, apparently, taken as the basis for content sharing

Forms

Automatic writing in input-forms in capital letters

Semantic description of the type of data that will be recorded in the field. Such an attribute will allow the browser to provide the user with a better interface for entering textual information.

For example:

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

By specifying the autocapitalize = “words” tag, the browser will write each new word with a capital letter. Relevant for the fields specify the name, for example. "Vasya Pupkin".
By specifying the autocapitalize = "characters" tag, the browser will write each character with a capital letter. Actual for abbreviations.

More details here .

Improved Forms Authentication

Today, most browsers have heuristics that determine that the page has forms of authentication, 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 handle scripts and improve interaction.

Localization of controls

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

Multimedia

Adaptive Images

Loading of different sizes of images depending on the current parameters on the client side ( details ).

Adaptive streaming

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

There are a number of different adaptive streaming formats (just like there are a number of different progressive media formats for downloading content). In many cases, streaming content is required to stream protected content. Current HTML5 media elements support selection from various formats. However, there are some aspects of adaptive streaming and protected content that require improvements in HTML to be shared. In particular, they include:

• an additional status media element that allows you to display the current status (eg coordination of data transfer with the server)
• additional media element of errors (eg transfer negotiation error)
• additional media element of the event (eg changing the bitrate of the stream)
• an additional media element of properties (for example, the current bit rate, which may be associated with other QoS indicators)

Audio Balance

Adjust audio balance (right / left channel) using HTML5 for stereo tracks.

Video playback enhancement

• fast / slow play / rewind
• previous / next frame

Fullscreen mode and screenshots

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

Text Editing

Element <editr>

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

<textarea type = '' wysiwyg ''>

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

Estimated list of supported items:

• 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 text and HTML from / to the system buffer (connected by an attribute)
• should not support inline styles
• may have the attribute content-style = "some.css", which defines the styles of elements within 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.

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

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 the frameworks and tools user interface components.

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. It is proposed to work in the same way with CSS. This behavior is similar to the "chains" of events in jQuery.

include ('' url '');

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

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

JavaScript: namespace and classes

JavaScript code is becoming more and more complex. Multiple libraries can be used on the same page, and the lack of namespaces (as well as classes) is becoming more and more troublesome for web developers. More information about the need for such an approach can be found on web-dev.info .

Syntax highlighting for <cod> elements

Considering the fact that browsers already have HTML, JS and CSS parsing tools, it would be nice to have native support for syntax highlighting without having to parse the code on the client side with JavaScript. For a start, the above languages ​​would suffice, others can be added by connecting the appropriate CSS.

Habr's users must have immediately made an analogy with the <surce> tag used by the local editor, which in this case could be abolished.

 <source lang=""></surce>    ( : bash, cpp, cs, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, tex). 

More ideas from developers in the form of a bug list can be found here .
We write our ideas of what you think would be appropriate in HTML.next.