5 Obsolete Features in HTML5

On October the 28^th, 2014, HTML5 became a W3C Recommendation. HTML5 certainly isn’t a new topic and a lot of developers are aware of its features: semantics, accessibility, APIs, and so on.

However, during the evolution of the standard, some elements, attributes, and APIs have been added and then changed or removed. Because it’s hard to keep up with all the news and updates in our field, some of you may have missed features that have been deprecated or removed from the specification. In this article we’ll cover five of them.

Obsolete vs. Deprecated

Before we delve into the features this article will cover, I want to be sure that you know the difference between deprecated, a term most of you might be familiar with, and obsolete.

The HTML 4.01 spec defines a deprecated feature as something you should not use, but that browsers should keep supporting. On the contrary, an obsolete feature is something that is listed for historical purposes only and no browser support is required.

The HTML5 specification updated the terminology. The term deprecated isn’t used anymore, and the term obsolete has a different meaning. In particular, obsolete refers to elements or attributes that will trigger warnings in conformance checkers. Although you should not use them, it’s possible that browsers support them and will do so for a long time, in harmony with the principle of backwards compatibility. Examples of older obsolete features are the border attribute on an img element and the name attribute on an a element.

To give you an idea of the difference of these terms in HTML 4.01 and HTML5, the font element is deprecated in HTML 4.01, and obsolete in HTML5.

With this in mind, let’s discuss five of these obsolete features.

1. The hgroup Element

The specification defined the hgroup element as typically used to group a set of one or more h1–h6 elements — to group, for example, a section title and an accompanying subtitle.

This element was introduced to easily create subtitles and address an important problem in the document outline algorithm. In fact, when grouping multiple heading elements in an hgroup, the outline algorithm was supposed to mask all but the highest level heading in the group from the resulting document outline.

I’ve been a fan of this element since I learned about it but, unfortunately, in April 2013 it was removed from the W3C’s specification. On SitePoint Craig Buckler covered this event in his article RIP HTML5 <hgroup> Element.

An example of its use is shown below:

<article>
   <hgroup>
      <h1>5 deprecated features of HTML5</h1>
      <h2>Sometimes specifications are changed
      and you need to refactor your code</h2>
   </hgroup>
   <p>In this article we'll discuss...</p>
</article>

Today, if you want to add a subtitle in your HTML pages, you can use a snippet like this, as recommended in the spec:

<article>
   <h1>
       5 deprecated features of HTML5
       <span>Sometimes specifications are changed
       and you need to refactor your code</span>
   </h1>
   <p>In this article we'll discuss...</p>
</article>

Other possible alternatives can be found in the HTML5.1 spec.

Now, all of that being said, what’s odd is that the WHATWG version of the spec, still includes hgroup. I prefer the W3C’s version of the spec, and the consensus seems to be that hgroup isn’t needed anymore.

2. The pubdate Attribute

The first drafts of the specification of the time element defined a pubdate attribute. It was a Boolean indicating that a given date was the publication date of the parent article element or, in the absence of a parent article element, of the whole document.

An example of use is shown below:

<article>
  <h1>The title of my article</h1>
  <p>Lorem ipsum dolor sit amet, consectetur 
  adipiscing elit. Nunc laoreet luctus rhoncus.</p>
  <footer>
    <p>Published on <time datetime="2014-10-25" pubdate>October the 25th, 2014</time></p>
  </footer>
</article>

In this case, October 25, 2014 would be the publication date of the content inside the article element.

Unfortunately, pubdate was removed from the specification. However, you can still provide the same information by using the BlogPosting schema and its datePublished value, as shown in the following example:

<article itemscope itemType="http://schema.org/BlogPosting">
  <h1 itemprop="headline">The title of my article</h1>
  <p itemprop="articleBody">Lorem ipsum dolor sit amet, consectetur 
  adipiscing elit. Nunc laoreet luctus rhoncus.</p>

  <footer>
    <p>Published on <time datetime="2014-10-25" itemprop="datePublished">October the 25th, 2014</time></p>
  </footer>
</article>

3. The scoped Attribute

The scoped attribute, another Boolean, is intended for use on the style element, allowing you to indicate that the CSS inside the targeted style attribute is limited in application to the content inside the parent element of that same style element.

The goal of this attribute isn’t to violate the well-known principle of the separation of concerns, where you want to keep the structure, style, and behavior separate. Its aim is to address some specific use cases like adding styles that are only needed for a limited set of elements on a page, or adding user-defined styles to wiki or CMS content.

scoped is also intended to make the content “portable”, so you could take an entire chunk of HTML from one document, and put it in a new document (maybe injecting it via JavaScript, or syndicating it) and the styles would go with the content.

An example of its use is shown below:

<article>
  <h1>The title of my article</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Nunc laoreet luctus rhoncus.</p>
  <section>
    <style scoped>
      p {
         color: red;
      }
    </style>
    <h2>Another title</h2>
    <p>This paragraph will be red.</p>
  </section>
</article>

You might have noticed that in discussing this attribute I’ve used the present tense instead of the past. The reason is that while the support for scoped has been dropped in Chrome, it’s still supported in Firefox.

4. The command Element

The command element was a void element that represents a command that the user can invoke. Once a command was defined, other parts of the interface could refer to the same command, allowing many access points to a single feature, to share aspects such as the disabled state. There isn’t much information about this element but you should not care anyway because it’s now obsolete.

An example of its use, taken from the MDN page, is shown below:

<command type="command" label="Save" 
         icon="icons/save.png" onclick="save()">

5. The center Element

You’re probably wondering why I’m mentioning this one, since this tag was already deprecated in HTML 4. The center element was a block-level element that allowed you to horizontally center all its content within its containing element. It was deprecated in favor of CSS’s text-align property, helping to keep presentational HTML out of a document.

In HTML5, this element is considered obsolete due to its presentational nature.

I’m sure that all of you are aware that this element should not be used but I’ve included it for a good reason: this post by Remy Sharp.

A few months ago, he tweeted the following message:

The <center> tag is awesome. Why have I been avoiding it all these years.

— Remy Sharp (@rem) August 13, 2014

Several people, including me, thought he was being sarcastic but then he followed up with the blog post to explain his point of view. He explained that although center isn’t semantic and is obsolete, if you want to use an alternative, you have to employ a span or a div element, which are nonsemantic elements. But to use them you also need to use CSS to actually center their content. So, his reasoning is, why not use the center element instead?

Despite the fact that I understand his opinion and what he was trying to say, the center element isn’t something I’d use nor I’d suggest to anyone. But what do you think?

Conclusion

So to sum up: In case you missed some of news and discussions on HTML5 standards, and are still using one or more of these elements and attributes, you’re now aware that they are gone.

We’ve considered how sometimes elements and attributes that seemed useful at first didn’t generate much interest in developers or browser vendors. For this reason they have been removed from the specification, and thus are now obsolete.

Frequently Asked Questions about Obsolete Features in HTML5