forked from OscarGodson/HTML6
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
496 lines (438 loc) · 24.3 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
<!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>
<h1>HTML6</h1>
<p><img src="https://raw.github.com/OscarGodson/HTML6/master/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>
<pre><code class="lang-xml"><calendar>
<month name="January">
<day>1</day>
<day>2</day>
<day>3</day>
<!-- ...and so on -->
</month>
</calendar></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><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>
<pre><code class="lang-xml"><!DOCTYPE html>
<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></code></pre>
<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>
<pre><code class="lang-xml"><!DOCTYPE html>
<html:html>
<!-- rest of HTML would go here -->
</html:html></code></pre>
<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>
<pre><code class="lang-xml"><!DOCTYPE html>
<html:html>
<html:head>
<!-- Head content here, like the <html:title> tag -->
</html:head>
</html:html></code></pre>
<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>
<pre><code class="lang-xml"><!DOCTYPE html>
<html:html>
<html:head>
<html:title>HTML6 Spec Version 0.1</html:title>
</html:head>
</html:html></code></pre>
<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>
<pre><code class="lang-xml"><!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></code></pre>
<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>
<pre><code class="lang-xml"><!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></code></pre>
<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>
<pre><code class="lang-xml"><!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></code></pre>
<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>
<pre><code class="lang-xml"><!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></code></pre>
<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>
<pre><code class="lang-xml"><!DOCTYPE html>
<html:html>
<html:head>
<html:title>HTML6 Spec Version 0.1</html:title>
</html:head>
<html:body>
<html:button>Push me!</html:button>
</html:body>
</html:html></code></pre>
<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>
<pre><code class="lang-xml"><!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></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><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>
<pre><code class="lang-xml"><!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></code></pre>
<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>
<pre><code class="lang-xml"><!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">
<!-- Simple input (defaults to text) -->
<form:input>
<!-- A new HTML6 match example -->
<form:input type="password" name="user_password">
<form:input type="password" match="user_password">
<!-- Advanced example -->
<form:input type="email" placeholder="[email protected]" autofocus required>
</form:form>
</html:body>
</html:html></code></pre>
<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>
<pre><code class="lang-xml"><!DOCTYPE html>
<html:html>
<html:head>
<html:title>HTML6 Spec Version 0.1</html:title>
</html:head>
<html:body>
<form:form method="post" action="/scheduler">
<!-- Normal select -->
<html:select type="select" name="favorite_color">
<!-- Calendar example -->
<html:select type="calendar" name="the_calendar" range="10/10/10-10/10/11">
</form:form>
</html:body>
</html:html></code></pre>
<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>
<pre><code class="lang-xml"><!DOCTYPE html>
<html:html>
<html:head>
<html:title>HTML6 Spec Version 0.1</html:title>
</html:head>
<html:body>
<form:form method="post" action="/upload">
<!-- Example showing "steps" in a form -->
<form:status type="meter" min="1" max="3" value="2">
<message>You're currently on step 2 of 3</message>
<!-- Example showing an upload progress bar -->
<form:status type="progress" max="100" value="25">
</form:form>
</html:body>
</html:html></code></pre>
<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>
<pre><code class="lang-xml"><!DOCTYPE html>
<html:html>
<html:head>
<html:title>HTML6 Spec Version 0.1</html:title>
</html:head>
<html:body>
<form:form method="post" action="/login">
<form:label for="username">Username</form:label>
<form:input id="username" name="username">
<form:label for="password">Password</form:label>
<form:input id="password" name="password" type="password">
</form:form>
</html:body>
</html:html></code></pre>
<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>
<pre><code class="lang-xml"><!DOCTYPE html>
<html:html>
<html:head>
<html:title>HTML6 Spec Version 0.1</html:title>
</html:head>
<html:body>
<form:form method="post" action="/login">
<form:label>Login</form:label>
<form:input name="username">
<form:input name="password" type="password">
<form:submit name="submit" value="submit">
</form:form>
</html:body>
</html:html></code></pre>
<h3>Section 4 - 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 5 - 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/jquery-1.8.0.min.js"></script>
<script src="js/prettify.js"></script>
<script src="js/main.js"></script>
</body>
</html>