Lesson 9 - Tags To Avoid
Throughout these tutorials we have written well formed and structured HTML. From Lesson 1 of the HTML4 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
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 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 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 s Tag
The strike Tag
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
Frames allow more than 1 document to be loaded on a page!
- Bang go bookmarks to the page
- Makes navigation hell for people using screen readers
- Search engines get confused
- You need to use the Frameset DTD
- Say goodbye to mobile web viewers that require XHTML
- Adds avoidable complexity
The frameset Tag
The <frameset> 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 /> is a self closing tag used to define a subwindow for use within the <frameset></frameset> element.
The noframes Tag
The <noframes> 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.
HTML is all about the structure of web pages, we continue our lessons by introducing Cascading Style Sheets (CSS) which is all about the presentation.
|Deprecated Tags - Transitional DTDs||Presentational 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|
|The <font> font tag|
|Frames - Frameset DTDs|
|The <frame />subwindow tag|
|The <frameset> window subdivsion tag|
|The <noframes> alternate non-framed content tag|