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!

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

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.