HTML5 Advanced

Audio & Video

Throughout these tutorials we have written well formed and structured HTML. From Lesson 1 of the HTML5 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.


The hr Element

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 Element

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 Element

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 Element

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

The sup Element

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

Deprecated Tags - Transitional DTDs

The s Element

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 u Element

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

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.

Related Tutorials/Quizzes

NONE

What's Next?

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.

HTML5 Reference