Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

What You Can Expect from HTML6

DZone's Guide to

What You Can Expect from HTML6

I think it’s the perfect time to take a look at what HTML6 has to offer.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

 Despite the fact that HTML5 is the most comfy and simple web development language, we still could not call it a truly semantic markup. No doubt HTML5 has given us some very exciting features - like offline local storage, audio/video support, the ability to optimize websites for mobile devices and many more - but it’s indeed not worth distributing because of being yet so far from perfection.

Accept it or not, most of the things in HTML5 are still new to implement, but developers who are working with HTML5 for a long time always see room for improvement. They often ask: What’s next? Well, obviously, it would be HTML6: the sixth revision of HTML. Though HTML6 is yet to revolutionize the web development world, but the work on its specifications has already started. So I think it’s the perfect time to take a look at what HTML6 has to offer.

A Look into the Concept of HTML6

Where HTML5 gave us significant tags like <header>, <article>, <section> etc for better content organization, on the other hand, HTML6 is a unique combination of standard HTML and XML like namespaces. To put it simple, the sixth revision of HTML gives developers the ability to express tags. For example, you’ll now have the ability to use tags like <logo></logo> to assign a logo, or use <toolbar> </toolbar> tag and so on. Even, you don’t need to have multiple ID's such as container or wrapper in a div tag. That means, instead of using <div id=wrapper’> or <div id=container’>, you can directly use <wrapper> or <container>.

In a nutshell, HTML6 allows you to use tags that you prefer instead of using only the defined tags. Let’s take a look at following example of a HTML6 document:


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title>HTML6 Example</html:title>

<html:meta type="title" value="Title">

<html:meta type="description" value="HTML with XML like namespaces">

<html:link src="css/main.css" title="Styles" type="text/css">

<html:link src="js/main.js" title="Script" type="text/javascript">

</html:head>

<html:body>

<header>

<logo>

<html:media type="image" src="images/logo.png">

</logo>

<nav>

<html:a href="/wordpress">WordPress</a>

<html:a href="/responsive">Responsive</a>

<html:a href="/javascript">JavaScript</a>

</nav>

</header>

<content>

<article>

<h1>Heading</h1>

<h2>Sub-heading</h2>

<p>[...]</p>

<p>[...]</p>

</article>

<article>

<h1>Understanding the Concept of HTML6</h1>

<h2>HTML6 basics</h2>

<p>[...]</p>

<html:media src="videos/html6-introduction.mp4">

<p> Fundamentals of HTML6 </p>

</article>

</content>

<footer>

<copyright>This site is © to Anonymous 2015</copyright>

</footer>

</html:body>

</html:html>

If you go through the above sample of HTML6, you'll find some weird <html:x> tags that are namespaces having the same structure like XML. These elements start out the browser events and belong to HTML6 specifications and W3C. For instance, the <html:title> element makes changes to your web browser’s title bar while the <html:media> element makes a media file appear in your browser. Using these namespace elements, not only you can make your code semantically correct but also can add several exciting features to your website.

HTML6 APIs

Tags in HTML6 have the namespace elements like <html:html>, <html: head> or <html:title> etc. Let's go through each tag attributes mentioned in the above example code one by one.

<html:html>

Equivalent to the current <html> tag, this tag is used to begin a document in HTML6. For instance:


 <!DOCTYPE html>

<html:html>

<!-- Rest of the HTML code -->

</html:html>

<html:head>

This tag attribute is equal to the <head> tagin HTML5. The main purpose of this tag is to get scripts and data, like CSS, JS, RSS feeds etc, which affect how the content would be displayed within the <html:body> tag. For example:


 <!DOCTYPE html>

<html:html>

<html:head>

<!-- Main content -->

</html:head>

</html:html>

<html:title>

This tag is similar to the <title> tag written in previous HTML versions and responsible for changing the HTML document’s title.


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

</html:head>

</html:html>

<html:meta>

This tag is a little bit different from the <meta> tag that you use in HTML5. Unlike HTML5, there is no need to use the standard meta types in HTML6. Taking advantage of this HTML6 tag, you can use any kind of meta data. Enabling developers to store content, this tag helps them grab useful information like description of a web page.


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

<html:meta type="title" value="Title">

<html:meta type="description" value="HTML with XML like namespaces">

</html:head>

</html:html>

<html:link>

This tag is equal to the <link> tag and lets you link external scripts and documents to the HTML document. It contains following attributes:

  • href: Link to the source file.
  • charset: "UTF-8" character encoding.
  • type: MIME type of the document.
  • media: Type of the device used to run an item.

Example:


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

<html:link src="css/main.css" title="Styles" type="text/css">

<html:link src="js/main.js" title="Script" type="text/javascript">

</html:head>

</html:html>

<html:body> 

Similar to the current <body> tag, this tag defines the body of an HTML document. This is where you place your website's stuff, like text, images, videos etc, which is visible to the users.


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

</html:head>

<html:body>

<!—Your website’s stuff-->

</html:body>

</html:html>

<html:a>

