What If? HTML6 - Generalized Concept

Dec 19, 2014
162
0

Everybody knows that HTML is a comfy web development language. Its fifth revision is considered the best and the most popular at the moment, however, the sixth version is coming, the work on its development has already started.

The most remarkable HTML5 features:

  • audio and video support;
  • offline local storage;
  • the ability to build mobile optimized websites;
  • the freedom from using type attribute from tags such as < link > and < script >;
  • with new tags like < article >, < section >, < header > etc., the developers got the possibility to organize content in a more relevant manner.

Nevertheless, HTML5 is still far from perfect (it can’t be called a truly semantic markup) and is in its development stage.

HTML6 Concept Review

To put it simple, the concept of HTML6 is in expressing the tags. For instance: say, you will be able to use tags like < logo > < /logo > for assigning a logo to your web page, or use tag < toolbar > < /toolbar >, use the < div > tag without multiple id’s such as a wrapper or container, and rather use < wrapper > or a < container > directly (instead of using < div id='container' > you can simply use < container >). This is what HTML6 is aimed for.

The sixth revision of HTML will have namespaces similar to XML structure. What is so good about XML namespaces? They will help you use the same tag without conflicting it with any other tag. For instance the one used in the XHTML DOCTYPE:

1
  xmlns:xhtml="http://www.w3.org/1999/xhtml"

HTML6 will allow us use the tags we want instead of the defined tags only.

HTML6 example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  <!DOCTYPE html>
<html:html>
    <html:head>
        <html:title>A Look Into HTML6</html:title>
        <html:meta type="title" value="Page Title">
        <html:meta type="description" value="HTML example with 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/xyz.png">
            </logo>
            <nav>
               <html:a href="/img1">a1</a>
               <html:a href="/img2">a2</a>
             </nav>
        </header>
        <content>
            <article>
                <h1>Heading of main article</h1>
                <h2>Sub-heading of main article</h2>
                <p>[...]</p>
                <p>[...]</p>
            </article>
            <article>
                <h1>The concept of HTML6</h1>
                <h2>Understanding the basics</h2>
                <p>[...]</p>
               </article>
        </content>
        <footer>
            <copyright>This site is &copy; to Anonymous 2014</copyright>
        </footer>
    </html:body>
</html:html>

Have you noticed some odd < html:x > tags? These are the namespaced elements that belong to the W3C and HTML6 spec, and will trigger browser events. Here is a simple example for better understanding: the < html:title > element will change the title bar of your browser and the < html:media > element will help make the defined image appear on your browser screen. All these elements are specifically defined for users and don’t have anything to do with the browser. They’re just hooks for JavaScript and style sheet and help to make your sample code more semantic.

HTML6 APIs

HTML6 tags will have the namespace html like < html:html > or < html: head > etc. Now we’ll have a look at each tag attributes used in the above HTML6 example document.

1
2
3
4
<!DOCTYPE html>
<html:html>// this is equivalent to <html> tag written in previous HTML versions
  <!-- sample of HTML document -->
</html:html>

< html:head >

This tag is a < head > tag’s equivalent. It is targeted on obtaining data and scripts that tweak how the content within the < html:body > tag is displayed.

1
2
3
4
5
6
<!DOCTYPE html>
<html:html>
  <html:head>
    <!-- Main content would come here, like the <html:title> tag -->
  </html:head>
</html:html>

< html:title >

As you can guess from the name, it will change the title of the HTML document. It is similar to the < title > tag used in earlier HTML versions. This tag is used by browsers for changing the title bar, favorites, and others.

1
2
3
4
5
6
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
</html:html>

< html:meta >

This tag differs from the < meta > tag used in the HTML5 version. This HTML6 tag can be used to sort the meta data. But unlike HTML5 you won’t have to use the standard meta types in HTML6. It helps to pile up the information (like webpage description) by storing content.

1
2
3
4
5
6
7
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
    <html:meta type="description" value="HTML example with namespaces">
  </html:head>
</html:html>

< html:link >

This tag is for external linking of documents and scripts (like CSS, JS etc.) to the HTML document. It’s similar to < link > tag in HTML5. This tag includes the following attributes:

  • charset: "UTF-8" character encoding;
  • href: contains link to your source file;
  • media: defines the kind of device on which your item will run (Smartphone, tablet, desktop, etc.);
  • type: the MIME type of the document.
1
2
3
4
5
6
7
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
 <html:link src="js/mainfile.js" title="Script" type="text/javascript">
  </html:head>
</html:html>

< html:body >

This is just like the < body > tag you’re using in the current HTML version. This is where all your website’s stuff (text, media and others) is placed.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
  <html:body>
    <!-- This is where your website content is placed -->
  </html:body>
</html:html>

< html:a >

This tag is similar to the < a > tag, which is used to represent a link to other web page. The difference is that unlike the < a > tag, < html:a > takes only a single ‘href’ attribute. It directs the link to the page you need to visit.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
  <html:body>
    <html:a href="http://siteurl">Go to siteurl.com!</html:a>
  </html:body>
</html:html>

< html:button >

This tag is equivalent to < button > tag or < input type="button" > used either in current or older HTML versions. It enables you to create a button for the user who wants to perform some interaction on your web page. It has one attribute disabled.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
  <html:body>
    <html:button>Click Here</html:button>
  </html:body>
</html:html>

< html:media >

This tag wraps up all the < media > tags (< img >, < video >, < embed >, etc.). Using < html:media > tag you don’t have to specify a tag for each of the file type. The < html:media > tag will be executed by the browser based on the type attribute (if provided), or it will just make a guess on the basis of file extension, or by the ‘MIME type’.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>A Look Into HTML6</html:title>
  </html:head>
  <html:body>
    <!-- Image would come here -->
    <html:media src="img1/logo.jpg" type="image">
    <!-- Video doesn't need a type -->
    <html:media src="videos/slide.mov">
  </html:body>
</html:html>

Tag types overview

Similar to the current and previous HTML versions, HTML6 will have two types of tags: single and double ones. Single tags won’t have any text content, only attributes. For example:

1
2
<html:meta type="author" content="z13a">
<html:meta type="author" content="z13a" />

Compared to the double tag, you don’t need to close your single tag. Double tags have opening and closing tag because they’ve got some text content. But, in the case double tags don’t have any text-based content; you can reduce it to the ‘self-closing single variant’. For example:

1
2
3
4
5
<html:link href="./a.html">Text based content</html:link>
<!-- This shortand... -->
<foo class="xyz" />
<!-- ...means in fact this: -->
<foo class="xyz"></foo>

Summing up

You are right, HTML6 isn’t available yet. But Oscar Godson has provided an idea of what it will be offering at the nearest future. This post is just a teaser that will make you wait impatiently for the HTML6 advent.

Our team is grateful to Mike Swan for the shared information.

HM
Helga Moreno
15
v Complain

Recommend this post to others!

Found the post interesting? You might also like:

Become the first to comment

Last Updated : Jul 17, 2019

Rating of post