The pragmatic guide to HTML: Tags

Tag	Type	Description	Recommendation
`a`	functional	Creates a link when the `href` attribute is used, destination anchor when `name` attribute is used. Affects default rendering in several ways when the `href` attribute is present.	Use for links, with inline content only if possible. For destination anchors, use `id` attribute (for any suitable element, such as `h2`) instead. Can be used as general-purpose inline markup (cf. to `span`) to turn inline content into an element to which attributes like `class` and `id` can be attached to. However, note that by the formal rules, `a` elements must not be nested.
`abbr`	formatting	Causes a dotted bottom border on some browsers. May affect some assistive software when `title` attribute is used.	Don’t use. Instead, explain abbreviations in text when needed. The only excuse for using `abbr`, with `title`, would be for accessibility when prevented from using better approaches.
`acronym`	formatting	Causes a dotted bottom border on some browsers. May affect some assistive software when `title` attribute is used.	Don’t use.
`address`	styling	Formatted as a block, with content in italic or slanted on most browsers.	Don’t use.
`applet`	embedding	Embeds a Java applet.	Use for Java applets (which are rarely used, and should not be used e.g. for navigation).
`area`	functional	Defines an area in a client-side image map and its properties.	Use in client-side image maps.
`article`	formal	Rendered as a block on modern browsers.	Use if you think the tag name is descriptive, but treat as “custom tag”.
`aside`	formal	Rendered as a block on modern browsers.	Use if you think the tag name is descriptive, but treat as “custom tag”.
`audio`	embedding	Embeds sound	Use in special situations where integrated HTML5 embedding of audio is needed.
`b`	formatting	Bold face font.	Use for highlighting and other purposes (inline only) when bold face is the desired default rendering.
`base`	notational	Sets base address for relative URLs (when `href` attribute is used) or default value for `target` attributes in links (when `target` attribute is used).	Avoid, except in an index frame when using frames. Normally, use server-side techniques instead.
`basefont`	styling	Sets default font properties. Browser support inconsistent.	Don’t use. Use CSS instead.
`bdi`	formatting	Defined to create a bidirectional isolate; no browser support yet.	Use when left-to-right and right-to-left writing is mixed. Back up with CSS.
`bdo`	formatting	Forces a writing direction(left to right vs. right to left).	Use when forced writing direction is needed (in rare situations).
`bgsound`	embedding	On some browsers, adds a background sound.	Don’t use.
`big`	formatting	Larger font size. The effect may resist browser settings more effectively than `font` tag and CSS settings	Use for highlighting and other purposes (inline only) when larger font size is the desired default rendering. Consider `font` as an alternative with more options.
`blink`	formatting	Makes text blink on some browsers.	Don’t use, except in special circumstances with due warnings. Blinking, if required, is achieved by other means more controllably.
`blockquote`	formatting	Indents 40px on the left and on the right. Adds an empty line before and after.	Use when such margins are a suitable fallback rendering, e.g. for long quotations, examples, and emphasized blocks. Tune with CSS.
`body`	formal	The tag has no effect (though the element has default properties: 8px margins).	Unnecessary, but can be used for clarity (or to use attributes like `onload`).
`br`	formatting	Forces a line break.	Use when forced line break is needed and this cannot be conveniently achieved by using block elements. Note that e.g. using `div` for stanzas of a poem or lines of an address, instead of separating them by `br` tags, makes it possible to refer to the lines as elements, in CSS and in JavaScript.
`button`	functional	Creates a button	Consider using this instead of `input` buttons, for richer presentation
`canvas`	functional	Creates a playground for HMTL5 drawing operations	Use when HTML5 drawing is appropriate.
`caption`	formatting	Specifies a caption for a table	Use for data tables (in most cases).
`center`	formatting	The content is rendered as a block so that each line is horizontally centered.	Use if centering e.g. an image is desired. (For headings and tables, use the attribute `align=center` or CSS instead.)
`cite`	formatting	Italic or slanted font.	Use if you like (e.g., for names of books), but `i` is more concise.
`code`	formatting and functional	Monospace font; keeps the text intact in some automatic translation systems (but not all).	Use for computer code and other expressions that are human-language invariant and can acceptably be rendered in monospace font. But use CSS, too, to set the font.
`col`	formatting	Sets properties for a table column	Mostly not needed, but may be useful as formatting backup for old versions of IE.
`colgroup`	formatting	Sets properties for a table column group.	As `col`, but even less useful
`command`	functional	Defines a command or a shortcut, but little browser support so far (proposed HTML5 element)	Don’t use (until clarified in specifications and implemented).
`comment`	functional	On some versions of IE in some modes, causes the content to be ignored.	Don’t use.
`data`	formal	No effect.	Mostly useless. Could be used to associate machine-readable data with text, to be used in client-side scripting.
`datalist`	functional	Specifies a set of predefined options, but little browser support so far (proposed HTML5 element)	Use with great caution.
`dd`	formatting	An entry in a `dl` list, rendered as a block (not indented).	Use for a “name” in a list of name/value pairs.
`del`	formatting	Overstriking.	Use it when overstriking is suitable default rendering (rarely).
`details`	functional	On some browsers, the content of this element is initially hidden except for the `summary` sub-element, which is displayed in a special way, and clicking on it reveals the other content somehow.	Use with caution. Possible use that may degrade tolerably: `<details> <summary><b>How to do things</b><br></summary> Explanation goes here. </summary>`
`dfn`	formatting	Makes the font italic in most browsers.	Don’t use.
`dir`	formatting	Like `ul` but without list bullets in some rare browsers.	Don’t use.
`div`	formatting	Creates a block, with a line break before and after, but with no default margins.	Use as a wrapper for a piece of text that should appear as a block and for which `p` or other markup is not suitable.
`dl`	formatting	A list of name/value pairs	Use for a list of name/value pairs.
`dt`	formatting	An entry in a `dl` list, rendered as an indented block.	Use for a “value” in a list of name/value pairs.
`em`	formatting	Italics	Use if you like (e.g., for emphasized words), but `i` is more concise.
`embed`	embedding	External content embedded	Use to embed videos or sound
`fieldset`	functional	A block with a border (possibly with rounded corners), around it. Some browsers treat the content as a functional group of form fields	Use when such formatting is suitable for grouping form fields. Note: Any special features of the border may disappear if you style the element with CSS.
`figcaption`	formal	Rendered as a block on modern browsers.	Use if you think the tag name is descriptive, but treat as “custom tag”.
`figure`	formal	Rendered as a block on modern browsers.	Use if you think the tag name is descriptive, but treat as “custom tag”.
`font`	formatting or styling	Sets font face, size, or color.	Use as inline markup. Use a `size` attribute value of 5, 6, or 7 when preferring a default font size larger than `big`, or (in rare cases) with `size` attribute value of 1 when preferring a default font size smaller than `small`. You can also use a `color` or `face` attribute when settings color or font family for words or pieces of text for which no other markup is more suitable.
`footer`	formal	Rendered as a block on modern browsers.	Use if you think the tag name is descriptive, but treat as “custom tag”.
`form`	function	Defines a form for getting user input. Rendered as a block. and submitting it to processing	Use as a primary tool for interaction
`frame`	embedding	Defines a frame	Use when using `frameset`.
`frameset`	embedding	Embeds external content in frames	Avoid, but can be used e.g. for implemented handbook-like material with a table of contents etc.
`h1` thru `h6`	formatting and functional	Usually affects font size and boldness. Rendered as a block with top and bottom margins. Affects search engines and assistive software.	Use to define headings, starting with `h1` (main heading), using `h2` for second-level headings, etc.
`head`	formal	No effect	Use if you think the explicit tags improve code readability.
`header`	formal	Rendered as a block on modern browsers.	Use if you think the tag name is descriptive, but treat as “custom tag”.
`hgroup`	formal	No effect.	Don’t use.
`hr`	formatting	Horizontal line.	Use when a horizontal line is desired in default rendering. Otherwise, horizontal lines are better drawn using borders in CSS.
`html`	functional	No effect as such, but can be used to carry useful attributes.	Use for all documents, to declare the language with the `lang` attrubute.
`i`	formatting	Italic or slanted font.	Use for highlighting and other purposes (inline only) when italic is the desired default rendering.
`iframe`	embedding	Embeds external content and allows it to be replaced using a link	Consider as one of the options when embedding is needed
`img`	embedding	Embeds an image	Use for content (not background) images
`input`	functional	Creates a field for user input	Use for text boxes, radio buttons etc. in forms.
`ins`	formatting	Underlines the content on many browsers.	Don’t use.
`isindex`	functional	Creates a very simple form-like interface to a server-side script.	Hardly ever needed.
`kbd`	formatting	Monospace font.	Can be used for text representing user-typed text, if default rendering in monospace is acceptable. Set the font in CSS.
`keygen`	functional	Creates a key pair for encryption on some browsers.	Use when key pair generation is desired and the browser differences are acceptable.
`label`	functional	Associates the content with the specified form field in varying ways (e.g., clicking on the element may set focus on the field or toggle a radio button setting.)	Use for all form fields except buttons.
`legend`	formatting	Presents the text over the top border of the enclosing `fieldset` element.	Use if this kind of heading-like construct is suitable for a set of form fields. Do not use just to conform to HTML 4.01 syntax.
`li`	formatting	Within a `ul` element, creates a bulleted item block. Within an `ol` element, creates a bulleted item block.
`link`	functional	Various functions depending on `rel` attribute value.	Use for style sheets (`rel=stylesheet`), favicons (`rel="shortcut icon"`), and possibly other purposes (`rel=prefetch` has some support, and `http-equiv=X-UA-Compatible` may help to avoid some IE oddities). Note that most `rel` values are just theoretical: the tag gets ignored.
`listing`	formatting	Displays the content as preformatted in monospace font, possibly in reduced size. In old browsers, it also caused markup to be ignored, as with `xmp`.	Don’t use.
`map`	functional	Creates a client-side image map.	Use for selections that are essentially graphic (e.g., select an area from a map).
`mark`	formatting	Highlighted (e.g. yellow background) on some browsers.	Don’t use.
`marquee`	formatting	On many browsers, creates a block where the content automatically scrolls horizontally.	Don’t use, except in special (fun?) circumstances.
`math`	functional	On some browsers, the content is processed by MathML rules and displayed as mathematical formulas.	Use in controlled environments only (does not degrade gracefully).
`menu`	formatting	Like `ul` but without list bullets in some rare browsers. Being changed in HTML5 (unpredictably).	Don’t use.
`meta`	functional	Depends on the attributes.	Use `<meta charset=…` to specify character encoding.
`meter`	functional	Creates a meter widget on some modern browsers; other browsers render the (fallback) content.	Use when the widget is illustrative. Include the numeric value in normal content too.
`nav`	formal	Rendered as a block on modern browsers.	Use if you think the tag name is descriptive, but treat as “custom tag”.
`nobr`	formatting	Prevents line breaks inside the element.	Use to prevent undesired line breaks inside text (when no-break is insufficient.)
`noembed`	functional	On IE, the content is ignored.	Don’t use.
`noframes`	functional	Defines alternate content for no-frames browsing	Useless when frames are used properly.
`object`	embedding	Embeds external content	Use in special cases only; `embed` works better
`noscript`	functional	Content is used only when client-side scripting is disabled.	Use sparingly, e.g. to inform that a page does not work at all without client-side script. Usually it is better to apply Unobtrusive JavaScript principles.
`object`	embedding	An external resource is embedded, on supporting browsers, according to complicated rules.	Use for including suitable content, but usually other tags, like `embed` and `iframe`, can be used as well.
`ol`	formatting	Creates a numbered list of items, each as a block.	Use when such default rendering is suitable.
`optgroup`	formatting	The contained options are displayed as indented, with a heading from the `label` attribute of this element.	Use when options of a `select` element can be organized into groups in a useful way.
`option`	functional	Creates an option in `select` menu.	Use in `select` elements.
`output`	functional	Can be used in a specific way in conjunction with client-side scripting in forms, on those browsers that support this HTML5 feature.	Don’t use.
`p`	formatting	Creates a block, with an empty line above and below (though under the principle of collapsing vertical margins and with contextual limitations).	Use for a paragraph of text, when there are two or more paragraphs in succession.
`param`	functional	Passes a parameter to the software that implements the surrounding `applet` or `object` element.	Can be used to pass data when using those embedding elements.
`plaintext`	functional	Causes the rest of the document to be treated a plain text (no markup recognized) and rendered as preformatted in a monospace font.	Don’t use.
`pre`	formatting	The content is rendered as preformatted text (whitespace, including line breaks, are displayed as-is) in a monospace font.	Avoid, but sometimes convenient for program source code.
`progress`	functional	Creates a graphic progress indicator on some modern browsers; other browsers render the (fallback) content.	Use when the widget is illustrative. Include the numeric value in normal content too.
`q`	functional	On some browsers, causes quotation marks to be inserted before and after the content.	Don’t use. Use quotation marks.
`rp`	functional	On browsers supporting Ruby markup, the content is not rendered. On other browsers, it is rendered as normal text.	When using Ruby markup, use this element to provide parentheses or other punctuation for fallback rendering.
`rt`	formatting	On browsers supporting Ruby markup, the content is rendered in small font above other content (determined by Ruby markup rule).	When using Ruby markup, use this element to provide Ruby annotations.
`ruby`	functional	Delimits a part of text where Ruby markup (supported by some browsers) is applied.	Use when Ruby markup is useful, mainly for pronunciation information and other small annotations for text in East Asian languages.
`s`	formatting	Overstriking.	A compact alternative to `del` and `strike`. Hardly useful unless compactness of code is more important than understandability of code.
`samp`	formatting	Usually a monospace font is used.	Can be used for text representing computer output, if default rendering in monospace is acceptable. Set the font in CSS.
`script`	functional	The resource referred to be the `src` attribute is parsed and executed as JavaScript code. If there is no such attribute, the contents of the element is processed that way.	Use for client-side scripting. Normally, put the the script in an external file and refer to it via the `src` attribute.
`section`	formal	Rendered as a block on modern browsers.	Use if you think the tag name is descriptive, but treat as “custom tag”.
`select`	functional	Creates a dropdown list or (when the `size` attribute has a value larger than 1) a listbox in a form.	Consider using for 1-out-of-many choices among 3 to 20 options. (For a larger set of options, a vertical scroll bar often appears. ) An alternative is to use a set of radio buttons. For many-out-many choices, use checkboxes for better usability.
`small`	formatting	Smaller font size. The effect may resist browser settings more effectively than `font` tag and CSS settings	Use for “de-emphasis” and other purposes (inline only) when smaller font size is the desired default rendering. Consider `font` as an alternative with more options.
`source`	functional	Specifies a source of video or audio data.	Use if you use a `video` or `audio` element.
`spacer`	styling	Created vertical or horizontal space on some historical browsers.	Don’t use.
`span`	formal	No effect.	Can be used, instead of the more concise `a` element, to turn inline content into an element to which attributes can be attached to.
`strike`	formatting	Overstriking.	A more verbose alternative to `del`.
`strong`	formatting	Bolds the text.	Use if you like (e.g., for emphasized words), but `b` is more concise.
`style`	functional	The contents is parsed and used as a CSS stylesheet.	Can be used for small style sheets and in testing. Normally, it is better to use an external stylesheet by referring to it with a `link` tag.
`sub`	formatting	Lowers the baseline of text and may reduce font size. The specific effects vary considerably by browser.	Avoid. Use `span` and CSS instead, or in some special cases subcript characters like “₂”. Setting font size for `sub` leads to browser incompatibilities. If non-CSS fallback is essential, use this tag and tune the vertical placement but not font size.
`summary`	functional	On browsers that support the `details` element, this element contains the initially visible part of that element and clicking on it reveals the details.	Use if you decide to use the `details` element.
`sup`	formatting	Raises the baseline of text and may reduce font size. The specific effects vary considerably by browser.	Avoid. Use `span` and CSS instead, or in some cases superscript characters like “²”. Setting font size for `sup` leads to browser incompatibilities. If non-CSS fallback is essential, use this tag and tune the vertical placement but not font size.
`table`	formatting	Contents are rendered in a tabular manner.	Use tables freely but sensibly.
`tbody`	formal	Groups table rows into an element.	Use when you need to style a set of rows or otherwise process it as a unit.
`td`	formatting	The content is rendered as a table cell, left-aligned.	Use for table data cells in general.
`textarea`	functional	Creates a multi-line scrollable text input area in a form.	Use for any user input item that may reasonably be longer than one line.
`tfoot`	formatting	Groups table rows into an element and renders them below all other rows.	Mostly, don’t use. Could make sense in a large table where it is useful to repeat the table header row(s) at the bottom of each (printed) page.
`th`	formatting and functional	The content is rendered as a table cell, centered, in bold. Some assistive software uses `th` cells as table headers for the purposes of accessing other cells.	Use for table header cells, especially column headers. Tune the alignment and font weight in CSS if needed.
`thead`	formatting	Groups table rows into an element. On some browsers, this group is repeated at the start of any printed page where the table is continued.	Use for any table that has header rows. Especially useful (on modern browsers) for long tables.
`time`	formal	No effect.	Mostly useless. Could be used when processing times and dates in client-side scripting.
`title`	functional	The content is displayed in the top bar or a tab of the browser or otherwise made available. It has considerable impact on search engines. It may also appear in print copies.	Use on every page. Formulate carefully and informatively.
`tr`	formatting	The content is rendered as a table row.	Required in tables.
`track`	functional	On supporting browsers, defines a track of video or audio.	Can be used within `video` and `audio` element, but support is rather limited.
`tt`	formatting	Monospace font.	Can be used when monospace font is the desired default rendering.
`u`	formatting	The content is underlined-	Can be used in the rare cases when underlining is the desired default rendering.
`ul`	formatting	Creates a bulleted list of items, each as a block.	Use when such default rendering is suitable.
`var`	formatting	Italics or slanted.	Use if you like (e.g., for variables), but `i` is more concise.
`video`	embedding	Embeds video	Use in special situations where integrated HTML5 embedding of video is needed.
`wbr`	formatting	Specifies an allowed direct line breaking point.	Use liberally in strings where a direct break is acceptable, as well as after a hyphen in words.
`xml`	functional	On IE, the content is not rendered but treated as an XML data island.	Don’t use.
`xmp`	functional	The content is rendered as uninterpreted (tags shown as data, not interpreted) and as preformatted in monospace font.	Can be used for convenience. Usually it is better to use other elements and escape the characters “<” and “&”.

Detailed descriptions of tags:

HTML5 Doctor
HTML5, developer version
Caniuse.com, tables for support of HTML5, CSS3, etc.
Index of HTML 4.01 elements
HTML Support History (old, describing legacy markup)
HTML Elements (IE)
HTML Elements (Mozilla Developer Network)

Meanings of the words in the “Type” column in the table above:

embedding: Inclusion of external content, such as images, videos, etc.
formal: The tags have no effect, though attributes may have effects, and the element is part of the DOM.
formatting: Layout and other rendering feature that may be essential for understanding the content.
functional: Behavior of the browser in a dialogue with the user or otherwise, apart from simple rendering. This may also include search engine behavior.
notational: The tag has no direct effect but it affects the interpretation of other tags.
styling: Visual presentation for esthetic reasons.

Attributes

To be written one day, perhaps.

accesskey, target etc.