Tags to AvoidS2C Home « Tags to Avoid

Throughout these tutorials we have written well formed and structured HTML. From Lesson 1 of the HTML Intermediate Tutorials we even started to write all our HTML as Strict XHTML. This gave us several benefits including compliance with mobile browsers.

In this chapter we discuss the tags that are not part of the HTML/XHTML strict DTDs and presentational tags that are better left to CSS.

Pages written using the Frameset/transitional DTDs are not future proofed, and in the case of the Frameset DTD fail XHTML compliance completely (say goodbye to all those mobile web viewers). So they will be mentioned here for completeness and then I will sweep them under the carpet as if they never existed.

Presentational Tags (use CSS instead)

The <b> tag Tag

The <b> tag and its' closing </b> tag are used to define bold text and can be replaced with the <strong> tag. For even greater control use the CSS font-weight property.

The <big> Tag

The <big> tag and its' closing </big> tag are used for defining a large text style. Use the CSS font-size property for more fine grained control.

The <hr /> Tag

The <hr /> tag is a self closing tag used to draw a horizontal line in the browser and rendering varies dependant upon the browser being used. Standard results can be better achieved using the CSS border property.

The <i> Tag

The <i> tag and its' closing </i> tag are used to define italic text and can be replaced with the <em> tag or the CSS font-style property.

The <small> Tag

The <small> tag and its' closing </small> tag are used for defining a small text style. Use the CSS font-size property for more control.

The <sub> Tag

The <sub> tag is used for defining subscript text. Use the CSS vertical-align property for more control.

The <sup> Tag

The <sup> tag is used for defining superscript text. Use the CSS vertical-align property for more control.

The <tt> Tag

The <tt> tag and its' closing </tt> tag are used for defining teletype (monospaced) text. Use the CSS font-family property for mono spaced fonts

Deprecated Tags - Transitional DTDs

The <applet> Tag

The <applet> tag and its' closing </applet> tag are used to define an embedded applet. Use the <object> tag to define embedded objects for use in HTML.

The <basefont /> Tag

The <basefont /> is a self closing tag used to define the font, font size and font colour for the entire HTML document. Standard results can be better achieved using CSS. The CSS font property allows you to set the above values as well as others with more control, so use that instead.

The <center> Tag

The <center> tag and its' closing </center> tag are used to centre text. The CSS text-align property allows this with more control, so use that instead.

The <dir> Tag

The <dir> tag and its' closing </dir> tag are used to define a menu list. Use the <dl></dl>, <ol></ol> or <ul></ul> elements to define the type of list you want and use CSS to style it.

The <font> Tag

The <font> tag and its' closing </font> tag are used to define the font, font size and font colour. Standard results can be better achieved using CSS. The CSS font property allows you to set the above values as well as others with more control, so use that instead.

The <isindex /> Tag

The <isindex /> tag is a self closing used to define a single line input control prompt. Use the <input /> tag and an appropriate <type attribute instead.

The <menu> Tag

The <menu> tag and its' closing </menu> tag are used to define a menu list. Use the <dl></dl>, <ol></ol> or <ul></ul> elements to define the type of list you want and use CSS to style it.

The <s> Tag

The <s> tag and its' closing </s> tag are used to create strike through text. Future proof results can be better achieved using the <del> tag or preferably the CSS text-decoration property.

The <strike> Tag

The <strike> tag and its' closing </strike> tag are used to create strike through text. Future proof results can be better achieved using the <del> tag or preferably the CSS text-decoration property.

The <u> Tag

The <u> tag and its' closing </u> tag are used to underline text. Underlined text on a web page implies a link so better not to underline your text to avoid confusion. If you really, really have to underline a non-link use the CSS text-decoration property instead of this tag for future proofed results

Frame Tags - Frameset DTDs

Avoid Frames

Frames allow more than 1 document to be loaded on a page!

  1. Bang go bookmarks to the page
  2. Makes navigation hell for people using screen readers
  3. Search engines get confused
  4. You need to use the Frameset DTD
  5. Say goodbye to mobile web viewers that require XHTML
  6. Adds avoidable complexity

The <frameset> Tag

The <frameset> tag and its' closing </frameset> tag are used to define a subwindow instead of a body in HTML for use with the <frame></frame> element.

The <frame /> Tag

The <frame /> tag is a self closing tag used to define a subwindow for use within the <frameset></frameset> element.

The <noframes> Tag

The <noframes> tag and its' closing </noframes> tag are used to define content to render when frames are unavailable and is used within the <frameset></frameset> element.

Lesson 9 Complete

This concludes our exploration of HTML and I really hope you enjoyed the lessons and learnt from them, as I did from writing them.

What's Next?

The lessons are complemented by the reference section which gives in-depth explanations of all the HTML 4.01 tags cross referenced in alphabetical, function and lesson order.

HTML is all about the structure of web pages, in the next section of the site we continue our lessons by introducing Cascading Style Sheets (CSS) which is all about the presentation.

HTML4 Reference

Deprecated Tags - Transitional DTDsPresentational Tags
The <applet> Java applet tag The <b> bold text tag
The <basefont /> base font tag The <big> large text tag
The <center> centre text tag The <hr /> horizontal rule tag
The <dir> directory list tag The <i> directory list tag
The <font> font tag The <small> small text tag
The <isindex /> single line input control prompt tag The <sup> superscript tag
The <menu> menu list tag The <tt> teletype (monospaced) text tag
The <s> strike through text style tag
The <u> underline text tag
Frames - Frameset DTDs
The <frame />subwindow tag
The <frameset> window subdivsion tag
The <noframes> alternate non-framed content tag

go to home page Homepage go to top of page Top