HTML is a much richer language than what it's used for. There are 77 elements and each one has a certain purpose. It is possible to find that reason by reading the specification, but who does that?

HEAD - Container for meta data in the document

For validation, you only need title inside this element, but typical documents have a link element for the stylesheet, a script element for the javascript, and some meta data inside meta elements.

HR - Horizontal line

Don't use. This is design, the same effect can be accomplished through <code lang="css">border-bottom</code> in CSS.

Some people claim that hr is a section divider, but isn't that what we have divisions for?

HTML - Wrapper for everything except the doctype

The HTML element can be used as a wrapper (an outer div around all content). Use this to get rid of one unnessesary wrapper.

Also takes the lang attribute that tells browsers what lanugage the site is written in.  This is extra useful for screen readers that needs to change their pronunciations. Language codes are available through the US Library of congress. Use the two letter variants.

I - Italic text

Don't use. Purely presentational way of adding italic styling. Use the em element instead.

IMG - Embedded image

Used incorrectly very frequently. IMG should only be used for images that can be considered content on the page. An example of this is a thumbnail gallery or a helpful image somehow connected to the text. Things that shouldn't be img elements are decorations: rounded corners, bullet points in lists, and page dividers. Use <code lang="css">background-image</code> in CSS for that instead.

If the image contains information that you want to convey, use the alt attribute to give that information to user-agents that doesn't load images.

INPUT - Radio button, check box, text field, button, or hidden data

Element used as a building block for form fields. The type is determined by the setting the type attribute to either radio, checkbox, text, image, submit, reset, or hidden.

Other elements normally used together with this one is select and textarea.

Make sure you add an id to each input field and tie an label element to it. No input should be without it.

Wrap your inputs and labels in a fieldset, paragraph or div to stop the validator from complaining that elements are not allowed where they are.

INS - Inserted text

Similar to del, this element can be used to mark deleted text.

Might be useful for tracking changes in your document but again, I have never seen a site where this element was needed.

KBD - Text that should be entered on the keyboard

One of the numerous elements that can be used to mark up documents about computers. Rarely used.

How do you know your user will use the keyboard?

LABEL - Text that describes a corresponding form field

The for attribute associates this element with a form field id. Important out of an accessibility standpoint, both because it gives screen readers better info and because it makes form fields clickable (in most browsers, but not Safari).

LEGEND - Heading for a fieldset element

Wrap this element inside each of your fieldsets to provide a reason why you think the following fields belong together. Typical examples include Credit card, Full address, and Shipment details.

Somewhat tricky to style since browsers handle them very differently. I tend to keep them pretty plain.

LI - Items in ordered or unordered lists

Gets different styling by default depending on browser: padding-left or margin-left. If you want to change the indention, make sure you first reset the other one.

LINK - A way to define links to other elements  My eBay Store

Most often used to define external stylesheets for the document (use <code lang="html">rel="stylesheet"</code>);

. but can be used to define other types of relations too. Some browsers show custom rel types to users like a list of bookmarks.

MAP - Wrapper for image map areas

Used together with the area element for image maps.

META - Information about the document

Can be used to for custom information about the document.

Search engines use some predefined names that you should know about.

NOSCRIPT - Content to show if the browser doesn't support javascript

The default should be to show content that does not require javascript, we don't need a certain element for that.

OBJECT - Embedding other types of information in to document

The new way of adding flash, quicktime and other multimedia content to your site.

OL - Ordered list of items

Ordering means that the content only makes sense in that order. This means that a step-by-step recipe is an ordered list, but a basic navigation menu is not (see unordered list).

OPTGROUP - Group your option elements

One of the least known elements in HTML. Impress your friends!

Similar to fieldset but for option elements. Wraps around them and uses the <em>label attribute</em> to name the group.

Nesting of optgroups is not allowed.

OPTION - One of the choices in a select

If you set the value attribute, that value is sent instead of the text inside the element.

P - Wrapper around each of your paragraphs

Replacement for line breaks (the br element).

By wrapping all your paragraphs in a p element you can easily change the space between them with margin or padding.

PARAM - Set properties on embedded objects

The exact param names used depends on what you embed, check the documentation for the document you are dealing with.

PRE - Preformatted text

Used to define that a certain piece of text is formatted (designed) in the HTML. While this is most often a bad idea there's applications in e.g. ASCII art, text-only e-mails, and Python code.

