Tips for a nice WWW
This article was originally written in July 2006.
Below you’ll find eight tips for writing a nicer World Wide Web. The first tip is important for everyone that writes online content. The second tip could be important for designers too, whereas the other tips are mostly geared towards people writing HTML and CSS.
The text was originally written by me in Dutch for the University of Amsterdam. I translated the text into English and put it online here, because I think it’s important for web authors to know. In my opinion, if everybody read these tips, we’d have a slightly better world wide web.
Use clear text for links.
This is my number one tip. This is important for everybody that writes online content - from the manager who posts a news item on a company intranet to the people writing hardcore HTML.
A very bad but very common type of linking is “click here to go to the W3C validator”. People have to read the text beyond the link to know what the link will point to, and then go back to find the link again to click on it.
Most visitors of your website will not be reading all of the text. They simply quickly scan through it to see if it is of any use to them. All the links are easy to see because they are (usually) blue and underlined. If all your visitors see are the words “here”, they’ll move on to another website.
It is possible that links are shown outside their context, for example in an overview of the links used as shown at the bottom of this page.
I also try not to use verb phrases as link text. I’m linking to an object - a page or a PDF file for example. The text of the link should reflect the title/contents of that object, and not the action that is required to get to that object.
Besides all that, you can be sure “click here” looks rather silly when your page has been printed, whereas underlining the title of the referred document is also often done in references in printed books.
Do not use frames.
Using frames makes a page notoriously hard to link to. It is also impossible for a visitor to bookmark to the page, since the URL at the top doesn’t change. Also, search engines will link to the pages directly, not to the frameset. Visitors coming in from a search engine will most likely see your website without the header, footer, menu and other stuff you put into frames. There are solutions for this, but almost every single one of them relies on running JavaScript code on the client - something people can and do turn off.
Do not influence the appearance in HTML.
That is what CSS is for. HTML should only state the semantics of the text -
“this is the main headline”, “this is a paragraph” - and not the looks. The
following tags have been more or less forbidden: <font>, <b> and <i> and a
couple of other tags that directly influence the looks.
Use class with semantics in mind.
Plenty of times, I’ve seen CSS classes named ‘yellowBackground’ or ‘darkBoxLightText’. If the colours of a site change (and they often do), those names are useless. Instead of calling a class ‘redForeground’, call it ‘importantText’. The text will always remain important, no matter how it is styled.
Use a DOCTYPE declaration.
For HTML (4.01) this is
`and for XHTML (1.0) this is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
More info can be found on W3C’s “Choosing a Doctype”.
Check during writing.
While you’re writing CSS and HTML, regularly check if what you’re writing is still correct. For this, you can use W3C’s HTML validator. It’s often easier to fix a bug when you find it early.
No line breaks in attribute values.
A line break in the value of an attribute can confuse some browsers. Pay attention to this when using an editor that breaks long lines.
Read the Quality Tips.
A lot can be learned from the W3C Quality Assurance tips.
There are also a couple of interesting links in our links section. It’s a good idea to browse through them some time.