Scoroncocolo Tech Pages

HTML 5

Someday soon if your web pages are not coded in HTML 5, Google will begin to penalize you for it. The Google home page is already written in HTML 5.

There's a new World Wide Web Coming

This extraordinarly beautiful and powerful goddess we call the Internet has very recently given birth to two new awesome god-lets who will change our world forever. These two new-born gods are named HTML 5 and CSS 3. In this article I want to talk about Html 5. I intend to write another article in the near future about CSS 3. Html 5 used in conjunction with the newly evolving CSS 3 will revolutionize the way webpages are built and consequently will have a profound effect on the Internet that will last forever. We are now on the verge of a "tipping point" that will usher the Internet into a new age. Html 5 and CSS 3 are poised to supersede HTML 4.01 and XHTML 1.0 used in conjunction with CSS 2 that are the present day languages with which 99% of all webpages are built today. If you're a web designer you no doubt know a little or perhaps a lot more than I do about Html 5. But if you are a blogger or a small or large business owner who maintains a website you need to be aware that there's a change coming to the Internet the likes of which have never been seen before.

Too many people are paying too little attention to HTML 5. Too many people mistakenly believe that there is little need to learn this new markup convention that offers tremendous improvements in the webpages we write - improvements like semantically-meaningful layout simply because they have heard that these conventions (HTML 5 and CSS 3) won't be implemented until 2022. Wrong! The year 2022 is the deadline that the W3C has set for "user agents" (W3C-speak for browsers like Microsoft's Internet Explorer) to fully implement support for all of HTML5 and CSS 3. The truth is that all modern web browsers support Html 5 today. We can even use Html 5 with Microsoft's rinky-dink web browsers, IE 7, IE 8 and even ancient old IE 6. To Microsoft's credit, they have promised to make the newest iteration of Internet Explorer, IE 9 due out early next year, almost completely compatible with HTML 5 and CSS 3.

The fact is, there's no reason to wait until 2022 or even 2012, as conventional wisdom has managed to misconstrue the truth of the matter, to start building our webpages with HTML5. We can start using HTML5 to build webpages and entire websites right now. The newest versions of most modern web browsers like Google's Chrome browser, Opera, Apple's Safari browser and Firefox already support most of what's new and exciting in HTML5. And there's even a way to "trick" Internet Explorer into rendering pages written in HTML5 that make those pages look almost as good as they do on a browser that is much more HTML5 compatible. Later on in this article I'll show you how to "trick" Internet Explorer into believing that it belongs in the same league with modern web browsers like Firefox, Chrome, Safari and Opera.

Some of What's New in HTML 5

Html 5 is meant to make our coding more semantic or meaningful. It's designed to make our code much more accessible to both search engines and screen-readers. And in many ways html 5 is more simple and easier to understand than html 4. Here is some of what's new in html 5.

The HTML 5 Doc Type Statement

Type Ctrl u to look at the html used to build this page. (In Internet Explorer you have to click View and then Source) At the very top of the page you'll see <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html> This is called the Doc Type Statement. It tells the browser that this is an html 4.01 document. Every html document (webpage) needs to begin with a Doc Type statement. In html 5 our Doc Type Statement will be simply this - <!DOCTYPE html> That's it! That's the entire html 5 Doc Statement.

New More Meaningful Tags

The header tag, the content tag and the footer tag are a few of the new tags used in html 5 that will make our mark-up more semantic. See the text boxes below this one for more about the new html 5 tags that will make our webpages more accessible to search engines.

Video Tag - Death of the Flash Plug-in

When most of us think of html 5 we think of what we've read about Appleï¿½s decision to ban Flash from the iPad/iPhone and Steve Jobs touting of html 5's ability to do everything Adode's Flash and Microsoft's Silverlight do in terms of rendering video on webpages. For now, html 5 video will need to be encoded in at least two different formats to ensure cross-browser compatibility, with Microsoft and Apple lining up behind H.264, and Mozilla and Opera rallying around Ogg Theora.

Canvas Tag - Death of Jpeg

The new Canvas tag is meant to help us in using backgrounds such as simple gradients and shadowed text for headings, getting rid of the need to use images to display elaborate text effects. Not having to use jpeg, png and other graphic files to dress up our pages with a whole bunch of things like shadowed text and rounded corners will be a huge help. Not only will the new canvas tag make it easier for us to make fancy rounded corners but every image file that doesn't have to load in order to display the page speeds up the pages load-time. Our visitors will thank us for this and Google will reward us for this by ranking our pages higher in Google's (SERPs) Search Engine Results pages.

Quote from Google:

Once your application is functioning, your next step should be to optimize the network and bandwidth performance. You should aim to make the transfer of your application, from server to client, as fast and as efficient as possible. Your users will thank you for the fast page loads, you'll save money on bandwidth and server resources, and you'll also score better in Google's search result ranks (which now take into account site speed).

Every graphic you use to build your webpages must be sent from the server to the user's browser. We all know that images take time to load onto the page. So, every image that we don't have to use to make our pages render properly is a giant plus.

