Ideas for HTML6 or HTML.next

The idea of ​​HTML6, despite the fact that the HTML5 specification on the plan had to be fully implemented and achieve maximum compatibility by 2014, now thoughts about what the next generation of this specification might look like - HTML.next, as it is usually called in W3C consortium.

New semantic elements

<decompress>

This element was proposed to integrate files from a ZIP archive (ZIP format as the main one, but others are also possible) directly into the web page. The advantages of this approach are: browser access to ZIP files, reduced bandwidth requirements (which is especially important for mobile platforms).

Usage example:
')

<decompress href="http://example.com/mobile/familyreunion.zip"> <a href="familyreunion.zip/html/activities.html">   </a> <img src=""> 

Semantics for describing headings and authors

This is used to find out the title of books, blog entries, films, and so on, before the authors associated with them, even if the markup applies only to a few paragraphs. This semantics can be implemented as pseudo-tags and define relationships between elements.

 [title:   id:praise by:junichiro] — ,  [author:   id:junichiro]  …  .. 

<location>

This element (similar to <time />) is used to describe geographic information. For it is proposed to use the attributes: lat, long, altitude:

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

<teaser>

The element is intended for wrapping a block with content that has a link to the full block. We can see such structures anywhere: in the search results on the first page of the blog, in the block with resumes with media resources (or without) and so on. In general, it should be a sectional element that can be nested in other sectional elements, such as a navigation page:

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

Advantages of using this item:

• description of common commonly used structures in HTML
• allows you to optimize search engines and control components, because different widgets can use this structure in different ways
  
• no list numbering mechanism is required
  
• can be used in combination anchors to create a quick table of contents
  
• Apparently, it should work well in HTML5 blogs, if you take it as a basis for sharing content
  

Forms

Auto-write with capital letters in form fields

Semantic description of the type of data that will be recorded in the form field. Thanks to this attribute, the browser can provide the user with a more convenient interface for entering text.

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

autocapitalize = “words” means that each new word will begin with a capital letter. This is useful for fields where you need to specify names, for example. "John Doe." autocapitalize = "characters" means that each character will be written with a capital letter. This is useful for abbreviations.

Improved authentication forms

Today, most browsers have heuristics that determine that the page has a form of authentication, password changes, etc. Often, these heuristic algorithms do not always work correctly. Adding notes to forms and fields allows browsers to more accurately handle scripts and improve communication.

Control localization

Developers often lack the ability to localize controls, such as: the “Browse” button in the /> fields, controls to set the date / time

Multimedia

Adaptive Images

HTML6 provides the ability to upload images of different sizes, depending on the current settings on the client side.

Adaptive Streaming

There are a number of different adaptive streaming formats (as well as several different progressive media formats for downloading content). In many cases, we need to stream some protected content. Currently, multimedia elements in HTML5 support a variety of different formats. However, there are certain aspects of adaptive streaming and protected content that require improved HTML capabilities for widespread use. In particular, they include:

• Additional media element for the state, which allows you to display the current state (eg synchronization of data with the server)
  
• additional media element for errors (eg transmission error)
  
  
• additional media element for events (eg change in flow rate)
  
  
• additional media element for properties (eg current speed, which is associated with other indicators of QoS)
  
  

Sound balance

Adjust the sound balance (right / left channel) for tracks with stereo sound using HTML5.

Improve video playback

• fast / slow motion / fast forward
  
  
• previous / next frame
  
  

Fullscreen mode and screenshots

Here is an example of how we can handle the full screen and getting screenshots:

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

Text editing

Element <editr>

This item allows you to save typed text.

<textarea type = ”wysiwyg”>

Main goal: WYSIWYG editor for structured (semantic) text. Intended use: blogs, emails, editing articles on CMS sites, etc. Sample list of supported items.

• block : p, ul / li, ol / li, dl / dt / dd, blockquote, pre
  
• lowercase : strong / em / a / sup / sub / u / code / strike
  
• line block : img, br
• tabular: table / tr / th / td
  

Opportunities:

• support for copying / pasting images from / to the system clipboard (linked by attribute)
  
  
• support for copying / pasting text and HTML from the system clipboard and back (via the attribute)
  
• should not support inline styles
  
  
• may have the attribute content-style = "style.css", which defines the style element in the editor
  
  

Copy / Paste Features

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

Lorem Ipsum Dolor sit et cetera

Lorem Ipsum Dolor sit etc

( approx. transl. On the website of the original article in the left part of the list there are no markers. I did not find here how to remove them )

If you copy the “Dolor” item and paste it into a plain WYSIWYG text editor, you will get “3. Dolor ”without having to copy the item number.

Components and ECMAScript

"Behaviors" or dynamic subclasses of DOM elements

This feature is very useful for user interface component structures and tools.

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

“Behaviors” is a set of methods assigned to all elements that correspond to the selector in the declaration. When an event is triggered on an element, it calls the corresponding function. Similarly, the proposed work with CSS. This behavior is similar to the "chain" of events in jQuery.

include ('url');

Many programmers who are used to writing in C ++, PHP, etc., do not have enough of this feature. To preserve modularity, it is recommended to use the connection of external files as follows (works in a similar way as 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 the same page, and the lack of namespace (and classes) is becoming an increasingly serious problem for developers.

Selection syntax for <code> elements

Given that browsers already have HTML, JS, and CSS parsing tools, it would be nice to have built-in support for the selection syntax without having to parse the client-side code using Javascript. To begin with, all the languages ​​listed above would suffice, while others could be added by connecting the appropriate CSS.