HTML - A Manual Of Style

2 Conversations

ANNOUNCEMENT: This article is on probation -- currently, these HTML tags work independent of GuideML. They may stop working shortly, so enjoy this article while you can. If you percieve this site as looking incorrect, copy it into a text editor or something.

The Basics Of HTML

HTML, or HyperText Markup Language1, is the universal format used to send formatted data, such as this article, over the Internet and local Intranets. HTML began as a way to allow web-based files to be more than just text. However, in some people's minds (including this Researcher), HTML is very nearly an art.

Making impressive pages is surprisingly difficult to do. Anyone can make a simple page, containing the information they want, such as this:

My Home Page
  • Developed by H2G2 Researcher ([email protected])
  • I like fishing and web design.
  • My Other Pages:

Very mundane. This page is not bound to impress anybody. So what are the problems? Let's take a look at a few.

  • The font is Times New Roman, which is uninteresting.
  • The colors match the fairly-ugly standard Web color scheme.
  • Space is wasted by both the list layout and the e-mail link.

Now. You're reading this article at H2G2, so the colors and font stand out a great deal. The first rule: look at your standard web fonts, and make a choice.

Times New Roman. Pretty boring.
Courier (Courier New). At least it's interesting, but it looks too technical and is reminiscent of old-fashioned typewriters and dot-matrix printers.
Arial and Helvetica. These fonts are sans serif, unlike Times and Courier, which are serif. A serif is the small indentations added to sides and corners of a letter - look at the letters, you'll see the difference. Sans serif fonts add a feeling of sleekness to a page.
Comic Sans (MS). Comic Sans is a very popular font, and adds a casual or relaxed feel to a page. However, it does not serve well on professional pages, because of the qualities mentioned above.
Verdana. A variation on other sans serif fonts, Verdana has a very high-tech feel to it.
WebDings and WingDings. (read: WebDings and WingDings.) These fonts (obviously) cannot be read, but can add an interesting accent to your pages.

Since this is a personal web page, the best font choice is probably Comic Sans MS. An important note: if the viewing web browser does not have the font you specify, the browser will use its default font, which can go completely against what you are trying to accomplish. this can be rectified via the following code:

<font face="Comic Sans MS, Verdana, Helvetica, Arial">

Now, if the viewing computer doesn't have Comic Sans, the font will default to Verdana. If they don't have that, it goes to Helvetica, for the Mac users reading. Failing all of these, it goes to Arial, which is Windows standard, and therefore pret-ty much universally compatible.

On to the colors.

The HTML Color Wheel

Some colors in HTML fit well with anything. Some don't. Colors worth using:


You can tell how well these work. A couple colors really don't work. One of the worst is HTML Purple. This color, frankly, clashes with nearly any HTML color scheme. It is highly reccommend that the color for visited links be set to anything but purple. Setting it to the same as the link color (traditionally blue) will look much better.

Let's apply these changes to our demo page.

My Home Page
  • Developed by H2G2 Researcher ([email protected])
  • I like fishing and web design.
  • My Other Pages:

Note that the font for the "My Home Page" header has been changed to Verdana to add some variety. This already looks much, much better. Also, the visited link color has been changed to blue. The final improvement to make is...

Proper Use Of Space

First. Keeping the e-mail link outside of one's name is fairly unnecessary. We can move that on top of H2G2 Researcher. The home page links would look better if relocated to the right of the rest of the document, which can be accomplished by a borderless TABLE tag.

For Beginners:

A tag in HTML looks something like this:

And a TABLE tag looks like this:

Finally, this is a borderless table tag:
<table border="0">

Table cells are then divided into rows, using TR tags. Within each TR tag is a number of TD tags (up to the user.) TD tags hold the text that you want to arrange. For example, to make a two-celled table like the one described here:
<table border="0">


<td> This text goes inside the first cell... </td>

<td> ... and this text goes inside the second cell. </td>



The tags you see with a slash before the names (such as /TABLE) are end-tags. The slash is also pronounced "end", so "/TABLE" is pronounced end-table. Thsi signifies that nothing else is in the table, and that the table contains everything between the TABLE and /TABLE tags.

Finally, just because this appearance adds a dynamic feel, the "hoverlinks" feature from Internet Explorer will be activated. This is performed via CSS2, and a code sample is available in the footnotes3. The underlines on links now show up only when the mouse is over them. Here is the final page.

A.mylink {text-decoration:none};
A.mylink:hover {text-decoration:underline};
My Home Page
My Other Pages:

You can view the way these pages were made by choosing the View->Page Source command in your web browser. On H2G2, you can view the HTML used to make an article by the following method. If the page's address is

Then you can view the source via the URL (remember to leave out the A)

Feel free to use the code on this page for your own purposes. The best way to learn HTML techniques is to look at those of other people. Go look at web pages. Live by the View Source command! Thank you for staying with me this far, and this is

1 HTML is developed by the World Wide Web Consortium, whose web page can be located at

2 CSS is short for Cascading Style Sheets. It is supported by web browsers of version 4.0 and higher. You can find resources for CSS online or in a highly reccommended book, "Instant IE4 Dynamic HTML: Programmer's Reference" from Wrox Press.

3 CSS code for hovering links:

<style type="javascript/css">

A {




A:hover {



/* Note: For added affect, you can change the color listed under hover, or use different underlines, such as "overline". */



Bookmark on your Personal Space



Infinite Improbability Drive

Infinite Improbability Drive

Read a random Edited Entry

Written and Edited by


h2g2 is created by h2g2's users, who are members of the public. The views expressed are theirs and unless specifically stated are not those of the Not Panicking Ltd. Unlike Edited Entries, Entries have not been checked by an Editor. If you consider any Entry to be in breach of the site's House Rules, please register a complaint. For any other comments, please visit the Feedback page.

Write an Entry

"The Hitchhiker's Guide to the Galaxy is a wholly remarkable book. It has been compiled and recompiled many times and under many different editorships. It contains contributions from countless numbers of travellers and researchers."

Write an entry
Read more