5 Obsolete Features in HTML5

Share this article

On October the 28th, 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 h1h6 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:

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

What are some of the most common obsolete features in HTML5?

HTML5, the latest version of HTML, has deprecated several elements and attributes from previous versions for various reasons. Some of the most common obsolete features include the

tag, which was used to center-align elements, the tag, which was used to define font characteristics, and the and tags, which were used to define frames. These features are now considered obsolete because they are not supported by HTML5 or because there are better, more modern alternatives available.

Why were these features made obsolete in HTML5?

The features were made obsolete in HTML5 to streamline the language and make it more efficient. Many of the deprecated features were considered outdated or unnecessary, and their functions can be achieved using CSS. By removing these features, HTML5 has become a more powerful and flexible language that is easier to use and understand.

What should I use instead of the obsolete features?

Instead of using the obsolete features, you should use the new features and elements introduced in HTML5. For example, instead of using the

tag to center-align elements, you can use the CSS property ‘text-align: center’. Similarly, instead of using the tag to define font characteristics, you can use the CSS properties ‘font-family’, ‘font-size’, ‘font-weight’, etc.

How can I check if a feature is obsolete in HTML5?

You can check if a feature is obsolete in HTML5 by referring to the HTML5 specification provided by the World Wide Web Consortium (W3C). The specification lists all the features that are considered obsolete and provides alternatives for them.

What happens if I use an obsolete feature in my HTML5 code?

If you use an obsolete feature in your HTML5 code, it may not work as expected, or it may not work at all. This is because modern web browsers are designed to support the latest version of HTML, and they may not support the obsolete features. Therefore, it is recommended to avoid using obsolete features in your HTML5 code.

Are there any tools that can help me identify obsolete features in my HTML5 code?

Yes, there are several tools available that can help you identify obsolete features in your HTML5 code. One such tool is the W3C Markup Validation Service, which checks your HTML code against the current HTML5 specification and identifies any obsolete features.

Can I still use obsolete features in HTML5 for backward compatibility?

While it is technically possible to use obsolete features in HTML5 for backward compatibility, it is not recommended. This is because obsolete features are not supported by modern web browsers, and using them can lead to unexpected results or errors. Instead, you should use the new features and elements introduced in HTML5, which are designed to be backward compatible.

How can I update my old HTML code to HTML5?

To update your old HTML code to HTML5, you need to replace the obsolete features with their modern alternatives. This can be a time-consuming process, but there are tools available that can help you automate the process. One such tool is the HTML5 Outliner, which can generate an HTML5 outline from your old HTML code.

What are some of the new features introduced in HTML5?

HTML5 introduced several new features and elements to make web development easier and more efficient. Some of these new features include semantic elements like

,
,
, and
, multimedia elements like

Where can I learn more about HTML5 and its features?

You can learn more about HTML5 and its features from various online resources. The W3C provides a comprehensive HTML5 specification that covers all the features and elements in detail. There are also many tutorials and guides available online that can help you learn HTML5.

Aurelio De RosaAurelio De Rosa
View Author

I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.

deprecated elementshtml5 hgroupLouisLobsolete elements
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form