-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
501 lines (416 loc) · 37.1 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!DOCTYPE html>
<html>
<head>
<title>HTML6 - The Spec That Brings Us Freedom</title>
<meta name="description" content="HTML5 was a great leap forward for web developers, however there is a void that HTML5 has yet to fix and that void is truly semantic markup.">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-4491651-7"]);_gaq.push(["_trackPageview"]);(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})()</script>
</head>
<body>
<a href="https://github.com/OscarGodson/HTML6"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<p><strong>UPDATE:</strong> I copy pasted this years ago, from a blog I don't write at anymore.
I first published this nearly three years ago. The site is getting a ton of
traffic out of nowhere. I haven't updated this aside from minor typos since
then. Seriously, it was just some random thing I did for fun one day. It's in
no way a real spec and should not be taken seriously.
<p>I've since moved onto starting my own company called <a
href="http://getpiggybank.com">Piggybank</a> and I wont be updating this
anytime soon.</p>
<br>
<h1>HTML6</h1>
<p><img src="malay.jpg" alt="HTML6"></p>
<h2>The Spec That Brings Us Freedom</h2>
<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><header></code>, <code><nav></code> and <code><footer></code>. It also gave us slick new JavaScript APIs like drag and drop, localStorage, and geolocation. Still, however, there is a void that HTML5 has yet to fill and that void is truly semantic markup.</p>
<p>Imagine being able to mark something up the way you want to mark it up. Imagine changing <code><div id="wrapper"></code> to <code><wrapper></code> or a better example, making a calendar like:</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="nt"><calendar></span>
<span class="nt"><month</span> <span class="na">name=</span><span class="s">"January"</span><span class="nt">></span>
<span class="nt"><day></span>1<span class="nt"></day></span>
<span class="nt"><day></span>2<span class="nt"></day></span>
<span class="nt"><day></span>3<span class="nt"></day></span>
<span class="c"><!-- ...and so on --></span>
<span class="nt"></month></span>
<span class="nt"></calendar></span>
</code></pre></div>
<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><img></code>, <code><embed></code>, <code><video></code>, <code><audio></code>, and so on? For example, wouldn't it be nice to just simply do: <code><html:media src="my-audio-file.aac" type="aac"></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 for us. 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 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 namespaces and not tags. The W3C would basically reserve the right to all namespaces, and each namespace they reserve will trigger a different HTML API.</p>
<p>So, what does this look like? Below is an example of a full HTML6 document. We'll go over each tag and attributes in the API section.</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Sample<span class="nt"></html:title></span>
<span class="nt"><html:meta</span> <span class="na">type=</span><span class="s">"title"</span> <span class="na">value=</span><span class="s">"Page Title"</span><span class="nt">></span>
<span class="nt"><html:meta</span> <span class="na">type=</span><span class="s">"description"</span> <span class="na">value=</span><span class="s">"This is an example of HTML with namespaces"</span><span class="nt">></span>
<span class="nt"><html:link</span> <span class="na">src=</span><span class="s">"css/main.css"</span> <span class="na">title=</span><span class="s">"Main Styles"</span> <span class="na">type=</span><span class="s">"text/css"</span><span class="nt">></span>
<span class="nt"><html:link</span> <span class="na">src=</span><span class="s">"js/main.js"</span> <span class="na">title=</span><span class="s">"Main Script"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="nt"><header></span>
<span class="nt"><logo></span>
<span class="nt"><html:media</span> <span class="na">type=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"images/logo.png"</span><span class="nt">></span>
<span class="nt"></logo></span>
<span class="nt"><nav></span>
<span class="nt"><html:a</span> <span class="na">href=</span><span class="s">"/cats"</span><span class="nt">></span>Cats<span class="nt"></a></span>
<span class="nt"><html:a</span> <span class="na">href=</span><span class="s">"/dogs"</span><span class="nt">></span>Dogs<span class="nt"></a></span>
<span class="nt"><html:a</span> <span class="na">href=</span><span class="s">"/rain"</span><span class="nt">></span>Rain<span class="nt"></a></span>
<span class="nt"></nav></span>
<span class="nt"></header></span>
<span class="nt"><content></span>
<span class="nt"><article></span>
<span class="nt"><h1></span>This is my main article head<span class="nt"></h1></span>
<span class="nt"><h2></span>This is my sub head<span class="nt"></h2></span>
<span class="nt"><p></span>[...]<span class="nt"></p></span>
<span class="nt"><p></span>[...]<span class="nt"></p></span>
<span class="nt"></article></span>
<span class="nt"><article></span>
<span class="nt"><h1></span>A cool video!<span class="nt"></h1></span>
<span class="nt"><h2></span>Pay attetion to the media elements<span class="nt"></h2></span>
<span class="nt"><p></span>[...]<span class="nt"></p></span>
<span class="nt"><html:media</span> <span class="na">type=</span><span class="s">"video"</span> <span class="na">src=</span><span class="s">"vids/funny-cat.mp4"</span> <span class="err">autostart</span> <span class="err">controls</span><span class="nt">></span>
<span class="nt"><p></span>Man, that was a stupid cat.<span class="nt"></p></span>
<span class="nt"></article></span>
<span class="nt"></content></span>
<span class="nt"><footer></span>
<span class="nt"><copyright></span>This site is <span class="ni">&copy;</span> to Oscar Godson 2009<span class="nt"></copyright></span>
<span class="nt"></footer></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<p>As you'll see, there are some weird <code><html:x></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><html:media type="image"></code> element will make an image appear or, the <code><html:title></code> element makes the title bar of the browser change and so on.</p>
<p>All those other elements are just for you. None of those elements mean anything to the browser. They're simply hooks for CSS and JS and to make your code more semantic. The HTML elements you see in there like <code><p></code> or the <code><h1></code> tags are just because I like using those as ways to markup paragraphs or the most important header, but I could have used <code><paragraph></code>, <code><text></code>, or <code><helloworldanythingiwant></code>.</p>
<p>It's whatever makes sense to you and your application.</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><html:title></code></p>
<h5><code><html:html></code></h5>
<p>This begins a HTML document. Equivelent to the current <code><html></code> tag.</p>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="c"><!-- rest of HTML would go here --></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><html:head></code></h5>
<p>This begins an HTML's head. Equivelent to the current <code><html></code> tag. The tag contains data that isn't actually displayed (aside from the <code><html:title></code> which is displayed in the browser's windows). Rather, it's purpose is to get data and scripts that affect the display of the content in the <code><html:body></code>. These scripts and other sources include things like JavaScript, CSS, RSS feeds, etc.</p>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="c"><!-- Head content here, like the <html:title> tag --></span>
<span class="nt"></html:head></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><html:title></code></h5>
<p>This is the title of the HTML document. Equivalent to the current <code><title></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><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><html:meta></code></h5>
<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. It's 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><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"><html:meta</span> <span class="na">type=</span><span class="s">"description"</span> <span class="na">value=</span><span class="s">"This is an example of HTML with namespaces"</span><span class="nt">></span>
<span class="nt"></html:head></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><html:link></code></h5>
<p>This links external documents and scripts such as CSS, JavaScript, RSS, favicons, etc. to the current document. Equivalent to the current <code><link></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, "mobile" or "tablet".</li>
<li><code>type</code>: The MIME type of the document, for example, <code>text/javascript</code>.</li>
</ul>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"><html:link</span> <span class="na">src=</span><span class="s">"js/main.js"</span> <span class="na">title=</span><span class="s">"Main Script"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span>
<span class="nt"></html:head></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><html:body></code></h5>
<p>This is the body of the HTML document. Equivalent to the current <code><body></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><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="c"><!-- Your web page's content would go here --></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><html:a></code></h5>
<p>This tag represents either an anchor on the page, or a link to another web page. Equivalent to the current <code><a></code> tag. The <code><html:a></code> 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>Attributes available to the <code><a></code> tag are:</p>
<ul>
<li><code>href</code></li>
<li><code>name</code></li>
<li><code>target</code> (can be <code>blank</code>, <code>parent</code>, <code>top</code> or <code>self</code>)</li>
</ul>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="nt"><html:a</span> <span class="na">href=</span><span class="s">"http://google.com"</span><span class="nt">></span>Go to google.com!<span class="nt"></html:a></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><html:button></code></h5>
<p>Similar to <code><button></code> or <code><input type="button"></code> in HTML<=5, the <code><html:button></code> tag allows you to create a button for user interaction on a page.</p>
<p>Attributes available to the <code><html:button></code> tag are:</p>
<ul>
<li><code>disabled</code></li>
</ul>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="nt"><html:button></span>Push me!<span class="nt"></html:button></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><html:media></code></h5>
<p>This tag encapsulates what we now have for media which are tags like <code><img></code>, <code><video></code>, <code><audio></code>, <code><embed></code>, and so on. 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><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="c"><!-- Image --></span>
<span class="nt"><html:media</span> <span class="na">src=</span><span class="s">"images/logo.jpg"</span> <span class="na">type=</span><span class="s">"image"</span><span class="nt">></span>
<span class="c"><!-- Video, shows you don't "need" a type --></span>
<span class="nt"><html:media</span> <span class="na">src=</span><span class="s">"videos/cute-cat.mov"</span><span class="nt">></span>
<span class="c"><!-- Some made up format, browser will ignore if it doesn't know it --></span>
<span class="nt"><html:media</span> <span class="na">src=</span><span class="s">"misc/example.abc"</span> <span class="na">type=</span><span class="s">"abc"</span><span class="nt">></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<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><form:form></code></h5>
<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 W3.org. The <code>action</code> attribute tells the form where to send the data. By default the "method" is set to GET and the "action" is the current page.</p>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="nt"><form:form</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">action=</span><span class="s">"/sendmail"</span><span class="nt">></span>
<span class="c"><!-- Form inputs and stuff go here --></span>
<span class="nt"></form:form></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><form:input></code></h5>
<p>This tag creates a new form input. Any type of form input that you can enter text into would be an input. In HTML currently this includes everything from a plain old text input to a <code><textarea></code> and would also include HTML5 style for inputs like <code>email</code> and <code>url</code>. The full list of possible input types are:</p>
<ul>
<li><code>text</code></li>
<li><code>email</code></li>
<li><code>url</code></li>
<li><code>tel</code></li>
<li><code>search</code></li>
<li><code>number</code></li>
<li><code>datetime</code></li>
<li><code>date</code></li>
<li><code>month</code></li>
<li><code>week</code></li>
<li><code>time</code></li>
<li><code>datetime-local</code></li>
<li><code>textarea</code></li>
<li><code>password</code></li>
<li><code>file</code> - (<code>multiple</code>)</li>
</ul>
<p>The possible attributes on an input are:</p>
<ul>
<li><code>name</code></li>
<li><code>disabled</code></li>
<li><code>readonly</code></li>
<li><code>placeholder</code></li>
<li><code>autofocus</code></li>
<li><code>required</code></li>
<li><code>novalidate</code></li>
</ul>
<p>The following are attributes that will work on any input except file inputs:</p>
<ul>
<li><code>maxlength</code></li>
<li><code>autocomplete</code></li>
<li><code>pattern</code></li>
<li><code>spellcheck</code></li>
<li><code>match</code> - This is new to HTML6, give it a name of a field you want it to require a match on.</li>
</ul>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="nt"><form:form</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">action=</span><span class="s">"/sendmail"</span><span class="nt">></span>
<span class="c"><!-- Simple input (defaults to text) --></span>
<span class="nt"><form:input></span>
<span class="c"><!-- A new HTML6 match example --></span>
<span class="nt"><form:input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">name=</span><span class="s">"user_password"</span><span class="nt">></span>
<span class="nt"><form:input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">match=</span><span class="s">"user_password"</span><span class="nt">></span>
<span class="c"><!-- Advanced example --></span>
<span class="nt"><form:input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">placeholder=</span><span class="s">"[email protected]"</span> <span class="err">autofocus</span> <span class="err">required</span><span class="nt">></span>
<span class="nt"></form:form></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><form:select></code></h5>
<p>The <code><form:select></code> tag lets a user select from options rather than input anything. For example an HTML<=5 <code><select></code> would be close to the same. Some others would be a calendar, color picker, and range because these are predefined values in which you choose from.</p>
<p>The possible input types follow along with attributes that are specific to it:</p>
<ul>
<li><code>select</code> - (<code>multiple</code>)</li>
<li><code>color</code></li>
<li><code>calendar</code> - (<code>range</code>)</li>
<li><code>meter</code> - (<code>range</code>, <code>step</code>)</li>
</ul>
<p>Attributes that work for all select types are:</p>
<ul>
<li><code>name</code></li>
<li><code>readonly</code></li>
<li><code>disabled</code></li>
<li><code>required</code></li>
<li><code>autofocus</code></li>
</ul>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="nt"><form:form</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">action=</span><span class="s">"/scheduler"</span><span class="nt">></span>
<span class="c"><!-- Normal select --></span>
<span class="nt"><html:select</span> <span class="na">type=</span><span class="s">"select"</span> <span class="na">name=</span><span class="s">"favorite_color"</span><span class="nt">></span>
<span class="c"><!-- Calendar example --></span>
<span class="nt"><html:select</span> <span class="na">type=</span><span class="s">"calendar"</span> <span class="na">name=</span><span class="s">"the_calendar"</span> <span class="na">range=</span><span class="s">"10/10/10-10/10/11"</span><span class="nt">></span>
<span class="nt"></form:form></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><form:status></code></h5>
<p>The <code><form:status></code> tag allows you to give feedback, or a "status" update to your users. Useful for an upload progress bar or steps in a multi-page form, for example. These are similar to the <code><progress></code> and <code><meter></code> elements in HTML5.</p>
<ul>
<li><code>progress</code></li>
<li><code>meter</code></li>
</ul>
<p>Attributes that work for all status types are:</p>
<ul>
<li><code>min</code></li>
<li><code>max</code></li>
<li><code>value</code></li>
</ul>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="nt"><form:form</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">action=</span><span class="s">"/upload"</span><span class="nt">></span>
<span class="c"><!-- Example showing "steps" in a form --></span>
<span class="nt"><form:status</span> <span class="na">type=</span><span class="s">"meter"</span> <span class="na">min=</span><span class="s">"1"</span> <span class="na">max=</span><span class="s">"3"</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><message></span>You're currently on step 2 of 3<span class="nt"></message></span>
<span class="c"><!-- Example showing an upload progress bar --></span>
<span class="nt"><form:status</span> <span class="na">type=</span><span class="s">"progress"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">value=</span><span class="s">"25"</span><span class="nt">></span>
<span class="nt"></form:form></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><form:label></code></h5>
<p>The <code><form:label></code> tag allows you to label inputs for the user. It links text to an input and when click will focus on the connected input. It matches the label's <code>for</code> attribute to the <code>id</code> of any form element.</p>
<p>Attributes that work for the <code><form:label></code> tag are:</p>
<ul>
<li><code>for</code></li>
</ul>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="nt"><form:form</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">action=</span><span class="s">"/login"</span><span class="nt">></span>
<span class="nt"><form:label</span> <span class="na">for=</span><span class="s">"username"</span><span class="nt">></span>Username<span class="nt"></form:label></span>
<span class="nt"><form:input</span> <span class="na">id=</span><span class="s">"username"</span> <span class="na">name=</span><span class="s">"username"</span><span class="nt">></span>
<span class="nt"><form:label</span> <span class="na">for=</span><span class="s">"password"</span><span class="nt">></span>Password<span class="nt"></form:label></span>
<span class="nt"><form:input</span> <span class="na">id=</span><span class="s">"password"</span> <span class="na">name=</span><span class="s">"password"</span> <span class="na">type=</span><span class="s">"password"</span><span class="nt">></span>
<span class="nt"></form:form></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h5><code><form:submit></code></h5>
<p>Just like <code><input type="submit"></code> in HTML<=5, <code><form:submit></code> will create a button which submits your form. If a submit button is present in a form, pressing enter while focused inside of a form will submit it.</p>
<p>Attributes that work for the <code><form:submit></code> tag are:</p>
<ul>
<li><code>name</code></li>
<li><code>value</code></li>
</ul>
<p><em>Example:</em></p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html:html></span>
<span class="nt"><html:head></span>
<span class="nt"><html:title></span>HTML6 Spec Version 0.1<span class="nt"></html:title></span>
<span class="nt"></html:head></span>
<span class="nt"><html:body></span>
<span class="nt"><form:form</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">action=</span><span class="s">"/login"</span><span class="nt">></span>
<span class="nt"><form:label></span>Login<span class="nt"></form:label></span>
<span class="nt"><form:input</span> <span class="na">name=</span><span class="s">"username"</span><span class="nt">></span>
<span class="nt"><form:input</span> <span class="na">name=</span><span class="s">"password"</span> <span class="na">type=</span><span class="s">"password"</span><span class="nt">></span>
<span class="nt"><form:submit</span> <span class="na">name=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"submit"</span><span class="nt">></span>
<span class="nt"></form:form></span>
<span class="nt"></html:body></span>
<span class="nt"></html:html></span>
</code></pre></div>
<h3>Section 4 - Tag types</h3>
<p>In HTML6, like in all previous HTML versions, there are two types of tags: single tags and double tags. Single tags can't have any text content, they only have attributes. This is an example of single tag (both elements are interpreted the same way):</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="nt"><html:meta</span> <span class="na">type=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"m93a"</span><span class="nt">></span>
<span class="nt"><html:meta</span> <span class="na">type=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"m93a"</span> <span class="nt">/></span>
</code></pre></div>
<p>Unlike the double tag, the single tag doesn't need to be closed. Double tags usually have some text content so they are made of an opening and closing tag. If it has no text content, it can be shortened to the self-closing single variant. Examples:</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml"><span class="nt"><html:link</span> <span class="na">href=</span><span class="s">"./a.html"</span><span class="nt">></span>Text content<span class="nt"></html:link></span>
<span class="c"><!-- This shortand... --></span>
<span class="nt"><foo</span> <span class="na">class=</span><span class="s">"bar"</span> <span class="nt">/></span>
<span class="c"><!-- ...means in fact this: --></span>
<span class="nt"><foo</span> <span class="na">class=</span><span class="s">"bar"</span><span class="nt">></foo></span>
</code></pre></div>
<h3>Section 5 - Using HTML6 Now</h3>
<p>Unfortunately you can't but I'm hard at work on a polyfill that will transform your HTML6 document into a normal HTML document with JS. There will be a front-end one (which I wouldn't use in production due to the processing time and because search engines won't understand what the document is) and a Node.js one which will transform it and give it to the browser as if it were HTML.</p>
<p>If you'd like it in another language submit it to the <a href="https://github.com/OscarGodson/HTML6/issues">issue tracker</a> or send a <a href="https://github.com/OscarGodson/HTML6/pulls">pull request</a>.</p>
<h3>Section 6 - Conclusion</h3>
<p>This is simply an idea. It's an idea I've personally <a href="http://kneedeepincode.com/topics/a-better-html/">had for years</a>, but it's in no way finished. There's still a lot missing and a lot I haven't yet thought about, but it's a start. I'd love to hear your thoughts in the <a href="https://github.com/OscarGodson/HTML6/issues">issue tracker</a> or better yet, send a <a href="https://github.com/OscarGodson/HTML6/pulls">pull request</a> of what you think should be changed or added.</p>
<h4>Copyright on all documents and code:</h4>
<p>Copyright (c) 2012 Oscar Godson [email protected]</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
<script src="js/prettify.js"></script>
<script src="js/main.js"></script>
</body>
</html>