Loading...

Introduced 5 Obsolete Features in HTML5

View: 347    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

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 termobsolete 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 h1h6elements — 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.

Introduced 5 Obsolete Features in HTML5

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.

Posted on 19-03-2016 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 17    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 21    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 29    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 27    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 20    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 17    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 258    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 210    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd