HTML Reference

Ben Hunt at Scratchmedia has a Web design blog that I like. He groks Web design in a way that few others do (and by that I mean "well".) I don't agree with everything he says, but I don't agree with what anyone says. (Seriously, ask anyone.) He has an HTML reference table on his site that I feel is a little out-of-date so I copied it here (for the purposes of critique - that's legal.) I cleaned up his HTML, added my own comments and a column for the default display type.

Tag What it is When to use it protonfish's comment Display
<a> Anchor (most commonly a link) Vital. Use to create links in content. Use the title attribute whenever the contents of the <a>...</a> pair do not accurately describe what you'll get from selecting the link. Title attribute often displays as a tooltip in visual browsers, which may be a helpful usability aid. If you think you have to use the title attribute, consider improving your link text instead. inline
<abbr> Defines an abbreviation Works in a similar way to <dfn> and <acronym>, using a title attribute (displays a tooltip in standard visual browsers). e.g. <abbr title="Hypertext markup language">HTML</abbr> I don't get this. Like <dfn> and <acronym>, I have tried working with it and discovered nothing that is a noticable benefit to the designer or end user. inline
<acronym> Defines an acronym Works in a similar way to <abbr> and <dfn>, using a title attribute (displays a tooltip in standard visual browsers). See <abbr>. inline
<address> Used for marking up a physical (e.g. mailing) address Not commonly used. Recommend looking into microformats, which allow for more detail and interoperability. I am not sold on the value of microformats either. block
<applet> Inserts a Java applet The old way to insert a Java app. Use <object> instead today. Better yet, don't use Java applets.
<area> Hotspot in image map Avoid image maps where possible. Occasionally necessary. I've never found it necessary.
<base> Specifies the base location of the document. Use only when necessary. Adjusts any relative links and paths within the document. Just make all your links use the full root path, e.g. <a href="/dir/subdir/page.html">Link</a>. You'll be happier for it, I promise.
<basefont> Sets default font size Display info – never use it You can better define your default font style using CSS.
<big> Larger text Display info – never use it This is only a minor sin. You should never have to use it because <strong> and <em> exist. inline
<blink> Makes text blink You go to hell if you use this Fortunately modern browsers don't recognize this so you are spared the torments of hades ... for now. inline
<blockquote> Large quoted block of text Use for any quoted text that constitutes one or more paragraphs (note: should contain <p> tags as well). Use <q> for quotations within a paragraph. Often used in conjunction with <cite> to cite the quotation's source. block
<body> Document body Essential (unless you're using frames) Don't forget you can add styles to this element (and <html> and <form>) so there is no reason to add more wrapper divs. This isn't Taco Town. (P. S. Don't use frames.) block
<br> Line break This is arguably display information. Still in common use, but use with restraint. Try to do without it first. If you are using this a lot, you are probalby doing it wrong. inline
<b> Bold text Display info – never use it Try using <strong> instead. inline
<button> Used for a standard clickable button within a form Often better than <input type="button" /> or <input type="submit" />, as it allows you to assign different styles based on the HTML element alone, whereas differentiating style based on the type of input is less well supported. inline-block
<caption> Caption for a table: describes the table's contents The correct way to assign a title to a table table-caption
<center> Centred block Display info – never use it. Use <div> or some other block-level tag with the style text-align:center instead block
<cite> Defines a citation Defines the source of a quotation (in conjunction with content in <q> or <blockquote> pairs). inline
<code> Defines an extract of code Not commonly used. Similar to <pre> tag, but collapses consecutive white spaces and line breaks in the source. I use this one a lot for code examples. inline
<col> Identifies a particular column in a table Can be very useful. e.g. <col class="namecol"> can be applied to each first column in a series of tables, then the width of each column may be set to be equal in the stylesheet, overriding the table's natural tendency to adjust its own column widths to fit its contents. It's too bad you can't use this to apply styles other than width to table columns. You can in some browsers, but not Firefox. table-column
<dfn> Definition of a term Works in a similar way to <abbr> and <acronym>, using a title attribute (displays a tooltip in standard visual browsers). See <abbr>. inline
<dir> Directory list Now deprecated. Use a standard <ul> or other list instead. block
<div> Division Specifies a logical division within a document. Use it to separate or identify chunks of content that are not otherwise distinguished naturally using other tags. One of the most common HTML tags. It may be a little too common. Beware the sickness of divitis. block
<dl> Definition list Contains one or more definition-term / definition-description pairs. Also useful for any paired list (not just definitions) such as FAQs. block
<dt> Definition term Used as part of a <dt></dt><dd></dd> pair within a definition list (<dl></dl>) block
<dd> Definition description block
<em> Emphasis Commonly used in place of the old <i> (italics) tag to indicate emphasis (but less than <strong>) inline
<fieldset> Group of form fields You see this a lot nowadays - it can be useful. block
<font> Font settings Display info – never use it inline
<form> Input form Essential for data input block
<h1> Level 1 header Aim to have one H1 on each page, containing a description of what the page is about. For more information, see Naming Your Web Page. block
<h2> Level 2 header Defines a section of the page Don't get too strict with these - they do not represent outline form. There is no intrinsic meaning as to what an h3 is. There are 5 headers (6 minus the h1 which should only be used once) to break up sections of Web pages. You have them, use them. And use them before you start making your own classed divs. block
<h3> Level 3 header Defines a sub-section of the page (should always follow an H2 in the logical hierarchy) block
<h4> Level 4 header Etc. Less commonly used block
<h5> Level 5 header Less commonly used. Only complex academic documents will break down to this level of detail. block
<h6> Level 6 header Less commonly used block
<head> Document head Essential. Contains information about a page that does not constitute content to be communicated as part of the page. none
<hr> Horizontal rule Display info with no semantic value – never use it. "Horizontal", by definition, is a visual attribute. It can be useful to break up sections, but only if necessary. (See <br>.) block
<html>   Core element of every web page. See <body>. block
<img> Show an image Vital. Always use the alt or longdesc attributes when the image has content value
<input> Input fields within forms Vital. (I prefer to use <button> for buttons and submit buttons though) inline-block
<isindex> Old type of search input Not really used any more. Use <form> instead.
<i> Italicised text Display info – never use it inline
<kbd> Keyboard input Display info – never use it I use this a lot. In fact, it is all over this page. I wrapped all HTML tags with it. inline
<label> Describes an input element inline
<link> Defines a relationship to another document Commonly used to reference external stylesheets, but has other minor uses
<li> List item Specifies an item in an unordered or ordered list (<ul> or <ol>) list-item
<map> Client-side imagemap May have occasional value, but only use when absolutely necessary I've never needed it.
<marquee> Makes text scroll across the screen See <blink>
<menu> Menu item list Deprecated. Do not use. Use other standard list types instead. This is coming back - HTML 5 includes it as a supported element. block
<meta> Meta-information Useful way to insert relevant information into the <head> section of the page that does not need to be displayed. If your information is that important, why are you hiding it? Put it in the body of your document.
<ol> Ordered list Type of list where the order of elements has some meaning. Generally rendered with item numbers (best managed with CSS). block
<option> Selection list option Vital for options within a drop-down control.
<optgroup> Group of option elements. This can be useful for breaking up large selection lists.
<param> Parameter for Java applet Used in conjunction with an <object> or <applet> tag to pass additional setting information at runtime. See <applet>.
<pre> Preformatted text Renders text in a pre-formatted style, preserving line breaks and all spaces present in the source. May be useful. (This one's a paradox, as it is strictly display info that applies only to visual browsing, but it's still so commonly used and useful that I'm hesitant to advise against using it.) Wrong! This is display information. Instead of using <pre>, add the white-space:pre style to any element for the same effect. block
<p> Paragraph Only use to denote a paragraph of text. Never use for spacing alone. block
<q> Short quotation Use for inline quotations (whereas <blockquote> should be used for quotations of a paragraph or more). Often used in conjunction with <cite> to cite the quotation's source. inline
<samp> Denotes sample output text Similar to the <code> tag. Rarely used. Avoid. What does he have against code elements? I use this for console and command-line examples. inline
<script> Inline script (e.g. JavaScript) It's better to have all scripts as separate files than to write inline or in the <head> section, however still has its uses. It is frequently better to have scripts in a separate file, but not always. Think.
<select> Selection list A drop-down selector for a form. inline-block
<small> Smaller text Display info – never use it There is no other element that represents de-emphasis. I have found semantic uses for this. inline
<span> An inline span within text Use to apply meaning (and style) to a span of text that goes with the flow of content (whereas a <div> tag is block-level and breaks the flow) inline
<strikeout>   Display info – never use it Maybe you could use this semantically in a page about baseball. inline
<strong> Strong emphasis Use this instead of the old <b> tag. inline
<style> CSS style settings Normally used in <head> section of a page. Try to use external stylesheets, to enable you to apply different styles for different output media.
<sub> Subscript text Arguably display info – recommend using alternative tags (e.g. <cite>). May be required in some academic uses, e.g. Chemical formulas. Like H2O and E = MC2 inline
<sup> Superscript text
<table> Table Use for repeated data that has a naturally tabular form. Never use for layout purposes. table
<td> Table data cell A cell containing actual data. If a cell actually contains a descriptor or identifier for a row or column, use a <th> (table header) tag, not a <td>. This usually applies to column headers (within a <thead>), column footers (within a <tfoot>), as well as row headers (usually the first cell in a row in the <tbody>). table-cell
<textarea> Multi-line text input area in a form Essential inline-block
<th> Table column or row header cell May appear in a <thead> (to denote a column header cell), <tbody> (to denote a row header), and in <tfoot> (to denote a column foot cell, e.g. a total) If you want to get fancy with your table - this is like having two different table cells out-of-the-box. table-cell
<tbody> Indicates the main body of a data table It is always worth using this tag, as well as using <thead> and <tfoot> where appropriate.Note that it is permissible to have more than one <tbody>, <thead>, and <tfoot> in the same table. table-row-group
<thead> The head section of a table The place to put column header cells (<th>) I recommend that you use <td> cells in the header unless you have a specific reason not to. table-header-group
<tfoot> The foot section of a table Good place to put e.g. summary data, such as totals. Note that it goes before the <tbody> tag! table-footer-group
<title> Document title Essential For more information, see Naming Your Web Page.
<tr> Table row Essential with tables table-row
<tt> “Teletype" - simulates typewriter output Similar to <pre>, except that it collapses white space like normal HTML (whereas <pre> leaves all consecutive white space intact). Avoid if possible Similar to <pre> in that you shouldn't use it. I don't even know what a teletype is. inline
<ul> Unordered list Essential. Use for lists where the order or items has no particular importance. block
<u> Underline text Display info – never use it Besides, you should never underline anything that is not a link. inline
<var> Variable in computer code Obscure tag, may only be useful in academic documents. Avoid. I have found uses in code examples. inline