How I would have implemented HTML 5

HTML is pretty messy, but I think I’ve found a simple way it could be cleaner and more semantic, and wouldn’t require a degree in rocket science to learn.

Here is how I would have written HTML 5.

1. Good bye HEAD and Doc type

Instead a typical HTML page can follow this structure:

As you can see no BODY tag either, replaced with Canvas, this is the viewable area in the client, be that a phone, pc, netbook whatever!

You might be wondering what’s the story with <AnyTagYouWant>, well its simple and beautiful write standard XHTML, HTML 4 or HTML5 tags if you want, but you can just as well create your own tags on the fly. This offers the perfect semantic solution.

No need for <Div id=”listOfItems” class=”productList”> – forget about this! Instead write <computerProducts /> or any tag that makes your code very easy to read.

Real mappings are included in the style…. Yes style needs some rewriting too!

An example style would be

Menu1 { tagType=’div’} , The browser would be smart enough to handle this mapping when it reads in the style.

You might be thinking thats a crazy amount of more style I would have to type. Not really, not if it was automated with intellisense. Imagine if as you typed a custom tag, intellisense displayed code completion to the selected element and created this style for you and set the tagType.

This would also add some bad ass extra meaning to to the JS function – getElementsByTagName – don’t you think?

About these ads

2 thoughts on “How I would have implemented HTML 5

  1. I believe HTML5 already allows for {AnyTagYouWant>, by virtue of being SGML. (XML would allow that too, but cargo culters don’t like it). You just have to style those custom tags yourself. Screenreaders will have a problem, as there is no default semantic meaning attached to AnyTagYouWant. But apart from that, you’re fine.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s