Keryx (X)HTML Elements Best Practice Sheet

Warning! This page is not being maintained and may contain outdated information. Just use the HTML5 doctype anyway!

All elements are sorted within their groups in prioritized order. Recommended (X)HTML versions are mint-colored. You may like the PDF-version or the Open Office version better, especially for printing. Version 1.09 (2009-06-30).

HTML 3.2 HTML 4.01 strict HTML 4.01 transitional HTML 4.01 frameset XHTML 1.0 strict XHTML 1.0 transitional XHTML 1.0 frameset XHTML 1.1 XHTML 1.1 Basic (X)HTML 5.0 [B]lock / [I]nline / [T]able [I]nvisible / [N]ormal / [R]eplaced Semantic meaning Usability & Accessibility Best practice SEO notes Notable browser issues Unstyled appearance
Element Standards Information
Document structure
<html> B N Viewport
<head> I
<body> B N The main content of the document A special case block element. Margin: 8px;
<title> I The documents title or name Make unique for every page Highly ranked and will be the link-text Text on the title-bar
<meta> I Only ”name = 'description'” is useful
<link> I Indicates explicit relationship between this document and other resources. As such there are many good uses!
<style> I External style sheets are usually best
<script> I Unobtrusive DOM-scripts, please! Keep scripts external Test for capabilities, not browsers! Script may have output
<noscript> s I* I Unnecassary with unobtrusive scripting techniques! Forbidden in XHTML5. Not ignored by true XML parsers!
<base> I Ignored by MSIE for scripts
<basefont> D D I Use CSS
Non element markup constructs
<?xml ?> s XML declaration Better skip. It will put MSIE <= 6 in quirks mode and is NOT obligatory. In theory best place to specify encoding for offline usage of an XHTML document.
<!DOCTYPE> What flavour of (X)HTML is used? Required in every version since HTML 2.0! Will trigger standards compliance or quirks mode
<!-- --> Code comment Use richly while learning and developing. Strip to reduce bandwidth. MSIE has conditional comments
<![CDATA[ ]]> DDD D s Unparsed character data Use for inline JavaScript in XHTML Opera may ignore CSS if MIME is true XHTML
Basic semantics
<h1> to <h6> B N Heading Use in correct order Highly ranked Large bold text, gradually smaller. Margin-top/bottom
<hgroup> B N The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. (It is still being discussed.) No browser/AT technology combo support it yet.
<p> B N Paragraph Margin-top: 1em;
<em> IN Emphasized text Usually spoken louder Do not equate with ”italics” Emphasised words may get higher ranking. Italics
<strong> IN Important text Usually spoken really loud! Do not equate with ”bold” Bolder
<abbr> IN Abbreviation ”All acronyms are abbreviations”. Make sure they are not confused with links. CSS-speech: Spell out initialisms. Not in MSIE abbr[title], acronym[title] { border-bottom: dotted 1px; ]
<acronym> INAcronym
<blockquote> BNLonger quote Do not equate with indentation Indented right and left.
<q> IN Short quote No quotation marks in MSIEQuotation marks
<cite> IN What work is cited Not the quote as such Italics
<ins> I*N Inserted textBetter turn underlining off Underlined
<del> I*N Deleted text Strike through
<dfn> I NDefined word Italics
<mark> I N Marked or highlighted text Use to highlight matches to search string
Hypertext
<a> I* NLink Link text should be understandable out of context. May contain block elements in (X)HTML5. Any element with an id should replace its use as anchor rel=”nofollow” means it will not increase targets page rank. rel=”canonical” marks the preferred URL for a resource. Blue underlined text. Images get a blue border.
Page structure
<div> B N Part of page Use a semantic element if available. Avoid divitis
<span> IN Avoid ”spanmania”
<pre> B N May override ”width” in MSIE 6 Preformatted
<hr> B R Thematic break Do not use for visual purposes only. Color' for MSIE, 'background-color' for Gecko A bar
<address> BN Contact information Always use hCard for addresses, but in combination with <address> for contact info. Italics
<section> BR Document or application section Section takes priority over h1-h6Does not equal <div>
<article> B NStand alone capable section Today: Good values for id or class attributes!
<aside> BN ”tangentially related to the content”
<header> BN The header element represents a group of introductory or navigational aids. A header element typically contains the section's heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.
<footer> BN Footer for a section
<figure> BRParagraph with a caption Caption will probably be mandated. Content may be a image. Proposed replacement for misuse of  fieldset
<headings> Set a heading
<listing>D B (Parsed as CDATA, preserved whitespace)
<xmp>D B
Visual formatting
<br> IN (Line break) May be only option for a WYSIWYG editor Line break
<b> I N May get a sligthly elevated rank Bolder
<i> I N Italics
<sub> I N Subscript
<sup> I N E.g. Use with simple math, footnotes, and when part of language idiom. Superscript
<big> I N Use CSS Bigger
<small> I N (”Smallprint” in (X)HTML5) Smaller
<tt> I N Fixed width font
<center> D D D D B N Centers everything!
<font> D D D D I N Changes font settings
<u> D D D D I N Avoid underlining always (even with CSS), since it will look like a link. Underlined
<s> D D DD IN Use CSS or <del> Strike through
<strike>D DDD I N
<nobr> IN Use CSS insteadNS 4 proprietary, but works in all No line breaks in cell
<wbr> IN MSIE proprietary Suggestion for line break.
Tables
<table> TN Tabular dataDescribe format with ”summary” Not for layout Visible borders
<tr> TNTable row
<th> TN Heading for row or columnUse ”scope” or ”headers/id” Table cell with bold, centered text
<td> TN Table data A table cell
<caption> TN Table captionOften a good idea to have Hard to style Centered above the table
<thead> T N Table head Can be used instead of grouping <tr> with the class attribute Repeats on each page when printing
<tbody> TNTable body MSIE needs this one for dynamically created tables
<tfoot> TNTable footer
<col> T ITable column MSIE catches too many style-rules! Safari does not support  colgroup
<colgroup> TIGroup of columns
Forms (& application-type elements)
<form> BN A formDo not emulate links Normally use the POST methodSpiders do not 'follow' forms
<input> I RInput widget Input widget
<label> IN Explanation for form-controls (Almost) every form control should have a label. Significant increase of clickable area for checkboxes and radio buttons. Tip: add CSS-rule ”cursor: pointer;”
<textarea> IR Enter text Textarea widget
<button> IR Flexible buttonJS for progressive enhancement Button widget
<fieldset> B N Group of form-elements Logical groups of form controls increase usability Border, maybe rounded corners
<legend> B N Heading for group of form elements It might be repeated for each control in speech synthesis. Text in the top border
<select> I R Multiple choice input Menus done with select widgets will not be followed by spiders Drop down list
<option> RItem in such list
<optgroup> RUsed sensibly they helpGroup of such items
<isindex> D DDD B R (Expands to <form> containing <input>) Precursor of form This is a searchable index. + a textfield between two <hr>
Web applications
<bb> I R The bb element represents a user agent command that the user can invoke No browser support these yet (2009-08-22) A user-agent-defined button or the elements descendants.
<command> I R A command the user can invoke Button, radiobutton or checkbox
<datagrid> BR Interactive representation of tree, list, or tabular data Opera 9 is the first browser to support Web Forms 2.0, but that support is only preliminary. There are some JavaScript libraries that implement some functionality.
<datalist> I A list of suggested values for a form control. Use with <option>.
<output> I ”Advisory or transient information...” (D. Goodman) ”Considered to be a form control for the purposes of the DOM” (Spec) Unstyled text
<details> B N Additional information or controls which the user can obtain on demand
<menu> D D D D B N List of commands. Returns in (X)HTML5, with a wider usage than pure navigation. Like <ul>
<meter> I R/N A scalar measurement within a known range. Not decided as of Jan -07
<progress> I R/NA progress bar. (Do not confuse with <meter>)
<time> I NA date and/or time of day
<keygen> I R A key pair generator control Currently (June -09) only supported by Gecko and Opera Selectable list of key sizes.
Lists
<ul> B N Unordered list Lists should be used as much as possible. Many things, e.g. Menus, are really lists. List are easy to scan and easy to see. Do not use for indentation only Bullet list, left indentation
<ol> B N Ordered list Numbered list, left indentation
<li> B N List item Item in <ul> or <ol>
<dl> B N Definition list W3C says use for dialogue and other not obvious purposes, others disagree. Used for ”define” commands in Google
<dt> BN Definition term
<dd> BN Definition data 40px left indentation
<di> B N Groups <dt> and <dd>
<nl> B N Navigation list
<nav> B NNavigation section Not really a list. Put here for comparison with <nl>.
<dir> D D D D B N Directory listing Use <ul> or <ol> Like <ul>
Coding & formulas
<code> INComputer codeUse with CSS-rule: ”white-space: pre;” or the pre element Syntax highlight with CSS-classesMonospaced
<var> INVariable data Not (only) a ”variable” in programmingItalics
<kbd> IN Represents user inputMonospaced
<samp> IN Output from computer Monospaced
Objects, multimedia, etc.
<img> I R Image Do use the alt-attribute, but wisely Use CSS for decorative images. The alt attribute will be indexed for image searches (An image)
<object> I* R (object that normally requres a plug in) Use (X)HTML, CSS and DOM-scripts if possible. Content in objects usually will not be indexed Often bad support for fallback content. MSIE will treat as ActiveX. (Animation, applet, etc)
<param> I
<canvas> I* RProvide fallback content Already supported by all browsers, but MSIE (as of summer 2009) Animation – blank until script starts drawing
<embed> IR Allowed in HTML5, but still inferior to <object> (Animation, video, sound)
<noembed> I (Fallback for embed)
<audio> I R Audio stream Ogg, Vorbis and Theora is supported by FireFox 3.5+. Safari supports QT. (MSIE will probably use wma/wmv.) Controls may be shown
<video> IR Video or movie Video + controls may be shown
<source> I Alternative formats for <audio> or <video>, where the UA chooses the best one
<applet>D DDD I R Use <object>Java applet
<map> I Avoid imagemaps! If you must have one, use the title attribute!
<area> I
<marquee> B NAvoid flickering Do not use. Use unobtrusive DOM-scripts for behaviour. MSIE proprietary, but supported by all common browsers. Scrolling text
<blink> INAvoid flickering NS proprietary, works in OperaBlinking text
<bgsound> IA nuisance!Use the object elementMSIE proprietaryPlays a sound
Frames
<frameset> B Do not use frames! If you must, use the title attribute! Consider using <object> instead of iframe.
<frame> B
<iframe> BR New nested browsing context Only option for rich text editing in Gecko <= 1.8.1 HTML5 introduces seamless frames
<noframes> B I Provide meaningful content and links to the framed content. Not ”you need a better browser”!
Miscellaneous
<bdo> I N Do think about i18n issues Probably better to use CSS
<plaintext> D B N (Stop treat code as HTML) Keep it forgotten! For some uses, see CDATA. Used to be some, but who cares? Monospaced
<ruby> N Ruby overall container MSIE 5+ is currently the only browser that has support for ruby, but it is not complete.
<rbc> ? N Ruby base container
<rtc> ? N Ruby text container
<rb> ? N Ruby base
<rt> N Ruby text
<rp> N Denotes “fallback” characters for ruby
Uncommon proprietary elements
<layer> (DHTML layer + fallback) DHTML era practices stink! Forget these! There never will be a situation where they will solve any real problem. NS 4 proprietary, not supported by any other browser (partial in Safari?). Treated as "unrecognized" in Firefox 3+ and Opera 10.
<nolayer>
<ilayer> (inline layer) (Used to be like iframe)
<comment> (Alternative to <!-- -->) MSIE proprietary, contents will be shown in other browsers but Opera!
<xml> (XML data island) MSIE only
<multicol> CSS 3 will have columns NS 3 and 4 proprietary (Used to be: renders content in evenly spaced columns)
<spacer> Use CSS (Used to be like a spacer gif)

