HTML5, depending on who you listen to, may be either a disruptive new technology that has the potential to bring entire companies to their knees, or a smooth transition from current HTML 4.0 that promises to make life much easier for developers. Both are at least partially true, and in this continuing series, I hope to help you make sense out of HTML5: both business sense and nuts-and-bolts coding-level sense.
HTML5, depending on who you listen to, may be either a disruptive new technology that has the potential to bring entire companies to their knees, or a smooth transition from current HTML 4.0 that promises to make life much easier for developers. Both are at least partially true, and in this
continuing series, I hope to help you make sense out of HTML5: both business sense and nuts-and-bolts coding-level sense.
Perhaps the most important thing to understand about HTML5 is not the coding details and changes themselves, but the high-level functions they give you access to. In fact, HTML5 is all about high-level functions rather than details. For instance, instead of thinking of multimedia objects and then defining them as video or audio and so on, in HTML5 you can simply write something like:
<video src=”watchthis.mp4” width=”640”
height=”480”>
< a href=”watchthis.mp4”>Here’s my video</a>
</video>
This functional methodology extends even to typical page coding. We’re all used to writing complex pages in terms of low-level objects like </div>, which is kind of amorphous and easy to lose track of. So we often attempt to keep track of things by coding like this:
<div id=”header”>
<H1>Learning AboutHTML5</H1>
<p class=”credit”>by David Fiedler</p>
</div>
In HTML5, we can cut right to the chase. We’re writing a header, and now we can code it that way:
<header>
<H1>Web Developer Basics: Learning About
HTML5</H1>
<p class=”credit”>by David Fiedler</p>
</header>
So what, you might say at this point. Well, it’s not just the header of a page that we can now view as a complete functional object, it’s almost everything we use on a daily basis: <header>, <footer>, <article>, <section>, <nav>, <menu>, <figure>. This gives us tremendous flexibility in terms of how we can think of the page. So it’s not just easier to understand the structure of the page, it’s easier to correctly code the structure of the page.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd”>
But in our brave new world of HTML5, all we need is:
<!DOCTYPE html>
Similarly, the complex XHTML boilerplate declarations many people use can be simply replaced by:
<html lang=”en”>
and encoding declarations such as
<meta http-equiv=”Content-Type” content=”text/
html; charset=utf-8”>
can be toned down to a mere
<meta charset=”utf-8”>
Oh, and we may as well get this next bit out of the way now, even though I hesitate to mention it for fear of being responsible for people writing near-incomprehensible HTML5 pages. You no longer need those double quotes around attributes, so that <p class=credit> is now as legal as <p class=”credit”>. But please use this power wisely.
Just to show that HTML5 isn’t only about structure and saving keystrokes here and there, here’s a nice example of an attribute feature that is simple on the surface, but demonstrates some real power. Paste this simple little document into a text file, and call it something like foo. html:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>You Can Edit This</title>
</head>
<body>
<h1>I Mean, You Can Really Edit This</h1>
<p contenteditable=true>
Now is the time for all good cats to come
to the aid of their catnip.
</p>
</body>
</html>
The only new thing here that will jump out at you is the attribute of contenteditable on the paragraph tag. You can use this on any element, not just a paragraph, and it takes effect for everything within that element. Now, open this file using any modern browser and you’ll see that you can indeed edit the paragraph - but not the heading! - Right in the browser.
But wait, there’s more! Change that paragraph as much as you like, then save the page to your computer as a new HTML file. Open it up in a text editor, the source code has changed to reflect the text changes you made in the browser.
Don't forget to leave your valid comments and suggestions below...
