Some less common but useful HTML tags

In addition to the HTML tags in the Beginners HTML tutorial there are many more. This page covers those which are most likely to be useful to you.

Preformatted text

Sometimes you want text to appear just as you typed it - complete with spaces, line breaks, tabs etc.. PRE tags do this. The content inside them will still be parsed as HTML but otherwise it is ideal for displaying raw code such as HTML and CSS. This site uses PRE tags for code examples. By default the text will also be presented using a fixed width font but you can style it.

Showing edits on a page

If you change a page and but want to continue to show the changes you can use the INS element to enclose what you have added and the DEL element to show what you want to delete. That's what just happened in the previous sentence. By default deletions are crossed through and additions are underlined.

You are supposed to include CITE and DATETIME attributes to record why the change was made and when but most browsers do not seem to do much with this data so it's probably easier to use the TITLE attribute to at least make the reasons for changes easy to access:

<del cite="recordofchanges.php" datetime="2010-11-05T00:19:22-19:24" title="changed to illustrate tracking of changes">            
            

The two digits after the T in the DATETIME value is the time zone.

Abbreviations and acronyms

If you use an acronym you may want to put the full text in brackets afterwards but use of the ACRONYM element lets you add a TITLE attribute giving the full text:

<acronym title="Yourwebskills">YWS</acronym>
          

The ABBR element does the same but for abbreviations.

Quotations

Surround the quotations either with BLOCKQUOTE (for long quotes which you want displayed as a new paragraph/block of text) or Q (for in-line quotations within a paragraph of text.

Horizontal rules

Before CSS these were used a lot because there wasn't much alternative.


They just provide dividing lines across the page like that one which was created with this code:

<hr style="width:95%"/>
          

Emphasising text

This used to be done with B tags and still can be. However with the move to HTML being about structure and content only you are better off using styles to make text bold. However, if you want to have some text emphasised (which is what bold is often about) you should use HTML to mark that text. Emphasis is not about how the text looks but marking it as particularly important. That is about document structure. The emphasised word above used the EM element but you could also use STRONG.

Subscript and superscript

This is another example of where the appearance is supposed to convey content. A superscript "2" means something different to a normal 2. SUB and SUP tags are used to tell the browser about text you want shown as subscript and superscript.

submit to reddit Delicious Tweet