The Elements and Attributes You Should Avoid in HTML5

Elements you should avoid:

After the introduction of several new elements in HTML5, it is now time to talk about what you should be avoiding in HTML5.

Ever since CSS was invented, web developers have been always told to segregate design from content. Let CSS take care of the styles and HTML take care the structure and content of your page.

In HTML5, the life of the following elements have come to an end. They have no role to play because CSS has grabbed it all:

  • <basefont>
  • <big>
  • <center>
  • <font>
  • <strike>
  • <tt>
  • <u>

The following elements have nothing to do with styling but they are simply the bad guys in HTML coding because they have been blamed of “damaging” usability and accessibility:

  • <frame>
  • <frameset>
  • <noframes>

The following elements are not included in HTML5 because they have not been used often, created confusion, or their function can be handled by other elements:

  • <acronym> is gone, use <abbr> instead for abbreviations.
  • <applet> has been obsoleted in favor of object.
  • <isindex> usage can be replaced by usage of form controls.
  • <dir> has been obsoleted in favor of <ul>.
  • Finally the <noscript> element is only conforming in the HTML syntax. It is not included in the XML syntax as its usage relies on an HTML parser.

If you still insist on using these elements, you web page will not blow, and yet, the web browser will still be supporting it. However, the cost of doing this is – your page will not pass  HTML5 validation!

Attributes you should avoid:

In HTML5, none of the attributes should be used for styling purposes. The rule of the thumb is, styling should be taken care of by CSS.

What I mean by  “styling” is, attributes such as font size, color, border, and font family, etc. i.e. whatever is used for presentational purposes.

In the table below are listed the attributes that you should avoid using:

Attributes Elements
align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
alink, link, text and vlink body
background body
bgcolor table, tr, td, th and body
border table and object
cellpadding and cellspacing table
char and charoff col, colgroup, tbody, td, tfoot, th, thead and tr
clear br
compact dl, menu, ol and ul
frame table
frameborder iframe
height td and th
hspace and vspace img and object
marginheight and marginwidth iframe
noshade hr
nowrap td and th
rules table
scrolling iframe
size hr
type li, ol and ul