[This post is re-published from a piece I wrote for the December 2012 edition of the Centriq Alumni Network newsletter.]
I thought I would start off a series that tackles a few concepts that we've begun incorporating into our web design class in the Application Developer track in the past 6 months – HTML5, CSS3 and the jQuery JavaScript libraries. This reflects the growing adoption and support of these languages and technologies, especially in the wake of the explosion of various mobile devices. Of course, HTML5, CSS3 and jQuery could each be a book-long discussion in and of themselves. This will only be an introduction to HTML5 – but one intended to get your feet wet quickly and without a lot of fuss. The next piece in this series will be for CSS3, and the final installation will introduce getting started with jQuery in your websites.
HTML5 Evolution and Philosophy
HTML5 is just the next evolution of the HTML language family, just like XHTML was an evolution of HTML 4.01. However, one of the first trends you'll notice in HTML5 is that they have tried to simplify things – such as the new DTD (Document Type Declaration). All this line of code was ever intended to do was to identify what language was going to be used in the document that followed, so we could validate the code against that version of the language's rules. Now the DTD has been radically simplified in HTML5:
XHTML 1.0 Transitional DTD code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5 DTD code:
<!DOCTYPE html>
Part of simplifying HTML5 has included recognizing and supporting some of the common, real-world
usage of HTML. So, for example, the
target="_blank" attribute/value pair for the
<a> tag
(which can be used to cause a link to be opened in a separate browser window or tab) is so popular
that HTML5 has rolled back its former deprecated (marked for deletion) status – it's now okay
to use again. Similarly, all self-closing tags like
<br /> and
<img /> are no longer required to
use the closing forward-slash explicitly stating that they are self-closing tags. Instead, in HTML5,
you can write them simply as
<br> and
<img>. But in the spirit of being more loosely ruled, HTML5
doesn't
disallow writing self-closing tags in the XHTML fashion with the closing slash – so
adapting your XHTML documents to HTML5 is extremely easy, because you don't have to go back
and change much. Just updating the DTD as noted above is your first step.
HTML5 Semantic Structural Tags
So what else is new and well-supported with HTML5? One of the strong trends with XHTML and
CSS was to move away from using tables for page layout and to instead use a complex series of
nested
<div> tags combined with CSS to lay out any given page. However, since
the
<div> was such a generic structural container, we often coded them with a variety of
classes and ID's describing their purpose. Through popular usage, some common container types
became obvious: most pages would have a banner section, one or more navbars and a footer.
Some pages would have sidebars for things like ads, highlighted side notes or pull quotes.
Some pages might have tables or images that should be displayed with a consistently formatted caption.
HTML5 has new semantic tags for all these things, rather than just calling everything a
<div> and manually assigning it some arbitrary ID or class to identify its purpose.
<header> – acts as a banner for the page, often containing the name of the site, logo or branding images and colors, and possibly navigation elements. Not to be confused with the <head> section of the document reserved for meta information and links to CSS, JavaScript, etc.<nav> – for sections of the page with multiple links (especially for navbars used as the site's internal navigation system)<footer> – a section, usually at the bottom of the page, with minor, closing details<aside> – for sidebar/sidenote content of any kind<figure> – to contain any illustrative information, especially that needs captioning (technically not a block-level element, but you'll often want to format it that way)<figcaption> – a caption for the figure (also commonly formatted as block-level)<article> – often used for blog posts, news items and periodically published content<section> – another generic container, like the div. I'm not a fan of this one yet, but it's out there.
Transitioning to these new tags doesn't take that much work, especially if you are creating a webpage design
from scratch. But you can also adapt an XHTML template by replacing things
like
<div id="banner"> with
<header> and
<div class="sidebar">
with
<aside>.
Just don't forget to make all the necessary changes in your CSS. Where
#banner
and
.sidebar were included in your CSS (or
div.#banner , or
div.sidebar ), change them
to
header and
aside instead.
Setting Basic HTML5 Compliance for Older Browsers (using Shiv and CSS)
Although many elements of HTML5 are well-supported in most modern browsers now (including most mobile devices), it's not universal. So to ensure that at least your basic HTML5 semantic tags (mentioned above) are handled properly by an older browser that is
not familiar with these tags, it's an easy, two-step process.
- Add an HTML5 shiv/shim to the head of your HTML file.
- Add a style declaration to your CSS to ensure the newly introduced HTML5 tags that should be seen as block-level elements are formatted that way.
The HTML5 shiv is just JavaScript (or a link to JavaScript) that explains to an older browser that isn't familiar with HTML5 that these tags exist, and should not be ignored or rendered as plain text on the page. (The shiv is also sometimes called a shim.)
- 1. Connecting to a shiv hosted by Google:
<head>
<!--HTML5 Shiv-->
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
</head>
This script we're linking to off googlecode.com essentially performs the following JavaScript function for
all HTML5 elements:
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('aside');
//…and so on, for each HTML5 element
</script>
You could even include the code above (with an additional line for every HTML5 tag that needed
to be "created" for the older browsers) in the
<head> instead of the link
to the shiv from Google – but it would be more work and would only create the tags you manually listed.
- 2. To further specify in CSS that some new tags should be formatted as block-level elements:
article,aside,figcaption,figure,footer,header,nav,section {display:block;}
The CSS addition above is quick, and should be placed near the top of your CSS to set the baseline formatting for these new HTML5 tags. It's just to tell the older browsers that these new tags should be displayed as block-level elements – for the most part, newer browsers will already know. Later in your CSS you could and will add additional style declarations to further format these tags – perhaps centering your header and footer or floating all sidebars to the left and giving them a tasteful background color.
Additional Development
For a fuller (but still not exhaustive!) treatment of the topics in this series, I recommend you pick up the books we're using in our HTML/CSS/jQuery class now:
- Murach's HTML5 and CSS3 (including intro chapters for JavaScript, jQuery, and jQuery mobile) by Zak Ruvalcaba and Anne Boehm
- SitePoint's jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie
Best wishes on your continuing career development!
