HTML5

Screencast Series on HTML5 and CSS3

By Louis Lazaris / August 31, 2011 / 0 comments

A few months ago, after helping to co-author HTML5 & CSS3 for the Real World, SitePoint asked me to do a related video screencast series on their new Learnable.com website.

I agreed, and the course has been available online now for a few weeks. It was a fun experience, and it’s motivated me to plan for some screencasts here on this site, too. I won’t go into great detail on the course here — you can review the course contents on Learnable.com at your leisure.

Basically, the course consists of 28 separate video tutorials that make up 9 full lessons. Most of the videos are about 10 to 15 minutes long, with a few under 10 minutes, so they’re pretty easily digestible. Lesson 10 is a “resources” section that I’ll probably continue to add to, and Lesson 11 is a “bonus voucher”.

Aside vs. Blockquote in HTML5

By Louis Lazaris / July 12, 2011 / 29 Comments

Choosing the right element for your markup is not a life-and-death situation. Nonetheless, I think HTML becomes easier to maintain and easier to read when content is marked up in a more meaningful manner, in line with the new developments in HTML5.

HTML5 has, as most of us know, introduced a new <aside> element, which I feel can replace the <blockquote> element in specific places where we would normally think a <blockquote> is more appropriate.

Is Your Brand More Important Than Your Website’s Performance?

By Louis Lazaris / June 23, 2011 / 20 Comments

As much as we would like to turn a blind eye to the large number people using Internet Explorer and thus take advantage of CSS3 and HTML5 in all its glory, with certain projects, we really don’t have much of a choice.

If the traffic in a particular niche is IE-heavy, then you have to deal with that accordingly. If you go the Andy Clarke route then you may choose to use those new enhancements to the full, but allow a degraded experience in IE.

If you go the traditional corporate route, then you do everything you can to get IE to look and behave the same as the other browsers. That could mean ignoring a lot of new CSS3 and HTML5 stuff, or else it means filling in the gaps with scripts, hacks, and IE-only filters.

About Obsolete Features in HTML5

By Louis Lazaris / May 24, 2011 / 31 Comments

As many of you may be aware, validating your pages in HTML5 has become a whole new adventure.

Along with changes in what now constitutes “valid” and “invalid” markup, the HTML5 Validator (which, by the way, is the same tool that runs the W3C’s HTML5 validator) will provide some warnings about obsolete features in HTML5.

Feel free to go through that document on the W3C’s site, but here I’ll touch on some things that you may want to be aware of with regards to obsolete elements and attributes.

A New Book on HTML5 and CSS3

By Louis Lazaris / May 18, 2011 / 7 Comments

Over the winter and spring I’ve been pretty busy researching and putting the final touches on four chapters of a new book published by SitePoint.

The book is called HTML5 & CSS3 for the Real World and was officially launched on SitePoint this morning (North American time).

Two other authors took part in this exciting new project: Estelle Weyl — who probably doesn’t need much of an introduction if you’re familiar with many conference speakers in the web standards world — and Alexis Goldstein, a well-rounded programmer from Brooklyn.

Why Developers Should Be Studying HTML5’s Design Principles

By Louis Lazaris / April 1, 2011 / 6 Comments

This is not going to be a long article, but just a quick note about something that all front-end developers should be paying attention to.

If you don’t already know, the W3C has formulated a fairly brief, yet valuable document called HTML Design Principles that outlines exactly what principles have guided and continue to guide the creation and evolution of HTML5 and its related APIs and other technologies.

Targeting HTML5’s Semantic Elements with CSS

By Louis Lazaris / March 29, 2011 / 15 Comments

It 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]

By Louis Lazaris / January 23, 2011 / 0 comments

I 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

By Louis Lazaris / January 12, 2011 / 69 Comments

After 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

By Louis Lazaris / January 4, 2011 / 59 Comments

I’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.