HTML5

Targeting HTML5′s Semantic Elements with CSS

Targeting HTML5's Semantic Elements with CSSIt would seem that with the introduction of HTML5′s semantic elements, styling those new elements should be an easier task. But as I’ve started to use HTML5 more, I’ve realized that it takes quite a bit of forethought to create maintainable CSS that targets the new semantic elements in a future-proof way.

In some cases, it could be fairly straightforward, but in others it’s a little disheartening because targeting the new elements actually creates more verbose markup.

Let’s consider a few examples. If you had a page that used the <header> element to hold the logo, nav, etc, and the <footer> element to hold the website’s footer, then your CSS would look something like this:

[insert new technology here] is the New [insert old technology here]

SemanticsI wanted to tweet this, but it was too long for Twitter so I thought I’d just post it as a short piece for the weekend.

For those who haven’t seen the news announcing changes to the HTML5 spec on the WHATWG blog, be sure to read that and some of the comments.

But the funniest and most brutally honest comment belongs to someone posting under the name “Hamranhansenhansen”.

When to Use the HTML5 “section” Element

When to Use the HTML5 <section> ElementAfter publishing Easy HTML5 Template last week, and getting some constructive feedback on the contents of the template, something dawned on me that has apparently been alluded to in a few different articles, including one on HTML5 Doctor.

Basically, it seems that HTML5′s new <section> element is confusing and it’s hard to discern its true value. I’ll try to demystify it here by referring back to the spec and discussing, through process of elimination, some ways it could be used.

Easy HTML5 Template

Easy HTML5 TemplateI’ll be the first to admit that when I see a default template like HTML5 Boilerplate, it brings about a swirl of emotions.

On the one hand, I’m ridiculously intimidated by the incredible amount of knowledge and experience that’s been collected into one place for the benefit of front-end developers. So much so, that I wonder what I’m even doing in this industry, because it reminds me of how far behind I am.

On the other hand, I’m inspired, because there’s so much more to learn, and it’s exciting to add new nuggets of knowledge to my toolkit, and I can’t wait to hit the books and grow my knowledge base. It also helps when others express the same feelings about lagging behind. But I’m getting sidetracked.

Is it Accurate to call HTML5-Based Code Forking “Graceful Degradation”?

Your Code is Not as Graceful as This SwanBefore I go into the main content of this post, I just want to say that Bruce Lawson has done a fantastic job of promoting HTML5 education both online and in print. I haven’t had a chance to get a copy of his and Remy Sharp’s book Introducing HTML5 but it is on my definite to-read list.

But sometimes it seems that HTML5 evangelists can get a little bit carried away in their zeal for promoting these new technologies and features, and they inadvertently end up misusing terms.

In my opinion, Bruce does this in Issue #204 of .net magazine, in the recently-revamped “gallery” section that now includes HTML5 websites.