HTML6 Ideas and HTML.Next
Join the DZone community and get the full member experience.
Join For Free
html6 notion, despite the fact that the html5 specification was planned to fully adopt and achieve the broadest possible compatibility in 2014, now began to appear ideas about how this specification of the next generation looks like – html.next, as it routinely referred to in the w3c-consortium.
new elements of semantics
<dеcompress>
this element is proposed for the integration of files from a zip-archive (zip format as the main, however others are possible too) directly into a web page. advantages of this approach: web-browser access to files from zip, reduction of requirements for bandwidth (which is especially important for mobile platforms).
example of use:
<decompress href="http://example.com/mobile/familyreunion.zip"> <a href="familyreunion.zip/html/activities.html">activities from our family reunion</a> <img src="familyreunion.zip/img/family.jpg">
semantics to describe titles and authors
it is used to identify the names of books, blog posts, movies, and so on to its associated authors even if the layout applies only for a few paragraphs. this semantics may be implemented as a pseudo-markings and define the relationships between the elements.
[title: the praise of shadow id:praise by:junichiro] is a book written by [author: junichiro tanizaki id:junichiro] explaining … etc.
<lоcation>
this element (similar to <time />) is used to describe geo-information. it is proposed to use the attributes: lat, long, altitude:
<location lat=27.9 long=-71.3 altitude=-100>the bermuda triangle</location>
<tеaser>
the element is designed to wrap the content block having a link to a complete block. such structures we can see everywhere: in the search results on the first page of the blog, resume block with (or without) media resources and so on. in general, it should be a sectional element that can be located in other sectional elements, such as navigation page:
<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>
the advantages of using this element:
- description of the general frequently used structures in html
- helps to optimize search engines and management components, because different widgets can use this structure in different ways
- it is not necessary to participate in the mechanism of lists numbering
- can be used in conjunction with anchors to create fast toc
- works well in html5 blogs, apparently, taken as a basis for separation of content
forms
automatic writing in input-forms with capital letters
the semantic description of the type of data to be recorded in the field. this attribute allows the browser to provide the user with a better interface for text entry.
<form> name: <input name="name" autocapitalize="words"> state: <input name="state" autocapitalize="characters"> </form>
the tag autocapitalize="words" means that each new word is written with a capital letter. this is actual for fields where you need to specify names, eg. “john doe”. the tag autocapitalize="characters" means that each character will be written with a capital letter. that is actual for abbreviations.
improved forms authentication
today, most browsers have heuristics that determine that the page has a form of authentication, password change, and so on. often these heuristic algorithms does not always work correctly. adding annotations to forms and fields allows browsers to more accurately handle scenarios and improve communication.
localization of controls
web developers often have a lack of ability to localize the controls, such as: the button «browse» to fields <input type=’file’ />, controls for setting the date/time
multimedia
adaptive images
html6 provides possibility to download images of different sizes, depending on the current settings on the client side.
adaptive streaming
there is a number of different adaptive streaming formats (as well as have a number of different progressive media formats for downloading content). in many cases, through streaming we need to transfer some protected content. the current html5 media elements support a choice of different formats. nevertheless, there are certain aspects of adaptive streaming and protected content that require improvements in html capabilities for general use. in particular, they include:
- additional media element for status, that allows you to display the current status (eg. synchronization of data with the server)
- additional media element for errors (eg. transmission error)
- additional media element for events (eg. change bitrate of a stream)
- additional media item for properties (eg. the current bit rate, which may be associated with other indicators qos)
audio balance
adjusting audio balance (right / left channel) with html5 for stereo tracks.
improving video playback
- fast / slow motion / fast forwarding
- previous / next frame
fullscreen mode and screenshots
here is example of how we can handle with fullscreen and obtaining of screenshotes:
domelement.fullscreen(); domelement.getimagedata(0, 0, domelement.offsetwidth, domelement.offsetheight);
text editing
element <editоr>
this element allows to save the typed text.
<tеxtarea type=”wysiwyg”>
the main objective: wysiwyg-editor for structured (semantic) text. intended use: blogs, emails, editing articles of cms sites, and so on. estimated list of supported elements:
- 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 copy / paste images from / to the system clipboard (connected by attribute)
- support copy / paste text and html from/in the system clipboard (connected by attribute)
- should not support inline styles
- may have an attribute content-style=«style.css», specifies the style of elements within the editor
features of copy / paste
the list presented on the left side of the table will be rendered as shown in the right part of the table.
|
|
if you copy the item ‘dolor’ and insert it into an ordinary wysiwyg text editor, instead of a simple recording without the need to get the item number “3. dolor”.
components and ecmascript
«behaviors» or dynamic subclasses of dom elements
this function is very useful for the user interface component frameworks and tools
document.behaviors["ul.some>li"] = { // the behavior class:
attached: function() {...},
detached: function() {...},
onmousedown: function() {...},
onclick: function() {...},
...
};
«behaviors»
is a set of methods that are assigned to all elements that match the
selector in the declaration. when an element receives an event, it
invokes the associated function. likewise proposed to work with css.
this behavior is similar to the “chain” of events in jquery.
include(‘url’);
for many programmers who are used to write in c ++, php, etc, did not quite have enough of such a possibility. to preserve modularity are encouraged to use the connection of external files as follows (works similarly to @import url(…) in css):
window.include("url"[,mime/type])
avascript: namespace and classes
javascript-code is becoming more and more complex. on the same page can be used several different libraries and the lack of namespaces (and classes) is becoming increasingly troublesome for web developers.
syntax highlighting for items <cоde>
given the fact that browsers already have the instruments of parsing html, js and css, it would be nice to have the native support for syntax highlighting without having to parse the code on the client side with javascript. for a start it would be enough all listed above languages, others can be added by connecting the appropriate css.
Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments