HTML5 is currently being developed as the next major revision of HTML and it is still far away from W3C recommended release date (year 2022 or later). However with the release of Apple iPad, the topic is got extremely heated and almost every web designer are talking/reading/writing/blogging/twitting about it.
Moreover, many early adapters (web developers and geeks) started creating some cool stuffs wtih the cleaner HTML5/CSS3 codes. In case you wanted to be one of them but don’t know where to start, here are list of useful HTML5 tutorials to get you started. It’s been a long week searching and reading on these tutorials (hey, I’m new to this too!) – I hope you make good use of them. Also, if you are one of the authors of these tutorials – I couldn’t thank you guys enough! It’s been a great learning journey reading each of these; thank you very, very much.
HTML5 doctype
To start using HTML5 you’ll need to use the new HTML5 doctype and all you need is the following snippet of code. Simply place this on the first line of your HTML document and you’re ready to start using HTML5.
<!DOCTYPE html>
Something worth remember at this stage is that the HTML5 doctype allows you to code using XHTML syntax or HTML in strict mode. Gone are the transitional and loose variations of the doctypes though. Personally I use HTML syntax but if you prefer XHTML then that’s fine too but I would recommend keeping things consistent whichever method you use.
The HEAD section
The head section of an HTML5 document will be pretty familiar with anyone used to seeing HTML…
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Page Title</title><!-- meta tags --><meta name="keywords" content=""><meta name="description" content=""><!-- stylesheets --><link rel="stylesheet" href="css/reset.css" type="text/css"><link rel="stylesheet" href="css/common.css" type="text/css"><!-- javascript --><script src="js/jquery-1.3.2.min.js"></script><!--conditional comments --><!--[if IE]><script src="js/html5.js"></script><![endif]--></head>
The first thing you’ll notice is that the meta tag for the character set has been simplified somewhat. This was something that I used to copy and paste along with the doctype into a new document as it was a little difficult to remember the full HTML for the character set so this is a welcome change for me.
IE8 HTML5
The other part within the head that you might not be familiar with is the conditional comment which includes an html5.js file. This is basically a work around which enables the styling of HTML5 elements within IE8. Without it and users of IE would simply see content that was unstyled but with a little JavaScript we can make good use of progressive enhancement.
The BODY section
Here’s where things start getting a little more interesting. Instead of nesting a number of div’s to create a layout, we can now take advantage of new HTML5 elements to create a better structure for our pages.
The HEADER and NAV elements
In the example I gave above, the HTML uses the HEADER and NAV elements to contain these elements. The HEADER element can be used to markup the header for the page but could also be used to markup the headers within the content. Personally, I just use the H1, H2 elements but you could technically wrap these within a HEADER element if you wanted. The NAV element can also be used multiple times so you might use it within your HEADER but also for a side navigation, footer links or related links so I’ve given both of these IDs so that they can be styled using CSS independently of any other elements that we add of this type later.
<header id="page-header"><div id="logo"><a href="/"><img src="images/graphic-logo.gif" alt="Company Name"></a></div><nav id="main-navigation"><ul><li class="current"><a href="#">Home</a></li><li style="color: red;"><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact</a></li></ul></nav></header>The ARTICLE, SECTION and HGROUP elements
I’ve also used the ARTICLE element to surround the main content, the SECTION element to contain that section of the page (for example, I could repeat this if I was repeating news articles or blog entries on a home page). The HGROUP element is also used here to group a series of Heading elements (i.e. h1, h2, h3 etc).
<article id="page-content"><section><hgroup><h1>Demonstration of Using HTML5</h1><h2>An HTML5 Template</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sagittis porta mauris, iaculis egestas metus posuere sit amet. Sed ullamcorper orci eu dolor egestas sodales. Donec tempor aliquet pulvinar. Sed sed turpis sapien, ac dictum sem. Phasellus metus leo, gravida in imperdiet sit amet, bibendum id magna. Vivamus ac nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis justo ligula. Suspendisse sodales ultricies consequat. Aenean condimentum eros mi. Duis consectetur placerat vehicula. Fusce vel massa erat.</p><h2>A demonstration of list items</h2><ul><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li></ul><ol><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li></ol></section><aside><h2>Related Content</h2><p>Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit. Aenean vulputate interdum augue, sed dapibus mi ultricies convallis. Curabitur a nunc nisi, ac ornare nisi. Ut semper placerat accumsan. Cras eu nibh lorem. Sed sit amet ligula vitae orci molestie sollicitudin sit amet at odio. Mauris non elit ac ipsum facilisis eleifend. Maecenas eu velit sit amet neque iaculis dapibus. Integer mollis est id erat dignissim blandit. Quisque malesuada mattis sollicitudin. Pellentesque volutpat pellentesque luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus augue ut sem convallis ullamcorper. Donec vitae magna nec lacus varius pellentesque vel nec diam. Morbi sagittis, magna sit amet sollicitudin ultricies, neque orci fermentum ipsum, non cursus lectus velit at ante. Donec nec neque in sem suscipit faucibus. Aliquam nisi turpis, volutpat quis suscipit in, varius vitae nunc.</p></aside></article>The ASIDE element
In the above code you’ll also notice the ASIDE element, which is used to contain content that relates to the content within the SECTION part of a document and would contain things like links to related content or content pulled from Twitter.
The FOOTER element
Lastly we have the FOOTER element which can be used for the bottom of the content to contain things like copyright information but you can also use it for including author information at the end of a SECTION element so it does have multiple purposes.
Summary
There are more HTML5 elements to get to grips with so I didn’t want to try and cover everything in one article. However, I hope to make this a series of HTML5 posts which goes into much more depth and also explains how I’ve used CSS in the above example to style these new elements and keep markup to a minimal.
Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline
<font> and <br> tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages.
As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.
Goodbye <div> soup, hello semantic markup
In the past, designers wrestled with semantically incorrect table-based layouts. Eventually, thanks to revolutionary thinking from the likes of Jeffrey Zeldman and Eric Meyer, savvy designers embraced more semantically correct layout methods, structuring their pages with
<div> elements instead of tables, and using external stylesheets for presentation. Unfortunately, complex designs require significant differentiation of underlying structural elements, which commonly results in the “<div>-soup” syndrome. Perhaps this looks familiar:
While slightly contrived, this example serves to illustrate the structural redundancy of designing complex layouts with HTML 4 (as well as XHTML 1.1 et al). Fortunately,HTML 5 alleviates
<div>-soup syndrome by giving us a new set of structural elements. These new HTML 5 elements replace meaningless <div>s with more semantically accurate definitions, and in doing so provide more “natural” CSS hooks with which to style the document. With HTML 5, our example evolves:
As you can see, HTML 5 enables us to replace our multitude of
<div>s with semantically meaningful structural elements. This semantic specificity not only improves the underlying quality and meaningfulness of our web pages, but also enables us to remove many of the class and id attributes that were previously required for targeting our CSS. In fact, CSS 3 makes it possible to eliminate virtually all class and id attributes.
Goodbye class attributes, hello clean markup
When combined with the new semantic elements of HTML 5, CSS 3 provides web designers with god-like powers over their web pages. With the power of HTML 5, we obtain significantly more control over the structure of our documents, and with the power of CSS 3, our control over the presentation of our documents tends toward infinity.
Even without some of the advanced CSS selectors available to us, the new variety of specific HTML 5 elements enable us to apply styles across similar sections withoutthe need for defining
class and id attributes. To style our previous <div>-soup example, we would target the multitude of attributes via the following CSS:
On the other hand, to style our HTML 5 example, we may target the various documents regions directly with this CSS:
This is an improvement, but there are several issues that need addressed. With the
<div> example, we target each area specifically through use of class and idattributes. Using this logic allows us to apply styles to each region of the document, either collectively or individually. For example, in the <div> case, .section and.content divisions are easily distinguished; however, in the HTML 5 case, thesection element is used for both of these areas and others as well. This is easily resolved by adding specific attribute selectors to the different section elements, but thankfully, we instead may use a few advanced CSS selectors to target the differentsection elements in obtrusive fashion.Targeting HTML-5 elements without classes or ids
Rounding out the article, let’s look at some practical examples of targeting HTML-5 elements without
classes or ids. There are three types of CSS selectors that will enable us to target and differentiate the elements in our example. They are as follows:- The descendant selector [CSS 2.1]: E F
- The adjacent selector [CSS 2.1]: E + F
- The child selector [CSS 2.1]: E > F
Let’s have a look at how these selectors enable us to target each of our document sections without the need for
classes or ids.
Targeting the outermost
Due to the incompleteness of our example, we will assume that the outermost
<section> elementDue to the incompleteness of our example, we will assume that the outermost
<section> element is adjacent to a <nav> element which itself is a direct descendant of the <body> element. In this case, we may target the outermost<section> as follows:
Targeting the next
As the only direct descendant of the outer
<section> elementAs the only direct descendant of the outer
<section>, the next <section> element may be specifically targeted with the following selector:
Targeting the
There are several ways to target the
<article> elementThere are several ways to target the
<article> element specifically, but the easiest is to use a simple descendant selector:
Targeting the
In our example, each of these three elements exists in two locations: once inside the
header, section, and footer elementsIn our example, each of these three elements exists in two locations: once inside the
<article> element and once inside the <aside> element. This distinction makes it easy to target each element individually:
..or collectively:
So far, we have managed to eliminate all
classes and ids using only CSS 2.1. So why do we even need anything from CSS 3? I’m glad you asked..Advanced targeting of HTML 5 with CSS 3
While we have managed to target every element in our example using only validCSS 2.1, there are obviously more complicated situations where the more advanced selective power of CSS 3 is required. Let’s wrap things up with a few specific examples showing how CSS 3 enables us to style any element without extraneous
class or id attributes.
Targeting all posts with a unique post ID
WordPress provides us a way of including the ID of each post in the source-code output. This information is generally used for navigational and/or informational purposes, but with CSS 3 we can use these existing yet unique ID attributes as a way to select the posts for styling. Sure, you could always just add a
WordPress provides us a way of including the ID of each post in the source-code output. This information is generally used for navigational and/or informational purposes, but with CSS 3 we can use these existing yet unique ID attributes as a way to select the posts for styling. Sure, you could always just add a
class="post"attribute to every post, but that would defeat the point of this exercise (plus it’s no fun). By using the “substring matching attribute selector,” we can target all posts and their various elements like this:
Now that’s just sick, and we can do the same thing for numerically identified comments, enabling us to apply targeted styles to associated constructs:
Target any specific section or article
Many sites display numerous of posts and comments. With HTML 5, the markup for these items consists of repetitive series of
Many sites display numerous of posts and comments. With HTML 5, the markup for these items consists of repetitive series of
<section> or <article> elements. To target specific <section> or <article> elements, we turn to the incredible power of the “:nth-child” selector:
In a similar manner, we may also target specific elements in reverse order via the “
:nth-last-child” selector:
More ways to select specific elements
Another way to select specific instances of HTML-5 elements such as
Another way to select specific instances of HTML-5 elements such as
<header>,<section>, and <footer>, is to take advantage of the “:only-of-type” selector. With these HTML-5 elements appearing in multiple locations in the web document, it may be useful to target elements that appear only once within a particular parent element. For example, to select only <section> elements that are the only<section> elements within another <section> element (insane, I know), as in the following markup:
..we could simply use the following selector:
Again, you could always add an
id to the target element, but you would lose the increased scalability, maintainablity, and clarity made possible with an absolute separation of structure and presentation.
The take-home message for these examples is that CSS 3 makes it possible to target virtually any HTML-5 element without littering the document with superfluous presentational attributes.
Much more to come
With the inevitable, exponential rise in popularity of both HTML 5 and CSS 3, designers can look forward to many new and exciting possibilities for their web pages, applications, and scripts. Combined, these two emerging languages provide designers with immense power over the structure and presentation of their web documents. In my next article on this topic, we will explore some of the controversial aspects of HTML 5 and also examine some of the finer nuances ofCSS 3. Stay tuned!
Note to WordPress users
You can start using HTML 5 right now. To see a live, working example of a WordPress theme built entirely with HTML 5, CSS, and of course PHP, drop by the Digging into WordPress site and visit our newly revamped Theme Playground. There you will find my recently released H5 WordPress Theme Template available for immediate download. And while you’re there, be sure to secure your copy of Digging into WordPress, coming this Fall.