This tag is equal to the <a> tag that you’re using in the current version of HTML, with the only difference that it takes only one ‘href’ attribute to direct the link or anchor to a web page. For example:


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

</html:head>

<html:body>

<html:a href=" http://www.google.com ">Visit Google</html:a>

</html:body>

</html:html>

<html:button>

Using the <html:button> tag, you’ll be able to generate a button through which a user can interact with a page on your site. Similar to the <button> tag or <input type="button"> used in the earlier versions of HTML, this tag has one attribute called ‘disabled’.


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

</html:head>

<html:body>

<html:button>Press me!</html:button>

</html:body>

</html:html>

<html:media>

The <html:media> tag encapsulates all the <media> tags like <audio>, <video>, <img>, <embed>, and so on. Using this tag, you don’t need to specify a tag for each file type. The browser will automatically know how to run a media file, either by the type attribute (if available) or by the MIME type or by making a guess on the ground of the file extension.

Example:


<!DOCTYPE html>

<html:html>

<html:head>

<html:title>HTML6 Example </html:title>

</html:head>

<html:body>

<header>

<logo>

<html:media type="image" src="images/logo.png">

</logo>

</header>

<!—You don’t need to specify a type for a video -->

<html:media src="videos/html6-introduction.mp4">

</html:body>

</html:html>

HTML6 Forms API

In HTML6, Forms will have their own API so that the development on forms could not affect the entire HTML document. Let’s go through Forms tags specified in HTML6.

<form:form>

You can use this tag to create a new form in HTML6. It takes two attributes, method (which can be POST or GET) and action. The method attribute will send the form data to the server while the action will tell the form where the data should be sent. By default, the action attribute is the current page and the method is set to GET. For instance:


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

</html:head>

<html:body>

<form:form method="post" action="/sendmail">

<!-- Form inputs and other stuff-->

</form:form>

</html:body>

</html:html>

<form:input>

The <form:input> tag can be used to create a new form input where a user can enter inputs like email, url, text, date, month, password, file etc. Possible attributes on an input are autofocus, placeholder, novalidate, disabled, name, readonly and required. Example:


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

</html:head>

<html:body>

<form:form method="post" action="/sendmail">

<form:input type="email" placeholder="contact@yoursite.com" autofocus required>

</form:form>

</html:body>

</html:html>

<form:select>

This tag, which is very close to the <select> tag in HTML5, allows users to choose from predefined values such as calendar, color picker, and range etc instead of input anything. For example:


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title>HTML6 Example </html:title>

</html:head>

<html:body>

<form:form method="post" action="/scheduler">

<html:select type="calendar" name="calendar" range="01/02/15-05/04/15">

</form:form>

</html:body>

</html:html>

<form:status>

Using this tag, you can give feedback or a status update to your website visitors. Similar to the <meter> and <progress> tags that you use in HTML5, the <form:status> tag proves to be quite useful to show an upload progress bar or steps in a form having multiple pages.


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

</html:head>

<html:body>

<form:form method="post" action="/upload">

<form:status type="progress" max="100" value="30">

</form:form>

</html:body>

</html:html>

<form:label>

The <form:label> tag lets you label inputs for users. It links text to an input and focuses on the linked input when a user clicks. The for attribute works for the <form:label> tag, which must match to the ID of a form element.

Example:


<!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

</html:head>

<html:body>

<form:form method="post" action="/login">

<form:label for="username">Username</form:label>

<form:input id="username" name="username">

<form:label for="password">Password</form:label>

<form:input id="password" name="password" type="password">

</form:form>

</html:body>

</html:html>

<form:submit>

The <form:submit> tag is equivalent to the <input type="submit"> tagin HTML5 and can be used to create a button that a user can utilize to submit a form. This tag takes two attributes: name and value. For instance:


 <!DOCTYPE html>

<html:html>

<html:head>

<html:title> HTML6 Example </html:title>

</html:head>

<html:body>

<form:form method="post" action="/login">

<form:label>Login</form:label>

<form:input name="username">

<form:input name="password" type="password">

<form:submit name="submit" value="submit">

</form:form>

</html:body>

</html:html>

Tag Types: An Overview

Like all preceding versions of HTML, there are two types of tags – single and double – in HTML6. The single tag has no text content. Instead, it only has attributes. For instance:


 <html:meta type="author" content="k63a">

<html:meta type="author" content="k63a" />

In the above example, both elements have the same interpretation. Unlike the double tag, the single tag doesn’t require a close tag. As double tags can have some text content, they have both open and close tags. In case a double tag has no text content, it can be shortened to the single variant that is self-closing. For example:


 <html:link href="./a.html">Text content</html:link>

<!-- This shortand... -->

<foo class="abc" />

<!-- ...means in fact this: -->

<foo class="abc"></foo>

About Author:-

Ajeet is a senior web developer at WordpressIntegration - where he is responsible for writing custom JavaScript code during PSD to WordPress theme conversion . In his spare time, he writes about different topics related to JavaScript, WordPress, and HTML5 to share his work experience with others. You can follow WordpressIntegration on Facebook .

Feature image designed by Freepik.com


Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
html5 ,html6 ,html ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}