Key and explanations

In standard
D
Deprecated or discouraged = Do not use!
?
Will maybe be in (X)HTML5, but not yet documented.
s
Sometimes available depending upon serialization or other factors.

Block/Inline/Table refers to default CSS rendering and nesting rules. Elements that have display: inline but may contain block elements have been marked I*

Normal/Invisible/Replaced also refers to CSS treatment of the element. Some elements might be more than one. The normal case is listed.

Official information

Useful links

Background and intended use

The recommendations in the table above represents the personal opinion of Lars Gunther, although valuable suggestions have been provided by April Siegfried, Christian Montoya, Alexey Feldgendler and Simon Pieters. This list is intended to be used as a reference while coding (or seeing other's code) and as notes for learning (X)HTML. Strict doctypes that are supported by the browsers of today is recommended for normal web pages. Knowledgeable authors may of course start experimenting with (X)HTML5. Proprietary elements are included for reference if stumbled upon. A few XHTML 2.0 are included as examples of where (X)HTML might be heading in the future.

Book references

Dynamic HTML: The definitive reference, Third Edition, by Danny Goodman. Sebastopol, CA, USA: O'Reilly Media, 2007. ISBN: 978-0-596-52740-2.

HTML 3.0 elements not in table above.

<abbrev>
Turned into abbr
<app>
Synonym for applet
<au>
Synonym for <author>
<author>
Author
<banner>
Special element for ads (+ some more uses)! "Should not scroll". Today: position: fixed
<bg>
Sort of like blockquote
<credit>
Who is quoted with <bg> or who has made an image shown with <fig>
<fig>
Advanced alternative to img. Revived (in changed form) in (X)HTML5 as <figure>
<hp1><hp2>etc
Highlight text in a browser-specified way. Sort of revived as <mark> in (X)HTML5
<fn>
Footnote.
<lang>
Language
<lh>
List header
<math>
Equation or formula (had lots of sub-elements)
<nextid>
Deprecated already by RFC 1866 (5.2.6) but actually supported by MSIE 4+ (sic!)
<note>
Explanatory note outside of text flow. May be revived in (X)HTML5
<overlay>
Used with fig
<person>
Signifies that it is a name
<range>
Defines a range within the document
<spot>
The spot tag can be used to specify a location in the document where there is no tag.
<tab>
Tabulator

Elements that have been part of HTML5 at one point, but dropped

<datatemplate>
The datatemplate element brings together the various rules that form a data template. The element doesn't itself do anything exciting.
<rule>
The rule element represents a template of content that is to be used for elements when updating an element's generated content.
<nest>
The nest element represents a point in a template where the user agent should recurse and start inserting the children of the data node that matches the rule in which the nest element finds itself.
<eventsource>
Server side events.

XHTML 2.0 elements not in table above

Structural module

Accessibilty module

Text module

List module

events module

Handler module

Object Module

Tables module

Xframes

Xforms module


Boring stuff

Version: 1.09. Last update: 2009-06-30. Copyright: Lars Gunther.

Creative Commons: Attribution-NonCommercial-ShareAlike 2.5

Permanent url: http://keryx.se/resources/html-elements/