The Boring Side of HTML 5

Posted in: Articles by preitz on

There has been a lot of hype over HTML 5 for the last couple of years. And, to be perfectly honest, much of it is justified. A lot of designers and developers have been showing off websites with an incredible amount of eye candy to hi-light the abilities of HTML 5. Of course most of the eye candy is, in fact, the result of HTML 5’s silent partners: jQuery and CSS3. It is true that jQuery, and Javascript in general, can do a lot more thanks to the new <canvas> tag. And I don’t begrudge giving HTML 5 credit for the work done by its partner technologies.

There is, however, a boring side to HTML 5 that isn’t getting as much attention. I’m talking about the many new features that aren’t specifically designed to drag your attention to a website by your eyelids. There are a number of new tags that are meant to work quietly in the background to make your website run smoothly. Not to mention the fact that using these tags correctly can really improve your search ranking. So let’s take a look at some of them, shall we?

Article

The <article> tag is basically your website’s way of saying, “Hey, Google. My eyes are up here, pal.” In other words, this tag lets you mark the main content of your website. Search engines can now place more importance on the content inside the <article> tag, making it easier to index pages more accurately.

Aside

At the time of this writing, there is a link over there on the right to a post I made about Flash. There are also links to my Facebook and Twitter accounts. None of that has anything to do with what you’re reading right now. And in the olden days of HTML 4, Google would have no way of determining what content was part of the article and what was just fluff. Now both of the sidebars are put in an <aside> tag. This identifies that information as just that: a side bar. This marks information that is relevant to the entire site, rather than just a particular page.

Nav

Of course, not all of the sidebar information is equal. Over there on the left is the main navigation for this site. A search engine may find that information useful for finding interesting related information. So navigation links can be placed inside a <nav> tag.

Header & Footer

Similar to aside, there is also site related information that goes at the top and bottom of a page. Nearly every website I’ve ever seen has some sort of header and footer. So HTML 5 introduced two new tags called, oddly enough, <header> and <footer>.

New Input Types

Remember back in the day when you had to do all that crazy regex validation on form fields; checking for valid emails and phone numbers. Now there are input types that do that for you. There are also a number of other specific types of input. You can see a list of them here.

I actually find it rather odd that, with all the fancy new features of HTML 5, these are the ones I was most excited about. Building websites has become much more organized. And I’m happy to throw away all those div tags.

  • by Chip Mitchell, on January 05, 2012 - 8:40 PM

    Does this mean occasional designer/coders like myself might be able to figure how do tweak a site more readily than in html4? or will just have a whole new set of variables we have to call people like you do dig us out of?