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 formattingForces 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 functionalCreates 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 formattingItalics Use if you like (e.g., for emphasized words), but i is more concise.
embed embeddingExternal 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 stylingSets 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.
strongformattingBolds 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 formattingItalics 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:

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.