Persistent Local Storage

What's Persistent Local Storage? Think Google Gears on steroids. Html 5 Local Storage is similar to cookies but cookies are loaded up to the server ever time a page is loaded. This takes a certain amount of bandwidth and slows the loadtime, though not significantly. Html 5 Local Storage, on the other hand, saves information on your computer that is not sent to the server. It is accessed from the users computer in the browser by javascript after the page is loaded. We'll use Persistent Local Storage much like we're using Google Gears now. But the cool thing is that we lowly web page designers will have access to the same Persistent Local Storage capabilities that Google Gears has today. In fact, Google is ditching Google Gears Off-line and moving to HTML 5.

How To Code in HTML 5

The Structure of an Average Webpage

In html 4 most web designers today use DIV tags in conjunction with classes and id's. You might write something like <div class="header"> to mark-up the main header or title of your page. And later you might use <div class="nav"> to place your navigation area at the top of the page or along one side or the other where you would put links to your home page, about page and contact information. That all works fine but <div class="header"> or <div id="content"> doesn't mean anything at all to a Google-bot or robots from other search engines that crawl our pages. Nor does it mean anything to screen-readers. But modern search engine robots like Google-bots are being programmed to "know" that <header> is very likely the title of the page and therefore important and that information inside <nav> and <aside> are far less important than the main content area of the page which will be placed inside the content and section tags.

Here is the html 5 code (without any css styling) for the above image

<!doctype html>
<html>
<head>
	<title>Page title</title>
</head>

<body>
	<header>

		<h1>Page title</h1>
	</header>
	<nav>

		<!-- Navigation -->
	</nav>

	<section id="intro">
		<!-- Introduction -->
	</section>
	<section>

		<!-- Main content area -->
	</section>

	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>

		<!-- Footer -->
	</footer>

</body>
</html>

New HTML 5 Tags

Html 5 includes many new html tags. Here is a list of new Html 5 tags approved by the W3C so far.

<article> Defines external content

<aside> Defines some content aside from the article it is placed in

<audio> Defines sound, such as music or other audio streams

<canvas> Defines graphic, such as graphs or other images

<command> Defines a command button, like a radiobutton, a checkbox, or a button

<datagrid> Defines a list of selectable data. The datagrid is displayed as a tree-list

<datalist> Defines a list of selectable data. Use this element together with the input element, to make a dropdown list for the input’s value

<datatemplate> Defines a container for data template. This element must have child elements to define a template: <rule> elements

<details> Defines details of an element, which the user can see, and click to hide

<dialog> Defines a dialog, such as a conversation

<embed> Defines embedded content, such as a plug-in

<event-source> Defines a source for events sent by a server

<figure> Used to group some elements

<footer> Defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information

<header> Defines the header of a section or document

<mark> Defines marked text. Use the <mark> tag if you want to highlight parts of your text

<meter> Defines a measurement. Used only for measurements with a known minimum and maximum value

<nav> Defines a section of navigation links

<nest> Defines a nestingpoint in a datatemplate for child elements. Used together with the elements <datatemplate> and <rule>

<output> Defines different types of output, such as output written by a script

<progress> Defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript

<rule> Defines the rules for updating a datatemplate. Used together with the elements <datatemplate> and <nest>

<section> Defines sections in a document. Such as chapters, headers, footers, or any other sections of the document

<source> Defines media resources for media elements, such as <video> and <audio>

<time> Defines a time or a date, or both

<video> Defines video, such as a movie clip or other video streams

A Brief History of HTML

A Time-line of the Evolution of HTML

HTML (hyper-text mark-up language) has in some ways succeeded far more spectacularly than Esperanto in creating a language that people all over the world understand. Of course html is not a spoken language but HTML is the unifying language of the World Wide Web. Human beings all over the world have in less than thirty short years learned how to use this phenomenally functional form of information sharing to communicate in ways that only a short time ago none of us would have dreamed was possible.

