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.

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 without the 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:

section {}
article {}
header {}
footer {}
aside {}

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 id attributes. 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, the section 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 different section 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 <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:

body nav+section {}

Targeting the next <section> elementAs the only direct descendant of the outer <section>, the next <section> element may be specifically targeted with the following selector:

section>section {}

Targeting the <article> elementThere are several ways to target the <article> element specifically, but the easiest is to use a simple descendant selector:

section section article {}

Targeting 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:

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 valid CSS 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 IDWordPress 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:

Target any specific section or articleMany 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:

More ways to select specific elementsAnother 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:

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 of CSS 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 Clubhouse. 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.

Check it out

Comments

I read your article,
Very Good, however, please realize the situation web development is right now (at least front end).

IE 6 -> 8-9 years old, still has about 25-30% USAGE in the US (which is supposed to be the most developed country in the world), so you can easily expect 30%+ from any other countries, especially those in Asia (mainland Asia, china/etc), India, Africa, and some parts of eastern europe. In the western europe we can expect something similar to the current US trends.

If a browser which is 8 years old is still available, how do you expect us, to write mark-up for this? Also let’s not forget IE7 is still very far away, and IE8 did not implement any CSS3.0 at all.
Now IE(all of them) are about 60 to 80%of the entire web browsing population, how can you expect coders/designers/etc to code only for 20-40% ?

We can expect a new IE9 version in 1-2 years, hopefully evreyone will need new PCs until then, and finally we can let IE6 die (less than 5%). Until then, sorry.

As an example of HTML5 and CSS3’s abilities, I find this impressive. As a demonstration of semantic markup, I find it fails.

What do the rules “section section header” or “section section section” mean to someone unfamiliar with the document? An ID or class will tell you more about what that element contains.

Why use an ID substring selector when its obvious the element should belong to a class?

The use of “header” instead of “headING” still irks me. Every traditional design features a div called “header” up at the top and one called footer at the bottom. Why does W3C want to muddle what we’ve achieved consensus on? And why bother wrapping s and s in another tag?

basically your web page shows that everyone should stop using IE period with its 2010 28% readiness rating.

I am far from knowledgeable on this subject, but Judging by the future projections of IE’s readiness, its obvious MS is not tailoring its browser towards page rendering as much as advertising its own products (IE 8, accelerators).

Nice article there are some things I like about HTML5, but I also have to agree with Thom Lohman and his comment about element IDs and hierarchical relationships. So if/when I do make the switch to HTML5 I’ll be retaining some of the old methods and habits.

It really is a shame about IE. I am currently working for a government contractor, and the state of the web technology in the government is just pathetic. We develop all of our apps /specifically/ for IE6, and we don’t care if they don’t work in any other browser, because they aren’t using any other browser. The government refuses to upgrade, and for a good reason. Why change something that perfectly suites your needs?

Also, I’m not so sure about those selectors being “more clear” than just using ID’s and classes. The real power of CSS3 is in the dynamic selectors you can now employ without using any client-side scripting (n:th values, etc).

This is a simple HTML 5 interface for contact selection. It doesn’t use any libraries like jQuery, mootools or prototype. Instead it’s back to oldschool Javascript, with a fresh squeeze of CSS 3 and HTML 5. I wanted to create something to experiment with the new capabilities of the new major browsers.

Projects

About the site

Perishable Press is the work of Jeff Starr, professional developer, designer, author, and publisher with over 10 years of experience.
Check out some of Jeff's books and projects, follow on Twitter, or learn more »

Fun fact: Perishable Press has been online since 2005, and features over 800 articles and more than 11,000 comments. More stats »