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.
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"
If you can verify that the page is wellformed, meaning <br> is <br/> and
<img> is <img/> then you use the XHTML
This can be difficult to achieve if you use 3rd party software that
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Never pages, that are guaranteed clean of deprecated elements and attributes
will use the HTML 1.1 doctype:
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
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.
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
button.checked=true;. In XHTML
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/>.
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.
has historically been used to cause indentation. The stylesheet puts up a large
quote as a background, so people won’t be using
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.
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"/>
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.
// <![CDATA[ ... // ]]>
document.write() does not work.
You need to use
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 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.
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[*/ ... /*]]>*/
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?
Document last modified 2009/03/12. Content in this portal is modified daily by a community of providers.