Browse files

First push

  • Loading branch information...
0 parents commit 7d58a98b30fe473d5cc8a7ce335632e8ea228e7b @OscarGodson committed Jan 31, 2012
Showing with 375 additions and 0 deletions.
  1. +375 −0 index.html
  2. BIN malay.jpg
375 index.html
@@ -0,0 +1,375 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>HTML6 Spec Version 0.1</title>
+ <link rel="stylesheet" href="http://yandex.st/highlightjs/6.0/styles/zenburn.min.css">
+ <style>
+ @import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic);
+ wrapper {font-family: 'Sorts Mill Goudy', serif; line-height:1.45em; display:block;margin:0 auto;width:750px}
+ #main-img {margin:0 auto;display:block;}
+ #toc { list-style:upper-roman; }
+ #toc ol{ list-style:lower-roman; }
+ h1{font-size:55px;margin:30px 0 30px 0;padding:0;line-height:0;text-align:center;}
+ h2 {font-size:35px;margin:0 0 50px 0;padding:0;text-align:center;font-style:italic;}
+ h3 {font-size:20px;}
+ h5 { font-size:15px; }
+ h5 code { background:#efefef; display:block; padding:3px; border-radius:3px; }
+ pre code { border-radius:3px; }
+ code { overflow:auto; }
+ a { color:#c00; }
+ p code { background:#EFEFEF; }
+ h4 code {font-size:14px}
+ .sample {font-weight:bold;font-size:13px;}
+ </style>
+ </head>
+ <body>
+ <wrapper>
+ <img id="main-img" src="malay.jpg">
+ <h1>HTML6</h1>
+ <h2>The Spec That Brings Us Freedom</h2>
+
+ <h3>Table of Contents</h3>
+ <ol id="toc">
+ <li><a href="#introduction">Introduction</a></li>
+ <li><a href="#the-concept">The Concept</a></li>
+ <li>
+ <a href="#the-apis">The APIs</a>
+ <ol>
+ <li>
+ <a href="#html-api">HTML API</a>
+ <ol>
+ <li><a href="#html:html"><code>&lt;html:html&gt;</code></a></li>
+ <li><a href="#html:head"><code>&lt;html:head&gt;</code></a></li>
+ <li><a href="#html:title"><code>&lt;html:title&gt;</code></a></li>
+ <li><a href="#html:meta"><code>&lt;html:meta&gt;</code></a></li>
+ <li><a href="#html:link"><code>&lt;html:link&gt;</code></a></li>
+ <li><a href="#html:body"><code>&lt;html:body&gt;</code></a></li>
+ <li><a href="#html:a"><code>&lt;html:a&gt;</code></a></li>
+ <li><a href="#html:media"><code>&lt;html:media&gt;</code></a></li>
+ </ol>
+ </li>
+ <li><a href="#html-forms-api">HTML Forms API</a></li>
+ </ol>
+ </li>
+ <li><a href="#using-html6-now">Using HTML6 Now</a></li>
+ <li><a href="#about-the-author">About the Author</a></li>
+ </ol>
+
+ <h3>Section 1 - Introduction</h3>
+ <p>
+ HTML5 was a great leap forward for web developers. It gave us all kinds
+ of hip new tags like <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>
+ and <code>&lt;footer&gt;</code>. It also gave us slick new JavaScript APIs
+ like drag and drop, localStorage, and geolocation. Still, however, there
+ is a missing void that HTML5 has yet to fix and that void is <em>truly
+ semantic markup</em>.
+ </p>
+ <p>
+ Imagine being able to mark something up <em>the way you want</em> to mark
+ it up. Imagine changing <code>&lt;div id="wrapper"&gt;</code> to
+ <code>&lt;wrapper&gt;</code> or a better example, making a calendar like:
+ </p>
+ <pre><code><code>&lt;calendar&gt;
+ &lt;month name="January"&gt;
+ &lt;day&gt;1&lt;/day&gt;
+ &lt;day&gt;2&lt;/day&gt;
+ &lt;day&gt;3&lt;/day&gt;
+ &lt;!-- ...and so on --&gt;
+ &lt;/month&gt;
+&lt;/calendar&gt;</code></code></pre>
+ <p>
+ Even better yet, how about finally adding support for new types of media
+ by simply changing the media type rather than having to come up with whole
+ new tags for it like <code>&lt;img&gt;</code>, <code>&lt;embed&gt;</code>,
+ <code>&lt;video&gt;</code>, <code>&lt;audio&gt;</code>, and so on?
+ For example, wouldn't it be nice to just simply do:
+ <code>&lt;html:media src="my-audio-file.aac" type="aac"&gt;</code>
+ and let the browser deal with how to render it?
+ </p>
+ <p>
+ The web is moving towards a giant app store and we need to embrace it.
+ The markup we use shouldn't work against us, it should work <em>for us</em>.
+ This spec is to do just that. To finally break free of fatuous rules and
+ standards and to give us, developers, total freedom to code as we please
+ bringing the web a more semantic, clean, and human readable markup.
+ </p>
+ <p>
+ Now, without further adieu, let me introduce you to HTML6.
+ </p>
+ <h3>Section 2 - The Concept</h3>
+ <p>
+ HTML6 is conceptually HTML with XML like namespaces. If you don't know XML,
+ or don't know what XML namespaces are they're basically a way to allow you
+ to use the same tag without it conflicting with the a different tag.
+ You've probably actually seen one before in the XHTML DOCTYPE:
+ <code>xmlns:xhtml="http://www.w3.org/1999/xhtml"</code>
+ </p>
+ <p>
+ In HTML6 we take advantage of this ingenious concept by giving us freedom
+ to use whatever tag we want by the W3C reserving <em>namespaces</em> and
+ not <em>tags</em>. The W3C would basically reserve the right to all
+ namespaces, and each namespace they reserve will trigger a different HTML
+ API.
+ </p>
+ <p>
+ <em>So, what does this look like?</em> Below is an example of a full HTML6
+ document. We'll go over each tag and attributes in the
+ <a href="#the-api">API</a> section.
+ </p>
+<pre><code><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;html:head&gt;
+ &lt;html:title&gt;HTML6 Sample&lt;/html:title&gt;
+ &lt;html:meta type="title" value="Page Title"&gt;
+ &lt;html:meta type="description" value="This is an example of HTML with namespaces"&gt;
+ &lt;html:link src="css/main.css" title="Main Styles" type="text/css"&gt;
+ &lt;html:link src="js/main.js" title="Main Script" type="text/javascript"&gt;
+ &lt;/html:head&gt;
+ &lt;html:body&gt;
+ &lt;header&gt;
+ &lt;logo&gt;
+ &lt;html:media type="image" src="images/logo.png"&gt;
+ &lt;/logo&gt;
+ &lt;nav&gt;
+ &lt;html:a href="/cats"&gt;Cats&lt;/a&gt;
+ &lt;html:a href="/dogs"&gt;Dogs&lt;/a&gt;
+ &lt;html:a href="/rain"&gt;Rain&lt;/a&gt;
+ &lt;/nav&gt;
+ &lt;/header&gt;
+ &lt;content&gt;
+ &lt;article&gt;
+ &lt;h1&gt;This is my main article head&lt;/h1&gt;
+ &lt;h2&gt;This is my sub head&lt;/h2&gt;
+ &lt;p&gt;[...]&lt;/p&gt;
+ &lt;p&gt;[...]&lt;/p&gt;
+ &lt;/article&gt;
+ &lt;article&gt;
+ &lt;h1&gt;A cool video!&lt;/h1&gt;
+ &lt;h2&gt;Pay attetion to the media elements&lt;/h2&gt;
+ &lt;p&gt;[...]&lt;/p&gt;
+ &lt;html:media type="video" src="vids/funny-cat.mp4" autostart controls&gt;
+ &lt;p&gt;Man, that was a stupid cat.&lt;/p&gt;
+ &lt;/article&gt;
+ &lt;/content&gt;
+ &lt;footer&gt;
+ &lt;copyright&gt;This site is &amp;copy; to Oscar Godson 2009&lt;/copyright&gt;
+ &lt;/footer&gt;
+ &lt;/html:body&gt;
+&lt;/html:html&gt;</code></code></pre>
+
+ <p>
+ As you'll see, there are some weird <code>&lt;html:x&gt;</code> tags throughout
+ this sample. Those are the namespaced elements that belong to the W3C and HTML6
+ spec. These elements trigger browser events. For example, the
+ <code>&lt;html:media type="image"&gt;</code> element will make an image appear
+ or, the <code>&lt;html:title&gt;</code> element makes the title bar of the browser change
+ and so on.
+ </p>
+ <p>
+ All those other elements are <em>just for you</em>. None of those elements
+ mean anything really to the browser. Simply hooks for CSS and JS and to make
+ your code more semantic. The HTML elements you see in there like
+ <code>&lt;p&gt;</code> or the <code>&lt;h1&gt;</code> tags are just because
+ <em>I</em> like using those as ways to markup paragraphs or the most important
+ header, but I could have used <code>&lt;paragraph&gt;</code>,
+ <code>&lt;text&gt;</code>, or <code>&lt;helloworldanythingiwant&gt;</code>.
+ <br><br><em>It's whatever makes sense to you and your application.</em>
+ </p>
+
+ <h3>Section 3 - The APIs</h3>
+ <h4>Section 3A - HTML API</h4>
+ <p>
+ All of the following tags in this API have the namespace <code>html</code> like:
+ <code>&lt;html:title&gt;</code>
+ </p>
+
+ <h5><code>&lt;html:html&gt;</code></h4>
+ <p>
+ This begins a HTML document. Equivelent to the current <code>&lt;html&gt;</code> tag.
+ </p>
+
+ <p class="sample">Sample:</p>
+ <pre><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;!-- rest of HTML would go here --&gt;
+&lt;/html:html&gt;</code></pre>
+
+ <h5><code>&lt;html:head&gt;</code></h4>
+ <p>
+ This begins an HTML's head. Equivelent to the current <code>&lt;html&gt;</code> tag. The tag
+ contains data that isn't actually displayed (aside from the <code>&lt;html:title&gt;</code>
+ 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 <code>&lt;html:body&gt;</code>. These
+ scipts and other sources include things like JavaScript, CSS, RSS feeds, etc.
+ </p>
+
+
+ <p class="sample">Sample:</p>
+ <pre><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;html:head&gt;
+ &lt;!-- Head content here, like the &lt;html:title&gt; tag --&gt;
+ &lt;/html:head&gt;
+&lt;/html:html&gt;</code></pre>
+
+ <h5><code>&lt;html:title&gt;</code></h4>
+ <p>
+ This is the title of the HTML document. Equivelent to the current <code>&lt;title&gt;</code> tag.
+ Browsers will use this for the tab bar, favorites, etc. and search engines will use this as
+ the title of their links
+ </p>
+
+ <p class="sample">Sample:</p>
+ <pre><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;html:head&gt;
+ &lt;html:title&gt;HTML6 Spec Version 0.1&lt;/html:title&gt;
+ &lt;/html:head&gt;
+&lt;/html:html&gt;</code></pre>
+
+ <h5><code>&lt;html:meta&gt;</code></h4>
+ <p>
+ 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.
+ </p>
+
+ <p class="sample">Sample:</p>
+ <pre><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;html:head&gt;
+ &lt;html:title&gt;HTML6 Spec Version 0.1&lt;/html:title&gt;
+ &lt;html:meta type="description" value="This is an example of HTML with namespaces"&gt;
+ &lt;/html:head&gt;
+&lt;/html:html&gt;</code></pre>
+
+ <h5><code>&lt;html:link&gt;</code></h4>
+ <p>
+ This links external documents and scripts such as CSS, JavaScript, RSS, favicons, etc. to the current
+ document. Equivelent to the current <code>&lt;link&gt;</code> tag. This tag takes the following attributes:
+ </p>
+
+ <ul>
+ <li><code>charset</code>: The character encoding such as "UTF-8".</li>
+ <li><code>href</code>: The link to the source file.</li>
+ <li><code>media</code>: The type of device the item should run on, for example, "iphone" or "tablet".</li>
+ <li><code>type</code>: The MIME type of the document, for example, "text/javascript".</li>
+ </ul>
+
+ <p class="sample">Sample:</p>
+ <pre><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;html:head&gt;
+ &lt;html:title&gt;HTML6 Spec Version 0.1&lt;/html:title&gt;
+ &lt;html:link src="js/main.js" title="Main Script" type="text/javascript"&gt;
+ &lt;/html:head&gt;
+&lt;/html:html&gt;</code></pre>
+
+ <h5><code>&lt;html:body&gt;</code></h4>
+ <p>
+ This is the body of the HTML document. Equivelent to the current <code>&lt;body&gt;</code> tag.
+ This is where you'd place most of the stuff that would be visible to the users like text, media,
+ and so on.
+ </p>
+
+ <p class="sample">Sample:</p>
+ <pre><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;html:head&gt;
+ &lt;html:title&gt;HTML6 Spec Version 0.1&lt;/html:title&gt;
+ &lt;/html:head&gt;
+ &lt;html:body&gt;
+ &lt;!-- Your web page's content would go here --&gt;
+ &lt;/html:body&gt;
+&lt;/html:html&gt;</code></pre>
+
+ <h5><code>&lt;html:a&gt;</code></h4>
+ <p>
+ This tag represents either an anchor on the page, or a link to another web page. Equivelent to the
+ current <code>&lt;a&gt;</code> tag. The &lt;html:a&gt; tag takes one required attribute which is
+ the <code>href</code> which directs the anchor or link where to go. For an anchor you'd use the syntax
+ <code>#id-of-element-to-link-to</code> and for a link to another web page you'd simply insert the link
+ like <code>http://google.com</code>.
+ </p>
+
+ <p class="sample">Sample:</p>
+ <pre><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;html:head&gt;
+ &lt;html:title&gt;HTML6 Spec Version 0.1&lt;/html:title&gt;
+ &lt;/html:head&gt;
+ &lt;html:body&gt;
+ &lt;html:a href="http://google.com"&gt;Go to google.com!&lt;/html:a&gt;
+ &lt;/html:body&gt;
+&lt;/html:html&gt;</code></pre>
+
+ <h5><code>&lt;html:media&gt;</code></h4>
+ <p>
+ This tag encapsulates what we now have for media which are tags like <code>&lt;img&gt;</code>,
+ <code>&lt;video&gt;</code>, <code>&lt;audio&gt;</code>, <code>&lt;embed&gt;</code>, 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 "<code>type</code>" attribute, or will make a guess based on the file extension, or lastly,
+ by the MIME type.
+ </p>
+
+ <p class="sample">Sample:</p>
+ <pre><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;html:head&gt;
+ &lt;html:title&gt;HTML6 Spec Version 0.1&lt;/html:title&gt;
+ &lt;/html:head&gt;
+ &lt;html:body&gt;
+ &lt;!-- Image --&gt;
+ &lt;html:media src="images/logo.jpg" type="image"&gt;
+ &lt;!-- Video, shows you don't "need" a type --&gt;
+ &lt;html:media src="videos/cute-cat.mov"&gt;
+ &lt;!-- Some made up format, browser will ignore if it doesn't know it --&gt;
+ &lt;html:media src="misc/example.abc" type="abc"&gt;
+ &lt;/html:body&gt;
+&lt;/html:html&gt;</code></pre>
+
+ <h4>Section 3B - HTML Forms API</h4>
+
+ <p>
+ 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.
+ </p>
+
+ <h5><code>&lt;form:form&gt;</code></h4>
+ <p>
+ This tag creates a new form. Has two attributes, "<code>method</code>" and "<code>action</code>". As with
+ current HTML forms, method can be "<code>POST</code>" or "<code>GET</code>" (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
+ <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3.org</a>. The "<code>action</code>"
+ attribute tells the form where to send the data. By default the "<code>method</code>" is set to GET and the
+ "<code>action</code>" is the current page.
+ </p>
+
+ <p class="sample">Sample:</p>
+ <pre><code>&lt;!DOCTYPE html&gt;
+&lt;html:html&gt;
+ &lt;html:head&gt;
+ &lt;html:title&gt;HTML6 Spec Version 0.1&lt;/html:title&gt;
+ &lt;/html:head&gt;
+ &lt;html:body&gt;
+ &lt;form:form method="post" action="/sendmail"&gt;
+ &lt;!-- Form inputs and stuff go here --&gt;
+ &lt;/form:form&gt;
+ &lt;/html:body&gt;
+&lt;/html:html&gt;</code></pre>
+
+ <h3>Section 4 - Using HTML6 Now</h3>
+
+ <h3>Section 5 - About the Author</h3>
+ <p>Maybe this sounds like a good idea, maybe it doesn't, but it always helps to know who wrote something. I'm Oscar Godson (<a href="http:twitter.com/oscargodson">@oscargodson</a> on Twitter) and I'm a JavaScript Engineer at <a href="http://yammer.com">Yammer</a>. I previous worked at the <a href="http://portlandoregon.gov">City of Portland, OR</a> 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 <a href="http://batchgeo.com/api/">BatchGeo</a>, <a href="http://puppetlabs.com">Puppet Labs</a>, and more. I consider myself a JavaScriptologist and I try to open source anything and everything I make on GitHub (<a href="http://github.com/oscargodson">http://github.com/oscargodson</a>).</p>
+ <p>I've been working on and conceptualizing HTML6 for years now. I first wrote about it in 2009 on my <a href="http://kneedeepincode.com/topics/a-better-html/">old blog</a>. 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!</p>
+ </wrapper>
+ <script src="http://yandex.st/highlightjs/6.0/highlight.min.js"></script>
+ <script>
+ hljs.initHighlightingOnLoad();
+ </script>
+ </body>
+</html>
BIN malay.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7d58a98

Please sign in to comment.