Use <code lang="css">white-space: pre;</code> and <code lang="css">font-family: monospace;</code> to get the &#8220;pre design&#8221; with CSS.

Q - Add quotations in a language independent way

Instead of setting what kind of quotes you use (there are several you know), you simply define that you're dealing with a quote and work out the details in a separate file.

Good idea, but no support by IE6 makes it a lot less useful.

SAMP - Sample text or characters

Seriously, don't we have enough of the computer related elements already? If you need sample text that isn't code or keyboard type-in then fine, use this one.

SCRIPT - Run javascript on your site

Remember to set the type attribute to text/javascript if that's what you use. Language is no longer needed.

SELECT - Let the user select among a number of fixed options

Don't forget to use a label for this element too.

It's easy to make selects work without javascript, just add a submit button. Also check so that all options can be reached with the keyboard.

Selects take the size attribute which makes you able to show more than one option at the time. If you set size to something larger than one, you can use CSS to set a height.

SMALL - Presentational way of setting font-size

Don't use. A presentational way of saying that some text is smaller than the rest. Use <code lang="css">font-size</code> in CSS instead!

I've seen some interesting ideas of using this tag for fine print, those copyright messages that always are tiny. The idea is that the size really is tied to the content, and that small therefore is a good semantic way of representing it. I'm not sure, for now I won't recommend people using it.

SPAN - Similar to div but for inline elements

Can be used when you don't find a better representation. Make sure the class you set describes what you mark up instead.

STRONG - Mark something as very important

Stronger than emphasis with the em element.

STYLE - Add style info to your page

Needs to be in the head section of the page, inside body isn't valid.

Don't forget to set the type attribute to text/css.

In my opinion, using link separates the design better than using the style element. It also makes the browser able to cache the CSS.

SUB, SUP - Raised and lowered characters

Don't use. Presentational way of lowering and raising letters with no semantic meaning.

I first confused sup to be valid for math formulas but it says to display things above others, nothing else.

TABLE - Row and column based data

Misused in the tables for layout; days. Tables. Are. Not. For. Layout.

Proper use is for scientific, statistical, or other cell-based data.

Frequently forgotten elements include the thead, tbody, and th elements.

If you nest tables you are doing something wrong.

You can set <code lang="css">border-collapse: collapse;</code> to get rid of the annoying default cellpadding. No attributes need to be set in the HTML.

Combining border-collapse and a border on td elements makes it possible to get nice 1 pixel borders between all cells.

TBODY - Container meant to separate the body of your table from your headers

Simply use this as a way to style your body different from your headers. th elements both in the tbody and thead? Then use <code lang="css">tbody th { ... }</code> to style only the ones in the header.

You can use several tbody elements, something that can be a nice way to divide one big table into several logical parts.

TD - Represent one cell of data

Use padding, margin and border on td and th to change the spacing inside your table.

TEXTAREA - Let users send big chunks of text

The size can be specified with height and width in CSS.

Don't forget a corresponding label element.

TFOOT - Extra information in the bottom of a table

I rarely use this one, most often a caption is what I want below.

A possible use case for tfoot is for adding column sums at the bottom of the table.

TH - Specify that a certain cell is not part of the data, it just describes the other cells.

Very convenient way of specifying a different style for the headers of the table.

Takes the scope attribute if you want to specify what cells a certain table header describes.

THEAD - Container for (some of) the metadata for a table

Some browsers repeat this element on all pages when printing long tables, very useful!

TITLE - Topic of the page summarised in a few words

Single most important part of your site, think a while before setting it.

Meant for a single page, not the whole site.

Required for validation, and gives strange validation errors about head not closed if not included.

TR - Way of specifying rows of table cells

Very few browsers support styling the tr element, so set your styles on the containing table cells instead. Example: If you want alternating row colors you can set a class on the tr element but style the table cells with <code lang="css">tr.odd td { background: ... }</code>.

TT - Text formatted like if it was written on a typewriter

Don't use. Presentational way of adding text that looks like it was written on a typewriter. Use <code lang="css">font-family: monospace;</code> to get the same effect with CSS.

UL - List where the order doesn't matter

Perfect for navigation menus, don't use br for that.

See tip on cross browser use with the ol element.

VAR - Variable of some kind

Another element from the computer science area. Some people claim this can be used for other variables too, but that's a really rare use case. No need to remember.

Source: <a href="http://friendlybit.com/articles/html/>FriendlyBit.com</a>