Ten HTML Tags Developers Should No Longer be Using in Web Apps

WEBINAR: Live Date: August 29, 2017 @ 1:00 p.m. ET / 10:00 a.m. PT

How Automation and Preventative Resolution are Transforming Workplace Productivity REGISTER >

In any conversation about HTML5, one needs to consider what's changed and how to adapt to those changes. Although many tags are now deprecated, some still work with some browsers; they should not be used because that functionality could end without warning. In this article, I present ten deprecated tags and tell what you should be using instead. You will also discover that many tags which were once based in HTML are now being controlled by CSS.

1. <font face="">

The HTML markup <font face=””> was used to specify a typeface. It's been deprecated. Instead, use one of the CSS font-family properties. Using the @font-face declaration gives you control over the font(s) used, which can be uploaded to the server. Here is an example of the syntax:

@font-face {
   font-properties
}

Here is an example which shows the CSS and HTML together:

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            font-family: sansation;
         }
      </style>
   </head>
   <body>
      <h2>This is a Heading</h2>
   </body>
</html>

2. <center>

The <center> tag has been deprecated. Use CSS instead. In this case, the text-align property is used to set the horizontal alignment of a text. Here is an example:

h3 {
   text-align: center;
}

Here's an example of the CSS and HMTL together:

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: left;
      }
      h3 {
         text-align: right;
      }
   </style>
</head>
<body>
   <h2>Heading 2 (left)</h2>
   <h3>Heading 3 (right)</h3>
</body>
</html>

The previous code displayed on a Web page
Figure 1: Various heading alignments

3. <img border="">

The border attribute on an img tag was used to place a border around an image. This has been deprecated. Instead, you need to make use of the CSS3 border properties; these are: border-width, border-style, and border-color. You can use this with images or text. Here's an example of how to use the code around some text:

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         border-width: 5px;
         border-color: blue;
         border-style: dashed;
      }
   </style>
</head>
<body>
   <h1>Heading Sample</h1>
</body>
</html>

A bordered heading
Figure 2: A bordered heading

4. <font color="">

The color attribute of the font tag was used to specify the font color. It has since been deprecated and, if used, it could create unexpected results because it is no longer supported by all browsers. To achieve color effects, use CSS3. In CSS3, color is now independent and can be applied to various elements.

Now, colors are defined using the RGBA model, which is red, green, blue, and alpha. Alpha is where you define the opacity of a color and ranges from 0.0 (completely transparent) to 1.0 which is completely opaque. Here's an example of how color might be represented with at text element:

h4 {
   color: rgba(100,0,255,0.3);
}

Here is a code sample:

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         background-color: rgba(0,255,0,0.3);
      }
   </style>
</head>
<body>
   <h1>This is a Heading</h1>
</body>
</html>

A heading with a colored background
Figure 3: A heading with a colored background

5. <big>

The <Big> element was used to make text appear one size bigger than the surrounding text. This element is no longer available in HTML5. Instead, the solution is to use CSS3.

One way to deal with the issue of text size is to write the text like this in CSS:

.big
{
   1.7em;
}

Another option is to use <em> for emphasis, or the <strong> tag to define bold text.

6. <body text="">

The text attribute of the body tag was used to control the text style inside the document body. This has been deprecated. The solution is CSS. Here's an example of what the CSS would look like along with the HTML in a document:

<!DOCTYPE html>
<html>
<head>
   <style>
      p.sansserif {
         font-family: Arial, Helvetica, sans-serif;
      }
   </style>
</head>
<body>
   <p class="sansserif">Here is a sentence using
      the Arial font.</p>
</body>
</html>

7. <listing>

The purpose of the <listing> element was for rendering code on a page. It was never supported well and is now deprecated. If you use it, expect unexpected results.

A better option is to use <code> or to place your content in a <div> and use CSS styling to create the effect you're after.

8. <frame>

The frame tag was used to create multiple independent browsing contexts from a single browser window. This tag is now deprecated and should not be used.

Instead, make use of <iframe>. This is not another version of <frame>. It is a tag which some might think of as an inline frame or internal frame. It doesn't split the browser window. Instead, it allows you to embed one document into another. And, for greater functionality, you can use CSS to style the content.

9. <app>

The <app> tag was the ancestor of the <applet> element. This has been completely removed from the specification in HTML5.

Here's what to use, instead:

  • To embed non-JavaScript applications, use <object>.
  • For media playback, use <video> or<audio>.
  • If you plan to use native JavaScript, use <canvas>.

10. <plaintext>

The <plaintext> element was designed for browsers to render HMTL code as plain text. This made the need for a closing tag unnecessary. This element is obsolete and should no longer be used.

Instead, make use of either the <code> or <pre> elements.

Bonus: Semantic Markup

An important topic to consider is the role of semantic markup. HTML5 changed the structure of a Web page and created descriptive tags which were easier to follow. The main elements are:

  • <header>
  • <nav>
  • <main>
  • <article>
  • <aside>
  • <section>
  • <footer>

For more information on semantic markup, check out the article "HTML5 Semantics in Dreamweaver CS5.5."



Related Articles

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date