Friday, March 29, 2024

Web Developer Basics: A Guide to Learning About HTML5

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 is most definitely a work in progress. It began to take shape back in 2004, and the official specification may not be actually complete until the year 2022! But HTML5 is already here, in everything from your current desktop browser to your new smartphone, so there’s no problem with getting started.

So Let’s Get Started with HTML5

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>Web Developer Basics: Learning About HTML5</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.

Begin At the Beginning

The beginning of many modern HTML 4.0 pages looks something like this:

<!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.

A Bit Of Magic

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…and presto, the source code has changed to reflect the text changes you made in the browser. Shazam!

Future articles in this continuing series will cover the details of how to use the new HTML5 elements and features (along with working examples, naturally). And we’ll keep it real, and readable, without devolving into quoting language syntax by the ton.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured