Author Archives: Nathan

Nuts and Bolts with HTML5

Web Development No Comments

In a variety of ways, HTML5 marks a new way of approaching the webpage and HTML documents, but it does so while remaining consistent with the past. Much of the interest in HTML5 revolves around interactivity and video, but that discussion is for another time. This post will simply address the basic structural changes for an HTML5 webpage. I assume a functional knowledge of HTML prior to HTML5 implementation and efforts to migrate to HTML5 or build from scratch in HTML5.

I think the best place to start is with sample code, so let’s just jump right in. Here is the basic shell of a page in HTML5:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>TwigTown Homepage</title>
<link rel=”stylesheet” href=”css/twigtown.css?v=1.0″>
<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>
<body>
<header>
<nav>
<img src=”twigtown1.png”>
</nav>
</header>
<div id=”main”>
<article>
<h1>Welcome to Twigtown!</h1>
<p>This website is a showcase of web development projects and a place to share ideas. Feel free to have a look around.</p>
</article>
<article>
<h2>Planted Freshwater Aquaria</h2>
<p>Fish and shrimp are wonderfully interesting creatures, and a freshwater planted aquarium is a great way to keep fish for personal enjoyment and to experience the balance of nature at home. <a href=”http://nubs.twigtown.com/aquaria”>Visit my blog</a> to follow developments with my aquaria, read about topics in freshwater planted aquaria, and share your own ideas and experiences.</p>
</article>
<article>
<h2>Web Development</h2>
<p>If you’d rather keep an electronic garden, delve into my <a href”http://nubs.twigtown.com/web”>blog about web development</a>. It’s my way of sharing what I’ve learned with others, and it also serves as a record of sources, projects, and ideas as I work through web development projects.</p>
</article>
<aside id=”main-photo”>
<img src=”fullbody-photo.jpg”>
</aside>
</div><!– #main –>
<footer>
</footer>
</body>
</html>

So let’s look at the new or important things here:

  1. New, clean doctype declaration (and other header stuff)
  2. Link to an HTML5 javascript shiv
  3. New elements: <header>, <footer>, and <nav>
  4. More new elements: <article>, <aside>, and <section>

Now we can take these one at a time.

1. Doctype declaration

This is about as simple as it gets for a doctype declaration. Within HTML4, doctype declarations could carry a bit of importance. This indicated to the browser how to interpret the page, with a few rather common variations, including strict, transitional (or loose or quirksmode), and XHTML. Here are some example doctype declarations:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Some of these needed to be written as well-formed XML, and would only be interpreted and rendered it the page could be properly validated. Allowing for variability, human error, and accessibility to all manner of people who may wish to post webpages, most browsers are very forgiving when it comes to reading and displaying webpages.

The very simple doctype declaration steps aside from the strict version control so well represented by the lengthy (and sometimes confusing) doctype declarations listed above. Worth noting is the fact that this isn’t <!doctype html5>, but simply <!doctype html>. The assumption is that future versions of HTML would roll out, not with a specific version identified in the doctype, but rather simply as broad updates to how HTML is read.

The HTML5 update also simplifies the declaration for character encoding. It had been this:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

It is now this:

<meta charset=”utf-8″>

For more information, about character encoding, see the W3C’s website.

2. HTML5 Javascript shiv

Thank Internet Explorer for this one. This code calls a Javascript shiv from Google to ease earlier versions of Internet Explorer along and help them interpret the page as desired by the developer. This is not the only javascript shiv available, and this is not the only way of dealing with this issue, but it is a relatively painless way to avoid a page exploding on an earlier version of Internet Explorer.

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

If you would like backstory on the shiv, take a detour to The Story of the HTML5 Shiv. Suffice it to say, these three lines of code should help avoid hours and hours of headaches trying to support older browsers on a webpage written for today’s browsers.

3. <header>, <footer>, and <nav>

Here’s some real meat and potatoes for you, and a really nice addition to help people read the code and understand what is intended for the various components. These nice little tags provide a way to define portions that are a header, a footer, or a piece of the navigation. Rather than the old <div id=”header”> approach, there is now a specific <header> tag within HTML, along with <footer> and <nav> because these elements are just so ubiquitous.

Note that the difference between <head> and <header>. The <head> is information preceding the body of the page to tell the browser what’s coming and how to read it. The <header> is within body of the page to identify components that are a header. It could be the header for the whole webpage, or it could be a header for a section of the page.

Important: You can have more than one <header>, <footer>, or <nav> on a page. An article or story on your webpage could have a header section designated with a <header> tag, and a <header tag> present at the beginning for the webpage as a whole.

4. More new tags

And that’s not all, folks! Beyond the tags for <header>, <footer>, and <nav>, there are other semantic tags that have been added. These include: <section>, <article>, and <aside>. These should be pretty clear, and they function in much the same way as the others, so I won’t dwell on it here.

And not everyone is happy about these developments. Some, like Luke Stevens, are downright miffed.

The article “The Truth About Multiple H1 Tags in the HTML5 Era” gives an excellent overview, from an SEO perspective, about how to appropriately use the new semantic tags and h tags, and how that will likely be read by search engines to interpret the important parts of the page.

Now there are other important changes present within HTML5, such as <video>, but I count those as more down-the-chain elements. These changes reflect root changes that would need to be rewritten for any transition to HTML5 (unless you don’t like the semantic tags, and then you can just forget them; there is backward compatibility, and you can continue to use the old standbys).

Rockin’ New Beginnings

Aquaria No Comments

After a long hiatus, I am in the early stages of setting up a new 30-gallon planted freshwater aquarium.

The very first step was the tank, a used 30 gallon, with stand, for only $40. Just the right pitch to get me back in the game for a nice freshwater aquarium. In the past, I have had another 30-gallon nearly identical to this, a 28-gallon bowfront that never quite got the use it deserved, a 55-gallon Walmart standard that worked out very well for very long, and a couple 10-gallon tanks that served as sick tanks for fish and grow-out tanks for plants. Unfortunately, I never had all of this going at the same time, but they worked well. I still have a nice retrofitted 55-Watt compact flourescent light hood that should fit nicely atop this 30-gallon tank. Thankfully, the tank came with a glass cover that will match perfectly my light.

The next step was rock collection. A goodly collection of background and foreground rocks were acquired over the Easter holidays. Since the rocks had been outside, they were cleaned, scrubbed, and submerged to help diffuse any potential pollutants or unwanted land creatures.

14-04-21 aquarium setup (1)   14-04-21 aquarium setup (15)

First up: a piece of petrified wood contributed by my father, and the leftovers that haven’t quite made it to the aquarium yet. Plenty of small, thin pieces to serve as accents around plants or to pile to aid the illusion of a wider tank. Also, a healthy number of large shards.

14-04-21 aquarium setup (6)

The rest are pretty attractive, with one great find for a perfect background rock. It’s a nice large slab, about an inch and a half thick, with plenty of character. This will work nicely. I’m looking forward to planting some java fern and java moss on it. The foreground rocks were pretty good finds as well, some nice bluish/purplish banded crystallized color in two, and a lovely egg shape for the other two. The piece in the middle cracked shortly after I gathered it, but I think the crack will actually work well. It should act as a nice hiding spot in the foreground for skittish fish, and it’s a great place for a cryptocoryne.

Next steps … a quality substrate for planted aquaria, and a choice of fish. Flourish from Seachem is about the perfect substrate for a planted aquarium, so I am leaning toward that, but a recent search turned up some other interesting competitors.

For fish? Cory cats, flying foxes, clown loaches, rainbowfish of all varieties (especially threadfins), gouramis, and possibly some neons or rasbora tetras. My boys seem to be enthralled with meat eaters, so I think they may be a bit disappointed with my selections.