Page Title

Release on October 28^th of 2014 HTML5 has been with us for some time now and many people are looking forward to HTML6 and what the possibilities may include. In this article we look at some of the more popular predictions by several software providers and magazine writers.

Well, HTML5 has been great, for creating interesting webpages and enhanced graphics and especially with CSS3, it allows usage of JQuery API’s and many more. Lot of new tags came in like <header>, <footer> and <nav>. Lots of new functionalities came in like geolocation or drag and drop API’s and enhanced local storage. Developers and designers have used above features extensively to create new applications as well as lot of migration has also happened.

But the rate at which the technology is speeding up had never been this fast. A graphic designer or a web developer has to update themselves every now and then. So knowing one technology well is good but not the requirement of time, instead ability to grasp quickly is the key!!!

untitled

So here I would like to peek into what possibly to expect from html6, and what is being talked about of the same.

Concept of sponsored/User Defined Tags
An easy to use and express tag, a better mark-up technique is one of the features. For e.g. <div> tag has been used with multiple id’s like a wrapper or container, instead of marking up specifically by rules, you can mark it as <wrapper> or a <container> directly. Imagine using tags like <logo></logo> to mark up your logo or using <breadcrumb></breadcrumb> or <toolbar></toolbar> and you can define all these tags using CSS4.

Basically, this concept is like HTML with namespaces like XML, so HTML is used to customized tags. Entities/organizations can register and sponsor tags. This kind of mark-up will eventually provide complete independence to designers and developers.

html6-and-css4

Requirements and Results
Latest versions of browsers will be required or even an update for all browsers will pop in, once html6 is in the picture. Security will be enhanced, peer to peer file transfer will be enabled and many such features will come into play. As for the output quality, security and coding techniques provide quicker and better graphical web pages or applications.

At Azilen we explore and innovate, and one of the definite area which looks like it is expanding from HTML5 to a more evolved web technology!!

Here is an example of HTML6

  <!DOCTYPE html> 
    <html:html> 
        <html:head>
         <html:title>This Section is written in 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>
 <twitter><sarcasm>Blessed are the 
 poor in spirit, for theirs is the kingdom of heaven.</sarcasm></twitter> 

             <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 © to Anonymous 2014</copyright> 
  </footer> 
 </html:body>

Here is an example of CSS4

               **CSS4**

**picture**{
scale:proportionally;
color-ehancement:brighter;
quality-enhancement:high;
load-optimizer:fast;
}

**responsive**{
mobile[240px, 320px, 480px, 640px]: respond;
desktop[960px, 1024px, 1200px, 1600px]: respond;
fitted: true;
}

**social > facebook**{
background-color:fb-color;
hint: ‘Like us on facebook’;
hint-popup: top; /*This will have right, left,
 top and bottom*/
hint-color: #fff;
hint-bg: #000;

}

**translate**{
lang: ‘french’; /*It will support other languages
 like - Portuguese, German, Greek, Latin, Arabic,
  etc*/
}

**list**{
type: ul; /*You can also set the value to ol*/
bullet: disc; /*You can also set to square, circle,
 etc.*/
}

**link**{
color: red;
hover: black; /*No more something like a:hover*/
}

**info**{
/*This will have normal css styling like color,
 font-size, etc, but it will have a special styling
  by default.*/
}

**page**{
/*This will have normal css styling like width,
 border, background, etc.*/
}

**logo**{
place: left; /*the value can be set to right or
 center. Left is the default value*/
}

**paint**{
style: splatter; /*This will have values like:
 splash, smooth, rough, zigzag, etc*/
color-mixture: red + yellow; /*You can mix multiple
 colors as long as you mix them with + sign*/
}

How well does your browser support html6? Check Now

HTML6 and CSS4