As with the web itself, the HyperText Markup Language was the brainchild of Sir Tim Berners-Lee. On Christmas Day in 1990, with the help of Robert Cailliau he implemented the first successful communication between an HTTP client (the world's first web browser) and server via the Internet. In 1991 he wrote a document called ï¿½HTML Tagsï¿½ in which he proposed fewer than two dozen elements that could be used for writing web pages. It's not like he single-handedly came up with the idea of using angle brackets to mark-up documents. That was part of SGML (Standard Generalized Markup Language) format. What he did invent was a protocol for networking documents using this format and for that we are forever indebted to Tim Berners-Lee. Sir (Knighted in 2004) Tim Berners-Lee is the current director of the World Wide Web Consortium (W3C), which oversees the Web's continued development.

Html 2.0 was introduced in November of 1995 by the IETF (Internet Engineering Task Force) which though no longer involved with developing Web standards is still in existence. It's current chairman, Russ Housley, is funded by VeriSign and the U.S. government's National Security Agency. Yes indeed, the NSA. Big Brother. That's all I want to say about that.

In January of 1997 html 3.2 was introduced. It was the first version developed and standardized exclusively by the newly formed W3C, as the IETF had closed its HTML Working Group in September 1996. Html 4 came along in December of 1997. The specifications for html 4.01 were published in December of 1999 and not a whole lot in html has changed much until now. And the reason why so little has changed in the last ten years is not the fault of the W3C. It's because of web browsers not being in compliance with the W3C's specifications. In particular, Microsoft's Internet Explorer continued to ignore the W3C until very recently when its market share began to plummet. Very recently Microsoft has for the first time in its browser creating history promised to make its next iteration of Internet Explorer, IE 9 due out in the first few months of 2011, comply with W3C specs.

Html 5 is a work in progress. One thing is certain - it will change. To keep up with the evolution of HTML 5 you can monitor the Current Draft to see what changes have been made.

HTML 5 And Search Engine Optimization

Page Segmentation.

As Search engines get "smarter" they are applying ever more sophisticated page segmentation techniques to their search ranking algorithms. Clearly demarcated segmentation is a hallmark of HTML 5. HTML 5's new section tag, article tag and header tag will make websites using HTML 5 far more search engine-friendly. While Google, or any other search engine for that matter, has yet to announce that its robots are starting to give preferential treatment to pages coded in HTML 5, it's only a matter of time until the do.

Site Speed

On April 9th 2010, Google announced that it now takes pageload time into consideration when calculating rank in its SERP's or Search Engine Results Pages. Faster loading sites will now rank higher in Google. As I've mentioned earlier, HTML 5 pages will load significantly faster than older HTML 4 pages that rely on graphics for rounded corners and text shadowing.

Off topic but interesting: You can give YouTube's new HTML 5 video player a whirl provided you have the right web browser.

The HTML 5 IE Shiv

As I mentioned earlier in this article, there is a way to "trick" Internet Explorer and older versions of Firefox like Firefox 2.0 -2.6 into rendering pages written in HTML 5. This "trick" relies on the fact that it is possible to create htlm tags using javascript. Just write in your script: document.createElemen(elementName) and put this javascript in the head section of your html and voila' - you have created an element i.e. an html tag. You could call this tag anything and all browsers would not only render it but would also allow it to be styled just like any other tag. You could call your new tag horsefeathers if you wanted to: document.createElemen(horsefeathers) but a more useful approach would be to use this method to create all of the new html 5 tags for browsers that wouldn't otherwise recognize them. I believe Sjoerd Visscher first proposed using this method to enable older browsers to render html 5 pages back in January of 2008 and the idea was expanded on further by John Resig. This ingenious method of getting IE and older versions of modern browsers to render html 5 mark-up has become known as the HTML 5 IE Shiv and it's most modern iteration as of this writing is a javascript jQuery statement that you can place in the head section of your html that was recently written by Remy Sharp. Here are two versions of it:

You may notice that the two statements are identical except for the first line. The first line of the first statement reads: "if lt IE 9" which means if the browser is attempting to load an iteration of IE that is less than IE 9 then this script should be run before the page loads. But either of these two HTML 5 IE Shiv statements will cause Internet Explorer to play nice with modern HTML 5 coding.

But make sure you place this statement above any CSS you put in the HEAD section of your code.

It also should be noted that just because you can force Internet Explorer to properly display DOM box-model placement on a page written in HTML 5, you can't expect it to use the modern CSS 3 modes of styling. Micorsoft is slowly but surely being dragged, kicking and screaming, into the modern age of web browsing. IE 9 is now in beta and supports CSS 3. Once IE 9 is released (maybe in the first months of next year) the curtain will finally be fully open on the new age of web browsing. It's not too soon to start preparing for the bright new future of HTML 5 and CSS 3. I've written an html 5 sample page that you may have trouble viewing with Internet Explorer.

Thanks For Visiting the Tech Pages

Questions? Comments? Did I get something wrong? Email me at sjh@scoroncocolo.com and I WILL get back to you.

Please add this page, or better yet my entire site, to your Favorites and keep checking back. This page is a work in progress. long tail seo I intend to edit it and add to it from time to time. In the meantime, if you have any ideas about how I could enhance the content of this page, please email me about it.

If you see anything in this post that needs to be corrected, email me about that, as well. I'll make the changes and make sure you get credit for spotting my mistakes. If you have any questions or comments about anything in this post or any other posts on the Tech Pages, email me at sjh@scoroncocolo.com and I will get back to you.

Don't forget to visit my Home Page at Scoroncocolo.com . And if that's how you got here in the first place, hit your Back button and look around. You can read my other Tech Pages posts by going to my home page and looking for them there. You can also look on the left side of this page and click on any of my Previous Posts.

To make this page and all of the other of my Tech Pages easy to find, type Ctrl + d to bookmark me and come back once a week or so and see what's new.

Join me on Google Wave.

blog comments powered by Disqus

About - Services - Portfolio - Contact Us - Home Page

Blog Roll

Navigation

Recent Posts

Most Popular Posts

Links to Cool Free Stuff

Free Browser Downloads