DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

HTML6 Ideas and HTML.Next

Andrey Prikaznov user avatar by
Andrey Prikaznov
·
Feb. 27, 15 · Interview
Like (0)
Save
Tweet
Share
6.63K Views

Join the DZone community and get the full member experience.

Join For Free
html.next

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.

<ol>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>et cetera</li>
</ol>
  1. lorem
  2. ipsum
  3. dolor
  4. sit
  5. etc

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.

Element

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Too Many Tools? Streamline Your Stack With AIOps
  • Uplevel Your Managers With Mini-M Support Groups
  • Upgrade Guide To Spring Data Elasticsearch 5.0
  • Spring Cloud: How To Deal With Microservice Configuration (Part 1)

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: