The Power of HTML 5 and CSS 3
by Jeff Starr on Sunday, July 19, 2009 – 98 Responses
![[ Electrical Surge ]](http://perishablepress.com/press/wp-content/images/2009/misc-chunks/html-css-power.jpg)
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:
<div id="news">
<div class="section">
<div class="article">
<div class="header">
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
<div class="aside">
<div class="header">
<h1>Tangential Information</h1>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
</div>
</div>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:
<section>
<section>
<article>
<header>
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</article>
<aside>
<header>
<h1>Tangential Information</h1>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</aside>
</section>
</section>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:
div#news {}
div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}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> element
Due 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> element
As 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> element
There 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 elements
In 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:
article header {}
article section {}
article footer {}..or collectively:
section section header {}
section section section {}
section section footer {}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 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 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:
article[id*=post-] {} /* target all posts */
article[id*=post-] header h1 {} /* target all post h1 tags */
article[id*=post-] section p {} /* target all post p tags */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:
article[id*=comment-] {} /* target all comments */
article[id*=comment-] header h1 {} /* target all comment h1 tags */
article[id*=comment-] section p {} /* target all comment p tags */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 <section> or <article> elements. To target specific <section> or <article> elements, we turn to the incredible power of the “:nth-child” selector:
section:nth-child(1) {} /* select the first <section> */
article:nth-child(1) {} /* select the first <article> */
section:nth-child(2) {} /* select the second <section> */
article:nth-child(2) {} /* select the second <article> */In a similar manner, we may also target specific elements in reverse order via the “:nth-last-child” selector:
section:nth-last-child(1) {} /* select the last <section> */
article:nth-last-child(1) {} /* select the last <article> */
section:nth-last-child(2) {} /* select the penultimate <section> */
article:nth-last-child(2) {} /* select the penultimate <article> */More ways to select specific elements
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:
<section>
<section></section>
<section>
<section>Target this section</section>
</section>
<section>
<section>Target this section</section>
</section>
<section>
<section>But not this section</section>
<section>And not this section</section>
</section>
<section></section>
</section>..we could simply use the following selector:
section>section:only-of-type {}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 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.
![[ Jeff Starr ]](http://images.monzilla.biz/serious/jeff-starr.png)
![[ Advertise Here ]](http://images.monzilla.biz/serious/adspot.png)
98 Responses
Add a comment
Teddy – #1
After reading this entry only then I realize the significance of the H5 Wordpress Theme you’ve realized, as well as the importance of you highlighting that the theme doesn’t use any classes or ids (except for the classes assigned to the body tag, and you’ve explained it well over at DiW). I’ve heard of the adjacent and child selector before, but I’ve rarely used them, let alone understand how they can be actually applied. I’ve been using the descendent selector most of the time, and this post came at the right time to help me brush up my knowledge of the less known selectors. Looks like it’s time for me to study the CSS Cheat Sheet again :) heheh!
Thank you so much for explaining how the selectors work! The nth-child and nth-last-child pseudo-classes are very useful too - so far I’m yet to read someone to explain them as in-depth as you did, Jeff. Terrific job you’ve done over here! I wonder how much time and effort you’ve invested in writing this useful entry.
I’ve read a few jQuery/Prototype tutorials so far on how to target the nth-child or nth-last-child siblings, but I guess as CSS3 support becomes more prevalent, we can relieve ourselves from resorting to javascript to make simple things like this work.
Speaking of which, IE6 should really just die :D
Thank you again :) have a great week!
Simon Sigurdhsson – #2
Good article, although I would like to point out that <section> is getting kind of mis-used here. The <section> element is supposed to mark up sub-sections of articles, it is not something you’d use to wrap an article. I wrote a post about it myself some time ago.
And also, <section> is not just a “semantic <div>”.
Umut M. – #3
This is a very nice article to give an idea on how html5 and css3 will effect all.
Raphirau – #4
This article nicely shows how we can benifit from HTML5 and CSS3 !
Wayne Smallman – #5
While I can see the benefits, we’ve gone from division soup to semantic mayhem — there are just too many ways of doing the same thing.
If someone starts mixing up all of the different methods within the same sheet, their code will be reduced to an indecipherable mess…
Thom Lohman – #6
I’m not sure that I’m comfortable with the implication that assigning IDs (less so with classes) to elements blurs the line between content and presentation. Though it’s not a matter of semantics, an “ID”–once assigned–becomes an intrinsic part of establishing an element’s identity (subject to scripted or programmatic changes, of course), but says nothing about how an element and its descendants should be styled or presented. I may be viewing this issue through some lens of opportunistic antiquity, but I rather like assigning IDs (responsibly and in appropriate measure) and not relying completely on hierarchical relationships between elements that may not always be preserved.
Great post though–definitely excited for HTML5–rather dejected about the demise of XHTML 2, as I’ve preferred its embracing of strictly composed, clean code. Either way, HTML5 is an improvement over the white elephant that HTML 4 has become!
Mike Bruns – #7
I have to agree with Wayne on this one. The “div-soup” as you call it only gets cumbersome if you let it.
What is presented here with HTML 5 seems cleaner yes, but it also seems like it would create more headaches as far as singling out various elements to be styled.
I’ll be sticking with XHTML for a while if this is the future.
manoj karmocha – #8
Great reading you article !
is this technology started to be implemented globally?
I am a also a css developer , I am looking forward to implement in my upcoming projects..
Kenneth Nordahl – #9
Isnt it a error in the following?
section:nth-child(1) {} /* select the first */
article:nth-child(1) {} /* select the first */
section:nth-child(2) {} /* select the second */
article:nth-child(2) {} /* select the second */
Computers start to count at 0 right? … so the correct code is
section:nth-child(0) {} /* select the first */
article:nth-child(0) {} /* select the first */
section:nth-child(1) {} /* select the second */
article:nth-child(1) {} /* select the second */
Jeff Starr – #10
@Kenneth: According to the W3C:
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
Kenneth Nordahl – #11
Ok, my comment was mixed up with section:nth-child(2n+1) {} - styling of every 2nd child element of the section.
Src: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
Under the heading “Zebra-striping the Comments”.
Jason G Backus – #12
Big thanks from those of us currently swimming in div soup.
Andrew Shooner – #13
In your substring example, you’re adding what is essentially class assignment (’post-’) into the element’s id. Doesn’t this decrease the semantic meaning? The increased semantic meaning in HTML5 is only going to be useful if it is used in the same way by all producers of html5 markup; I forsee plenty of debate about the intended meaning of all these that will approach religious exegesis. This could make writing markup as chaotic and vague as SEO is today.
Monkey – #14
Hey Jeff. Great article. The only thing I’d have to be wary of is current compatibility. Which browsers support HTML5/CSS3? I assume firefox already does, but you know how IE likes to be a few years behind its competitors. I *still* have PNG transparency issues with some viewers. I doubt HTML5 and CSS3 will have any sort of defense against non-compatibility for current browsers.
To be honest, I haven’t really looked into HTML5/CSS3 much past this article, so I ask you this: When will it be compatible (as in, is all of this released yet?)/Which browsers -already- support it? Since you linked to a wordpress page completely in HTML 5, its obviously already been released :)
Great article though - I must admit I still use Tables for layout purposes (however, I’m considering moving completely to AS3), but when I do use Tables, I always put them in DIV’s ;) Getting the best of both worlds…
Cheers!
James – #15
Wow, I had no idea HTML 5/CSS 3 would be so versatile. I can’t wait to dive in. I hope I don’t drown in the semantic sea. It’s a lot bigger than the div soup bowl.
Brad – #16
There are some good CSS3 articles around, I have used a couple of the tricks like rounded corners on DIVs and @font-face. But some of it puts you right back in the soup with the browser specific commands for certain things.
Simple rounded corners
.border_rounded {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 0px solid black;
Only good in Safari and Foxfire. Explorer supports little of CSS3 at this time.
Am I mistaken or is HTML5 leaning towards xml somewhat?
anon – #17
“I’ll be sticking with XHTML for a while if this is the future.”
Agreed.
Sunny Singh – #18
I love how semantic HTML5 is and how well you can indicate selectors through CSS3. I will however probably not replace the way I’m coding right now (XHTML being my markup of choice) but use CSS3 and a bit of HTML5 to further improve on it. For example, I love the new tags but ID’s are something that will just be used a bit less, but I’m not going to go into an id/class less design. My most favorite is the nth-child thing and such that when you want to target some divs or paragraphs within a section that will most likely have an id to define its purpose.
I just hope we don’t see further errors with HTML5 as we did with HTML4 and even XHTML.
Sunny Singh – #19
Oh one more thing, did Brad (comment 16) call Firefox “Foxfire?” :l
brad – #20
I would like to say that was a test but I cant.
Bleyder – #21
Jeff, I enjoyed reading your article.
But I still think that the best we can do for now is preparing for HTML5 with semantic class names (http://jontangerine.com/log/2008/03/preparing-for-html5-with-semantic-class-names)
Jonny Haynes – #22
A great article demonstrating the power of HTML5 and CSS3.
Rhy – #23
I like semantic HTML and all, but I honestly don’t see how “section” has appreciably more meaning than “division”. They’re basically synonyms. And it isn’t as if we refer to areas on a page exclusively as “sections” — in point of fact, a “section” more often means a collection of related content on a website.
Having “header” and “footer” tags is nice, and I like “article” and “figure”. I agree that these elements in particular will convey more meaning on the machine level than “div id=’header’” does, though I do have some reservations about the specifics of the spec.
As Andrew pointed out, however, the inherent meaning of a tag does “mean more” when there is consensus. You may have seen the posts on Zeldman’s blog recently about the “nav” element (when I was reading through the working spec I had the same questions).
One good thing is that the spec does attempt to define in detail and portray appropriate and inappropriate useage scenarios — at least if you view it on whatwg. But we know if common useage and understanding does not follow the spec, the common understanding will be the reality rather than the theoretical documentation.
Terrific article as an overview, but it’s important to me to note that more advanced CSS 2 and CSS 2.1 selectors still don’t work in IE — use of CSS 3 selectors will require workarounds in browsers for years to come. I know I sound like a naysayer, but I’ve been disappointed by new techniques too many times. ;-)
Sean Tubridy – #24
The lightning makes me think of the Emperor in Return of the Jedi.
“Now, witness the power of this fully semantic and controllable markup language!”
Alexandru Dinulescu – #25
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.
Austin Web Design – #26
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?
Yeah but... – #27
If only people would stop using that antiquated IE8 ;)
http://a.deveria.com/caniuse/#agents=All&eras=All&cats=HTML5,CSS3,SVG&statuses=rec,cr,wd,ietf
brad – #28
Note to Yeah But
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).
But I know that’s a moot point :)
I am seriously looking forward to HTML5 and CSS3.
Wardell – #29
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.
Dave – #30
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).
Good article!
Jerry – #31
I am glad to say good bye to everything and hello to a better way of doing things with CSS and HTML
Tinus Guichelaar – #32
Link: http://www.visualmedia.nl/html5/tinus/
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.
Things you can see in action here:
* HTML 5 markup
* CSS 3 border-radius
* CSS 3 selectors
* CSS :before pseudo element
* XMLHttpRequest
* getElementsByClassName
liberta – #33
Salut
Dommage que ton thème m’empêche de pouvoir visionner ton article. Je réessayerai plus tard.
Jeff Starr – #34
@liberta: S’il vous plaît essayer encore avec ce thème:
http://perishablepress.com/press/index.php?wptheme=Requiem
Merci :)
Anthony Calzadilla – #35
Great article. CSS3 and HTML5 are quickly becoming the dividing line between progressive designers and the… not so progressive.
PaulREs – #36
Great! Can’t wait to implement it! But thanks to IE, will have to wait a bit…
Clarjon1 – #37
Hey, this is great stuff, glad to see the HTML5 that will be used… Will have to work on updating my site at some point, lol.
Keep up the great reporting!
Erken – #38
Nice and powerful, there are some things I will definitely apply to my website whenever (and if) I decide to change it over to HTML 5 and CSS3! Nevertheless the problem remains with IE not supporting these new features. Maybe having a dual version would help (i.e., an old version of the website using basic HTML and CSS for IE, and the new shiny HTML5/CSS3 powered one for the other browsers)
Luke Jones – #39
I’m ridiculously excited about utilising these new technologies. I’m redesigning my personal site at the moment and I’m about 75% sure that I’m going to code it using HTML5 - I need to investigate what browsers visitors are using, but hopefully it’ll be moz or webkit-based browsers.
Either way I’m using CSS3 - I already am.
clarjon1 – #40
@luke jones:
I don’t know if your host allows it, but one good stats tool for checking what browsers your users are using (as well as some neat things, like some potential landing keywords, etc) are with awstats. It’s open source too, so you can set it up yourself, unless you host provides something.
One thing that I’m liking about these new standards are the tags, Just think, no more having to mess around with flash paramaters, converting videos to space wasting FLV format…
But i digress, lol.
Luke Jones – #41
@clarjon1: Thank you, I’m pretty sure my host has awstats installed. I’m being hosted by peartreeuk/pearspace who are a great company (always recommended).
PS. checked out your x-files site - pretty awesome. I love the x-files.
nuxdie – #42
«section section section {}» — is that semantical⁈
i suppose something like:
«.news .section .header» — is much more semantical, isn’t it?
Andy – #43
@nuxide
Exactly. We replace 1 element with 3 or 4, but I seriously doubt we cut the idiosyncratic classes and IDs by the same factor.
Jeff Starr – #44
@nuxdie: classes work great when needed, but much style is possible using general selectors such as
<section>or<div>. Class specific elements when it makes sense to do so, but many designs aren’t dealing with<section><section><section>complexities.Takuhii – #45
I know this is just an example, but is getting very over used here, and surely the semantics of web design stay the same, in the fact that a good semantically written web page only has ONE per page.
Or am I being TOO pedantic?
Trackbacks / Pingbacks