First Look into HTML6 with Examples and Resources

AD

We hadn’t even mastered HTML5 yet and W3C is already rolling out initial versions HTML6. And we are not fooling you. It is coming out, so once again it is time get our hands dirty. Forget HTML6 release date and let’s get down coding in HTML6.

HTML6 is so new that even Wikipedia doesn’t have its page yet. It is still at the absolutely initial stages but we are in a position to figure out what it is, where will it lead us and how will we be coding it. Let’s get get a quick HTML6 overview.

Just like HTML5, the new version of HTML is coming with significant code structure differences. The new version is more standardized, more similar to XML and more suited for building web apps for the future.

I have a list of free HTML5 resources like templates, cavas, developers kit etc. here

New Coding Structure

HTML6 coding design

Image courtesy of Web Design Indonesia

CSS tricks proposed a list of suggested code additions for HTML6 a couple of years ago. W3C listened but they replied in a unique fashion. They added the mother of all those proposals. They added XML-like namespaces… and this is the most visible change in HTML6.

This changes the whole coding structure, but it standardizes it to a whole new level. Now you don’t have to ID your divs, you can use namespaces.

HTML6 examples

<div id=’container’> can now become <container>

Let’s check how these namespaces in action.

<!DOCTYPE html>
 <!-- Notice how <html> turns into <html:html> -->
 <html:html>
 <!-- Obviously, the <head> tag also changes, so do the rest of codes. -->
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 <html:meta type="description" value="HTML6 namespaces example">
 </html:head>
 <html:body>
 <!-- Anchor text example -->
 <html:a href="http://www.designzzz.com">Go to Designzzz!</html:a>
 <!-- Image example -->
 <html:media src="img/logo.jpg" type="image">
 <!-- Video example. You can include any video. -->
 <html:media src="videos/slides.mov">
 <html:button>Click Here</html:button>
 </html:body>
 </html:html>

Here’s an example of finalized code.

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>Overview of HTML6</html:title>
 <html:meta type="title" value="Designzzz.com">
 <html:meta type="description" value="HTML6 namespaces">
 <html:link src="css/mainfile.css" title="Styles" type="text/css">
 <html:link src="js/mainfile.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="/img1">a1</a>
 <html:a href="/img2">a2</a>
 <html:a href="/img3">a3</a>
 </nav>
 </header>
 <content>
 <article>
 <h1>Main Heading</h1>
 <p>[...]</p>
 <p>[...]</p>
 </article>
 <article>
 <h2>Concepts of HTML6</h1>
 <h2>Namespaces in HTML6</h2>
 <p>[...]</p>
 </article>
 </content>
 <footer>
 <copyright>Your copyright notice.</copyright>
 </footer>
 </html:body>
 </html:html>

That’s the future of HTML attributes.

HTML6 Free Resources

I don’t know why but people have been joking around with HTML6 resources. We have already mentioned the April Fool’s day post in the beginning of the article, another guy has made an HTML6 boilerplate which is also a joke.

But not everything is a joke! Here’s free tool for testing your browser with HTML6.

I tested both my browsers. The latest version of Firefox scored 429 and the latest version of Google Chrome scored 523.

HTML6 Browser Test

HTML6 Distributed Specification guide is another valuable resource if you want to learn the coding concepts of HTML6 in-depth.
I have observed that this distributed specification guide is being regularly updated that’s why I’m including it.

HTML6 Distributed Specification

Where are heading?

What seems clear to me is that HTML6 is moving towards killing JavaScript. They have already proposed single-page web apps without JavaScripts that’s only the tip of the iceberg.

Namespaces make it clear that in a few years, the HTML6 will mature into a dedicated programming specialization, and will surpass PHP, .net and such other languages in terms of functionality and complexity. So my advice is that you should start working on HTML6 immediately and make it your slave. Now is the time to do it while everyone isn’t paying attention.

That’s all I have about HTML6 at the moment. But I will keep updating you updated as W3C rolls out updates in this version of HTML.

create free website wix below post

Further Related Readings

Comments
  1. Eugene May 13, 2015 at 10:48 pm

    I like this direction with html6. We should have stopped using the generic divs a long time ago.

    1. Ayaz Malik May 14, 2015 at 9:55 am

      Well Yes you are right Eugene, first we dropped tables, now divs.. Lets see what’s next

  2. jamshid May 14, 2015 at 4:28 am

    I’m a beginner so what kind of books can you recommend me? I will be grateful for any help you can provide.
    Thank you in advance.

    1. Ayaz Malik May 14, 2015 at 10:00 am

      Hi Jamshid,
      For beginners i suggest you head to http://www.w3schools.com/ and play around.

  3. jamshid May 14, 2015 at 10:30 pm

    thank you Ayaz Malik

  4. Rommel Castro May 15, 2015 at 10:37 am

    do you know that your article was written on april fools day?
    you should do some research before write a post! it’s really sad to find this kind of things

    1. Tayyub May 16, 2015 at 5:55 pm

      for heaven’s sake Mr. Castro!
      The writer says “We are not fooling you” and he linked the words “fooling you” to the april fools joke.
      Then, in the next section he says “We have already mentioned the April Fool’s day post in the beginning of the article, another guy has made an HTML6 boilerplate which is also a joke [links to another joke].
      But not everything is a joke! Here’s free tool…

      The writer did his part of the research and clearly mentioned that they are jokes. You should READ the article before posting a negative comment.

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyrights © 2016 - Designzzz. All Rights Reserved