Account services

HTML style

The HTML specification has evolved quite considerably since we last visited it with a style guide in 1999. Not so much in syntax - more in principles and semantics. It is now time to specify new guidelines for the coding of HTML for programmers and webmasters to bring Eionet’s websites into the present and be ready for the future.

The ultimate goal of Eionet is to use XHTML 1.1. The XHTML specification is a cleanup of HTML 4 that as a huge plus makes it possible to check for wellformedness, validate it, and otherwise use XML tools such as XSL-T and XSL-FO. As long as the browsers have no native understanding of XHTML, we use a hybrid with XHTML code served as text/html. See this article on XHTML perils. As long as we can’t fully verify that a webpage is wellformed, we use the HTML4 doctype - preferably strict for new pages, transition for old ones.

DOCTYPE declaration

DOCTYPES are essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win.

A recent DOCTYPE that includes a full URI (a complete web address) tells these browsers to render your page in standards–compliant mode, treating your (X)HTML, CSS, and DOM as you expect them to be treated.

Using an incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.

In this setting, the browser will attempt to parse your page in backward–compatible fashion, rendering your CSS as it might have looked in IE4, and reverting to a proprietary, browser–specific DOM. (IE reverts to the IE DOM; Mozilla and Netscape 6 revert to who knows what.)

This really is a hack to get IE to display the same way as the other newer browsers, such as Opera, Konqueror, Safari.

All Eionet pages must have a doctype. Old pages that use deprecated tags, such as <font> use the HTML transitional doctype. It looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

If you can verify that the page is wellformed, meaning <br> is <br/> and <img> is <img/> then you use the XHTML Transitional doctype. This can be difficult to achieve if you use 3rd party software that generate HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Never pages, that are guaranteed clean of deprecated elements and attributes will use the HTML 1.1 doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

A List Apart has a good article on doctypes

As long as a significant number of Netizens use Internet Explorer 6, you can not use the XML declaration (<?xml ...) on XHTML pages. It makes IE6 go into “Quirks” mode. See the W3C article on serving XHTML.

Tags and attributes

All tags and attributes must be written in lowercase. This is an XHTML requirement. All attribute values have quotes. (") or ('). No more Height=113. Use height="113". Certain attributes are empty in HTML. If you want to make a radio button checked in HTML4, you just add the attribute checked. In XHTML you type checked="checked". Note for JavaScript developers: In JavaScript you write button.checked=true;. In XHTML checked="true" is not legal!

Close all tags. In old-fashioned HTML it wasn’t necessary to enter the </p>. Now it is. In XHTML all standalone tags such as <img>, <br>, <meta>, <link> and <hr> must be written with a slash (/) at the end as in <hr/>.

Semantic XHTML

Good HTML structure is based on logic, order, and using semantically correct markup. If you have a heading use the heading element. If you have a paragraph, use a paragraph element. If you have a list, use a list item element. If you’re quoting a few lines, use a blockquote element. Those elements provide meaning to the content, making them semantically correct, in addition to being solid HTML structure.

The benefit for EEA is that content that is tagged semantically is much easier to style consistently, and it is easier to change the style globally. Semantically correct XHTML is easier to repurpose. We can convert it to PDF and lists will remain lists. We can embed it in other XML formats and not have surprises. In fact, certain common abuses of HTML have been handicapped by booby-trapping the central stylesheet. E.g. <blockquote> has historically been used to cause indentation. The stylesheet puts up a large quote as a background, so people won’t be using <blockquote> for anything but quotations.

As a corollary, you can’t use a <table> to place the elements on the page. Tables are for tabular data only.

<font>, <i> and <b> tags

Absolutely, under no circumstances, should you ever use the <font>, <i> and <b> tags. <font> has no semantic meaning and <i>, when compared to <em>, has much less semantic meaning. The same goes for <strong> over <b>. What does <b> mean to a Braille reader? Some people have heard this before, and they have started to use <strong> when they want to show something in bold, and this is wrong too. You should only use <em> and <strong> when you want to mark up a kind of emphasis in your text. If you only want to make it look good for the (seeing) user, then you are about to make a mistake.

This needs an example. We have often seen developers use <b> to make the label in front of an input field stand out, like this:

  <b>Enter your name:</b> <input type="text" size="40"/>
  

As you know now, this is wrong. Equally wrong is it to replace <b> with <strong>. In this particular case you use the <label> tag and then you style the <label> with CSS, like this:

  <style type="text/css">
  label.question: font-weight:bold;
  </style>
  ...
  <label for="yourname" class="question">Enter your name:</label>
   <input id="yourname" type="text" size="40"/>
  

Exactly one <h1> per page

Following the semantic principle, <h1> is used for the page title.. Consider a HTML page like a chapter in a book. A chapter always has one chapter title. This is the <h1> tag’s role. If we do this consistently, then it will be possible to generate a table of contents for the entire website just by looking for the <h1> and <h2> tags.

Some pages - like the Eionet portal frontpage doesn’t have a natural place to display a <h1> tag. In this case you still add it, and you make it invisible with a style="display: none" attribute.

JavaScript

JavaScript can be used to enrich the experience, but the website should not rely on the browser’s ability to execute JavaScript. The user may have chosen to turn it of for security reasons.

Use <script type="text/javascript"> and not <script language="Javascript">. Traditionally developers have escaped the script code with <!-- and //-->. It originates all the way back from when browsers didn’t know what to do with <script>. When you treat a webpage as XML, it does not work anymore. Now you must use the CDATA escape mechanism, but dressed up as a JavaScript comment, like this:

  // <![CDATA[
  ...
  // ]]>
  

Check your JavaScript code. Ensure that it uses standards compliant W3C Level 0 and 1 DOM and isn’t relying on Netscape/Microsoft proprietary extensions invented during the browser wars. Do not use browser detection. It doesn’t work reliably as browsers change in their capabilities. Use object detection.

When JavaScript is used with XHTML (and you send the page with an XHTML MIME type), document.write() does not work. You need to use document.createElementNS() instead.

Stylesheets

Eionet operates with three different stylesheets for screen, print and handheld media types. A good starting point is to copy the stylesheets from the Eionet portal and install them into your website. Then also copy the images mentioned in the stylesheets and upload them to your website.

Style names

Style names must reflect the usage. This makes it easier to change the layout without unintended sideeffects. <span class="head1"> is considered bad. <span class="tablecaption"> is good.

Inline stylesheets

Some selector rules can use >. Therefore you should declare the stylesheet content CDATA when you have it inside HTML. Since some browsers don't understand XML, you must enclose it in CSS comments. This does not apply to external stylesheets as they are not XML.

  /*<![CDATA[*/
  ...
  /*]]>*/
  

Validate, validate, spell check

Last, but certainly not least. Remember to validate your HTML with the W3C validator and spell check your text. Eionet uses British-English spelling.

We have come to appreciate the validator as a tool to ensure we get good quality software deliverables from our contractors. It is an indicator: A developer, who delivers HTML that looks like it is from 1999, what does his software look like?