Exploring HTML 5
- Some People Have No Class
- Sectioning
- Video, Audio, and Patents
- Forms and Interfaces
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Last time in Introducing HTML 5, I took a look at how HTML 5 has been developed, and some of the new features that it supports for making web application development easier. This week, I'll take a look at some of the features that make it useful even for more document-like web sites.
There isn't exactly a strict dividing line between a web application and a web site. You might regard anything that uses JavaScript as a web application, but some of the early web apps—for example, online stores—didn't use any JavaScript. One distinction that I heard proposed was that web sites are useful if you print them, while web apps are not, but does that mean sites like YouTube are apps?
Obviously, many things that are useful in a document-based site will be useful in web applications, but this week I'm going to look at the things that are useful in a much wider range of contexts.
Some People Have No Class…
As I said last week, static documents have not been ignored. HTML 4 is good enough for most static documents, with the aid of CSS, but there is room for improvement. If you've created a complex HTML 4 document, using clean separation of content and presentation, then you will probably have ended up using <span> and <div> tags with their class attribute set in a very large number of places.
In HTML 4, these are the generic tags you use to mean “some range” or “some block” that has some attributes that can't be specified sensibly using other tags. For example, if you wanted to make a floating figure in HTML 4, you might do something like this:
<div class="figure"> <img src="some file" alt="Haha! Your browser can't display images!" /> <p class="caption">This is a really exciting picture!</p> </div>
You can then specify the layout constraints for the <div> in CSS and provide some additional styling for the paragraph. Someone else doing the same thing might do:
<div class="fig"> <img src="some file" alt="Haha! Your browser can't display images!" /> <p class="picTitle">This is a really exciting picture!</p> </div>
A web browser or, more importantly, some document processor has no idea that these are semantically equivalent. The HTML 5 specification include <figure> and <legend> tags to replace these specific uses, so this example would become:
<figure> <img src="some file" alt="Haha! Your browser can't display images!" /> <legend>This is a really exciting picture!</legend> </figure>
There are quite a few new tags like this for defining things that a lot of people are already doing with class attributes but with standard tags. The <dialog> tag is another example, which uses the same children as the description list with the title indicating the speaker. These let browsers know that the list is being used to represent different speakers. A typical browser will probably ignore this markup and let the web developer style it like an IRC conversation or a screenplay, but this isn't the only use case. Imagine, for example, a speech-based interface. A browser connected to a speech engine might select different voices for each of the speakers and not speak their names.
There are quite a few of these which I'm not going to list. This is a stark departure from the minimalist XHTML 2 direction, where tags that duplicated functionality were strongly frowned upon. With HTML 5, it's considered fine to have tags that could be replaced by spans and divs with class attributes, as long as they are useful. If you read the list, you'll probably find some that you don't find useful, and some omitted that you wish were included.