Continuing our examination of HTML5, this time we’ll take a slightly deeper look at the state of HTML5 support in browsers. We’ll step through several major features, examine the technical hurdles in place, identify the level of browser support and finally provide some recommendations on whether or not to pull the trigger with that shiny new feature.
New Semantic Elements
HTML5 has added many new semantic elements. These both codify existing, common patterns and offer new, meaningful ways mark up your content. So, for example, going forward, instead of using <div id="header"> we will now just use <header>. Some other examples (with definitions culled from the specification) include:
section
The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.
footer
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
nav
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
article
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
That’s far from a complete list, but it should serve to give you the flavor of what’s available.
Support
This is a curious case. If, by “support” we mean “doesn’t break anything” then the support here is broad. Using the HTML5 Shiv code snippet or the full blown Modernizr library every browser that matters supports the HTML5 elements. If you’re expecting user agents to do something interesting with your new elements, then the support level is much lower. Read the rest of this entry »
I promised one last post on HTML elements. This is it. This one will be a quick tour through some of the new semantic HTML5 elements. I’ve been using them regularly for a while now and I’m still trying to wrap my head around the best way to use some of them (in this, I’m not alone.) Hopefully sharing what I’ve learned will help jump start your own work with the new stuff and will help my clarify my own thoughts on the new elements.
This should really be fun.
header
This is one of the most straightforward of the new elements. <div id="header"> becomes <header>. Done. When I’ve presented on HTML5 people just nod when I point this element out. Hopefully this one just makes sense.
One experimental note
One thing we’ve been experimenting with at work is using multiple headers on a page. The pattern looks like this: Read the rest of this entry »
This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then. Read the rest of this entry »
In case you were wondering, I’ve got two more posts after this one and then I’m moving onto CSS and JavaScript. I’ve got a post on forms (which I’ve been avoiding because forms feel like work) and then a post on the new HTML5 elements and then that’s it.
Writing about CSS and JavaScript will be fun. I’m excited. More excited than I am to write about forms at least. Which isn’t to say I won’t kick ass when writing about forms. It’ll be great.
Ignore me.
On with the show:
B, Strong, Em, I
From the just in case you were wondering what’s up with strong and em and why people use them over b and i department:
The b (bold) and i (italic) tags have been in HTML forever. I haven’t figured out when they first appeared, but they were promised as part of the documentation to the fist web site in August 1991 and later codified as part of the unofficial HTML1 spec in 1993, so 1992 is as good a bet as any.
Later on the concept of “phrase elements” was introduced. They were meant to add “structural information to text fragments” Two of those, strong and em are basically new versions of good old b and i minus the typographic baggage.
* 3.3 Use style sheets to control layout and presentation. [Priority 2]
The proper HTML elements should be used to mark up emphasis: EM and STRONG. The B and I elements should not be used; they are used to create a visual presentation effect. The EM and STRONG elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)
This recommendation stuck. A lot of code has been written with strong andem and all good IDEs use them when you press the b and i buttons on the toolbar. They’re pretty standard now.
And that’s how we got to strong and em.
And now you know.
Interestingly, b and i are making a comeback in HTML5, having been given a new semantic lease on life. More on that in a couple of weeks. Read the rest of this entry »
Before I jump into the proper way to use tables, I’m going to share an anecdote that should bring a smile to the face of anyone who’s done this stuff for a while.
A few months ago I was both pleased and surprised to discover a web developer who didn’t really know how to lay out a page using tables. He had a sense of how it might work, but had never really done it. I was having him help out with an HTML email (where tables are still the safest bet) and the whole thing was a novelty for him. Looking at it, this makes sense as he’d been at the job for only a few years so he learned entirely in the modern era and he was lucky enough to only learn from good sources. Still, it was a new phenomena for me- encountering a developer who was purely from a CSS-based layout world.
Yes! We’re winning.
If you don’t know what I’m talking about when I talk about tables for layout, move along. There’s nothing to see here.
Lists! They might seem boring, but if you look at a lot of site source code (good sites at least,) you’ll see a lot of lists. A lot of obvious content on the net is in the form of lists (which is why there are three separate constructions for them) and a few years ago we started using them for less-obvious, but still valid reasons.
Using Lists as Menus
The biggest, non-obvious, use of lists is for menus. Someone, somewhere, pointed out that menus were just lists of links. Couple that insight with the power of CSS to bend boring old lists to the designer/developer’s will and we had a de-facto standard on our hands.
Here’s what the menu system for DrunkenFist.com looks like. It’s a lot of code, but it’s a fully-realized version of the pattern, so it’s useful to look at in whole. As a note, this is an HTML5 site, so the nav element is in place signifying to browsers that “the following block represents site navigation.” I’ll be covering the new HTML5 elements as the very last post on the body. Read the rest of this entry »
We’ll finish up our tour of the body tag with several posts featuring general notes about common content elements. I’ll be taking my time with these as getting this stuff right will go a long way towards getting the most out of your site.
Comfy?
On with it then.
Links <a>
The link is the engine of the web. The concept of Hypertext (the H in HTML) itself is expressed in the power of the link. Google is Google because of the power of links. There is no better place to start.
Basic usage
<a href="http://www.drunkenfist.com/"
class="contact"
title="my personal site"
rel="me">DrunkenFist.com</a>
Write Good Link Text
For body copy you want to write link text that is descriptive of the link destination. generally this means a short phrase (5-10 words, depending on who you ask) that clearly describes the link. For that reason “click here” is generally not the greatest link text. For a live example and more on this topic take a look at link chapter of the the US Government’s Research-Based Web Design & Usability Guidelines. It’s full of really interesting tips on handling links.
For the SEO-minded, the above advice has the added bonus of generally including keywords which flow link juice and context to the targeted page. Read the rest of this entry »
Five posts in and finally we get to the heart of the matter- getting your content onto the page for your users to enjoy. This will be done in two parts. This, the first part, will deal with how to structure your HTML so it makes sense from and organizational standpoint and so that you can easily style it with CSS. Let’s look at a stripped down example of what I’m talking about.
You’ve all seen this, but now here it is from the official channel.
Speaking of WordPress and HTML5, I’m knee deep in the process of getting DrunkenFist.com relaunched and I’ve been doing the WordPress component for the past few days. It’s super complicated. Which means, of course, I’m having a blast with it
Last time out we looked at the Anatomy of a Web Page. Using that, let’s move on and look at the first of the two major sections, the head.
For the sake of this blog post, the head includes two pieces of code that are actually before the head. Sue me
Using the head from my (recently updated) starter assets project as an example, let’s look at the code in detail. First, what it looks like in total: Read the rest of this entry »
