HTML Quick Reference

We are in the process of moving away from XHTML to HTML5. What this means in practice is that whilst we are limiting the use of HTML5-specific tags, we are relaxing our markup specifications a little in line with the new HTML5 standards. However for the sake of consistent, readable code, we recommend adhering to XHTML-style markup as a best practice.

In addition, there are some conventions we follow that provide "hooks" for Javascript functionality and make the site more consistent in its behaviour.

Syntax Recommendations

  1. All tags and attribute names should be lowercase

    However attribute values can be mixed case if they are not from a pre-defined set.
    e.g. <input type="text" ... /> but not <input type="Text" ... /> (value 'type' belongs to a predefined set); whereas <a href="http://www.sanger.ac.uk/" title="Wellcome Trust Sanger Institute"> is OK (free text value)

  2. All elements which can have end tags should have end tags

    e.g. <p>Paragraph</p><p>More</p> not <p>Paragraph <p>More

  3. All paired tags must be nested correctly

    e.g. <p>This is some <b>bold text with <i>italics</i> inside</b>.</p>

  4. Attribute values must always be enclosed in quotes

    e.g. <td colspan="2"> not <td colspan=2>

  5. All attributes must have values

    e.g. <input type="checkbox" name="choose" checked="checked" /> not <input type="checkbox" name="choose" checked />

  6. Anchors used for jumping between links should have an id attribute not a name

    <a href="#foo">Go to foo</a> <a id="foo">Foo</a> Also, ids must match the pattern [A-Za-z][A-Za-z0-9:_.-]*

  7. All ampersands should be encoded as &amp;

    This includes alt text, titles and external URLs. E.g. <a href="http://www.unseen.ac.uk/index.php?project=hex&amp;id=pstibbons">Interesting Page</a>

    For internal links, the Ensembl server has been configured to accept a semicolon in URLs instead: e.g. <a href="/Homo_sapiens/Location/View?db=core;r=1:1-100000">

HTML Elements and Attributes

Linking to other pages

  1. Internal links should not include the site URL

    e.g. /Homo_sapiens/Info/Index not www.ensembl.org/Homo_sapiens/Info/Index
    This is to ensure that links don't break on archives. However in a few circumstances, e.g. contact forms, we do want to link to, e.g. the live site, so that the visitor always gets up-to-date information even if visiting an old archive.

  2. Relative internal links should not trace back up the document tree

    i.e. they should not contain paths with ../ in them. This is because such links will break if the document is ever moved. Link from the HTML root, e.g. /info/docs/api/index.html, for preference.

  3. Links to external sites should be marked as such:

    e.g. <a href="http://www.google.com" rel="external">Google</a>

Deprecated presentational tags - use CSS instead!

<basefont><center><sub>
<font><u><sup>
<big><s><xmp>
<small><strike>
<tt><listing>

Note that <b> and <i> are OK in HTML5 - use them for situations where the convention requires bold or italics (e.g. scientific names, journal citations) but not literal emphasis.

Deprecated structural tags

<acronym><frame><frameset><noframes>
<applet><dir><menu><embed>

In practice, <applet> is the only one likely to be seen on the Ensembl website, and replacing it with the preferred <object> tag can be fiddly!

Allowed tags

Just about all HTML elements can take the attributes id, class, style and title; to save typing these out each time, the shorthand [std] is used.

There are two categories of deprecated attributes: presentational ones that can easily be replaced with CSS, which I have denoted with italics, and other attributes for which there is no straightforward replacement.

Element Allowed attributes Deprecated attributes
Principal document elements
html xmlns, xml:lang, lang version
head - -
body [std] background, bgcolor, text, link, alink, vlink
Document head
link href, type, rel, rev, media target
style type (required), media, title -
meta name, content, http_equiv
Text
div [std] align, nowrap
p [std] align
span [std] -
br [std] clear
pre [std] width, align
h1...h6 [std] align
address [std] align
blockquote [std] align
q [std] -
cite [std] align
em [std] -
strong [std] -
dfn [std] align
kbd [std] align
Rules, images, hyperlinks and image maps
hr [std] align, noshade, size, width
img [std] + src (required), alt (required), height, width, usemap, longdesc name, align, border, vspace, hspace
a [std] + href, shape, coords, type, accesskey, tabindex name, target
area [std] + alt (required), href, nohref, shape, coords, accesskey, tabindex target
map [std] + name
Lists
ul [std] type, compact
ol [std] start, type, compact
li [std] value, type
dl [std] compact
dt [std] -
dd [std] -
Tables
N.B. Note that whilst cellpadding, cellspacing and border attributes are allowable in tables, a more consistent look can be achieved using CSS.
table [std] + width, cellpadding, cellspacing, border, summary align, valign, bgcolor
caption [std] align
tr [std] align, valign, bgcolor
th and td [std] + colspan, rowspan align, valign, bgcolor, width, height, nowrap
col [std] align, valign
colgroup [std]
thead [std]
tbody [std]
tfoot [std]
Forms
form [std] + action (required), method, enctype target
fieldset [std] -
legend [std] + accesskey align
label [std] + for, accesskey -
input [std] + type, name, value, checked, size,, maxlength, src, accesskey, tabindex, alt, usemap, accept, disabled, readonly align
select [std] + name, size, multiple, tabindex, disabled -
option [std] + value, selected, disabled -
optgroup [std] + label, disabled -
textarea [std] + rows and cols (required), name, accesskey, tabindex, disabled, readonly -
button [std] + name, value, type, accesskey, tabindex, disabled
Executable content
script type (required), src, charset, defer language
noscript - -
object [std] + classid, type, data, codebase, archive, codetype, declare, standby align, width, height, border, hspace, vspace
param type, value, valuetype -