<html:html> <html:head> <html:title>HTML6 Sample</html:title> <html:meta type="title" value="Page Title"> <html:meta type="description" value="This is an example of HTML with namespaces"> <html:link src="css/main.css" title="Main Styles" type="text/css"> <html:link src="js/main.js" title="Main Script" type="text/javascript"> </html:head> <html:body> <header> <logo> <html:media type="image" src="images/logo.png"> </logo> <nav> <html:a href="/cats">Cats</a> <html:a href="/dogs">Dogs</a> <html:a href="/rain">Rain</a> </nav> </header> <content> <article> <h1>This is my main article head</h1> <h2>This is my sub head</h2> <p>[...]</p> <p>[...]</p> </article> <article> <h1>A cool video!</h1> <h2>Pay attetion to the media elements</h2> <p>[...]</p> <html:media type="video" src="vids/funny-cat.mp4" autostart controls> <p>Man, that was a stupid cat.</p> </article> </content> <footer> <copyright>This site is &copy; to Oscar Godson 2009</copyright> </footer> </html:body> </html:html>

Section 3 - The APIs

Section 3A - HTML API

All of the following tags in this API have the namespace html like: <html:title>

<html:html>

This begins a HTML document. Equivelent to the current <html> tag.

Sample:

<!DOCTYPE html>
<html:html>
  <!-- rest of HTML would go here -->
</html:html>
<html:head>

This begins an HTML's head. Equivelent to the current <html> tag. The tag contains data that isn't actually displayed (aside from the <html:title> which is displayed in browser's windows). Rather, it's purpose is to get data and scripts that affect the display of the content in the <html:body>. These scipts and other sources include things like JavaScript, CSS, RSS feeds, etc.

Sample:

<!DOCTYPE html>
<html:html>
  <html:head>
    <!-- Head content here, like the <html:title> tag -->
  </html:head>
</html:html>
<html:title>

This is the title of the HTML document. Equivelent to the current <title> tag. Browsers will use this for the tab bar, favorites, etc. and search engines will use this as the title of their links

Sample:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
</html:html>
<html:meta>

This is a bit different then the current HTML version. Meta data in HTML6 can be anything. Unlike HTML now, there are no required or non-standard meta types. Used to store content for you as a developer, or for other sites as a way to grab information such as a page description.

Sample:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
    <html:meta type="description" value="This is an example of HTML with namespaces">
  </html:head>
</html:html>
<html:link>

This links external documents and scripts such as CSS, JavaScript, RSS, favicons, etc. to the current document. Equivelent to the current <link> tag. This tag takes the following attributes:

Sample:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
    <html:link src="js/main.js" title="Main Script" type="text/javascript">
  </html:head>
</html:html>
<html:body>

This is the body of the HTML document. Equivelent to the current <body> tag. This is where you'd place most of the stuff that would be visible to the users like text, media, and so on.

Sample:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <!-- Your web page's content would go here -->
  </html:body>
</html:html>
<html:a>

This tag represents either an anchor on the page, or a link to another web page. Equivelent to the current <a> tag. The <html:a> tag takes one required attribute which is the href which directs the anchor or link where to go. For an anchor you'd use the syntax #id-of-element-to-link-to and for a link to another web page you'd simply insert the link like http://google.com.

Sample:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <html:a href="http://google.com">Go to google.com!</html:a>
  </html:body>
</html:html>
<html:media>

This tag encapsulates what we now have for media which are tags like <img>, <video>, <audio>, <embed>, and so on. Instead this is one tag to rule them all. Instead of a tag for each file type, the browser will just know how to run it by the "type" attribute, or will make a guess based on the file extension, or lastly, by the MIME type.

Sample:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <!-- Image -->
    <html:media src="images/logo.jpg" type="image">
    <!-- Video, shows you don't "need" a type -->
    <html:media src="videos/cute-cat.mov">
    <!-- Some made up format, browser will ignore if it doesn't know it -->
    <html:media src="misc/example.abc" type="abc">
  </html:body>
</html:html>

Section 3B - HTML Forms API

HTML Forms are separate from the HTML API to allow development on forms to not have to slow down for the entire HTML spec. Forms are constantly evolving with Sliders, color pickers, date and time pickers, progress bars and more. Forms really are sort of their own "thing" in HTML, so in HTML6 we've broken them into their own API.

<form:form>

This tag creates a new form. Has two attributes, "method" and "action". As with current HTML forms, method can be "POST" or "GET" (they can be lowercase too) and will send the form with that as the HTTP header. More details on GET and POST can be found at W3.org. The "action" attribute tells the form where to send the data. By default the "method" is set to GET and the "action" is the current page.

Sample:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/sendmail">
      <!-- Form inputs and stuff go here -->
    </form:form>    
  </html:body>
</html:html>

Section 4 - Using HTML6 Now

Section 5 - About the Author

Maybe this sounds like a good idea, maybe it doesn't, but it always helps to know who wrote something. I'm Oscar Godson (@oscargodson on Twitter) and I'm a JavaScript Engineer at Yammer. I previous worked at the City of Portland, OR to open up data and APIs for the public and moved the City to use more up to date technologies such as Git, MongoDB, PHPFog, and heavy JavaScript applications. I've also written JavaScript libraries, plugins, and extensions for people such as BatchGeo, Puppet Labs, and more. I consider myself a JavaScriptologist and I try to open source anything and everything I make on GitHub (http://github.com/oscargodson).

I've been working on and conceptualizing HTML6 for years now. I first wrote about it in 2009 on my old blog. I've ended up just creating JavaScript shims as they seem to be the best method of implementing HTML6 right now. I'd love to see this take off and see web developers creating a spec themselves and not just a couple of people from major companies throwing stuff together like CSS animations. That's always been my goal, so let's do it!