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 |