Guide to HTML
Using Common Tags

<!-- ... --> | <a> | <blockquote> | <br> | <center> | <div> | <h> | <hr> | <img> | <nobr> | <p> | <pre> | <wbr>

<!-- ... -->

Syntax:

<!-- [Comment] -->

The comment will not be displayed on the screen by your browser and merely indicates comment in the HTML source code. Just like with any programming language it can be wise to insert comment in the source code.

When you need more than one row of comment, you can use the comment tags for each separate line of comment, or you can just use one set of tags. Take a look at the example.

Example:

Source:

<!-- This is a line of comment. -->
<!-- This is another one.       -->

<!--
     This is a line of comment.
     This is another one.
-->

According to the World Wide Web Consortium, it is a common error to put more than two adjacent hyphens (i.e. "--") in comments. (I myself have sinned against this rule in the past quite a few times.)

Don't: You can not nest remarks (i.e. a remark inside a remark).

Top


<a>...</a> Anchor

Syntax:

<a [name|href]="destination" [title="title"]>explanatory text</a>

An anchor marks the beginning and end of a hypertext remote or local link.

The destination can be the URL of a site, a document or a file (either local or remote, i.e. either in the directory on your home page or on someone else's). Note that the URL itself cannot be seen on the screen, just the text between the opening and closing codes.

The explanatory text is the text the user sees on the screen. In most browsers it shows as underlined text, in a different color than the rest of the text. When clicked on by the mouse, the browser will take you to the local or remote destination file.

The title may be rendered by the browser as a tool tip, or cause a change in cursor image.

Instead of an HTML document, you can also use links to images, ASCII files, sound files, or whatever file you want. Most browsers are capable of displaying HTML, ASCII, GIF or JPG files without external software. For other files it may be required to setup a link in your browser to the appropriate software on your system in order to be able to process the file (e.g. sound bites, video clips, or image files in other formats).

Like stated above, instead of using a line of text to refer to another document, you can also use an image to link to another document. Take a look at the following examples.


Example: Link to local HTML document

Source:

Another example can be found on the <a href="example.html">example page</a>.

Result:

Another example can be found on the example page.


Example: Link to a local image

Source:

Another example can be found on the <a href="../img/example_button.gif">example page</a>.

Result:

Another example can be found on the example page.


Link to a remote document, using an image

Source:

This button will take you to the main index: <a href="../index.html"><img src="../img/example_button.gif"></a>

Result:

This button will take you to the main index:

Depending on your browser setting, a border around the image might be visible, indicating the image is hyperlinked to a URL, in this case the Main Index of this site. Another example of linking images are the "go to top" symbols at the end of each item on this page. There are no borders around that image, however. I'll tell you how to do that in the image section.


Link to trigger the e-mail feature of your system

To do this, use the "mailto:" option in your link to trigger a mail program with the "To:" field prefilled.

Source:

You can reach me by e-mail at <a href="mailto:someone@somewhere.com">someone@somewhere.com</a>

Result:

You can reach me by e-mail at someone@somewhere.com

Browsers also may support "mailto <URL>" extensions that are not (yet) standards (Netscape, Internet Explorer). With some browsers you can add the subject of the message to the URL with:

?Subject=my%20subject

(spaces are replaced by "%20" -- i.e. the hexadecimal value) or by adding the attribute

title="subject"

to the anchor. Some browsers also support

?Cc=email-address

for carbon copies or

?Body=body-text

for the body text. You can also combine these in one single anchor using the & character (there should only be one "?" in the line):

<a href="mailto:xxx@xxx.com?Subject=Subscribe_list_12345
&Body=Subscribe">Subscribe</a>.


Local link within the same HTML document

Source:

Go to the <a href="#anchor">top of this subject</a>.

Result:

Go to the top of this subject.

The destination (within the same document) must contain the following code:

<a name="anchor"></a>

Tip: You can also jump to a specified location in an HTML document from within another document by adding the local destination to the regular URL with a fraction identifier:

common.html#anchor

This will take you to the "anchor" section of the common.html document directly.

Don't: Do not put markup elements inside anchors. The following example is incorrect:

<a><h3>...</h3></a>

Instead, put the markup elements outside the anchor:

<h3><a>...</a></h3>

Don't: It is not allowed to nest links. The following example is incorrect.

<a href="first.html"><a href="second"></a></a>

Don't: A local anchor name must be unique, i.e. the name of a local anchor can only occur once in the same document, regardless of the case. The following example is incorrect.

<html>
<body>
<a name="topofsection">...</a>
...
<a name="TopOfSection">...</a>      Incorrect
...
</body>
</html>

Browser behavior may be unpredictable.

Top


<blockquote>...</blockquote>

Syntax:

<blockquote>...</blockquote>

This block level element enables you to treat quoted text different. In most cases, the text will be indented left and right, or, at least left. The end tag is always required.


Example:

Source:

<p>In his chronicles, a dragon is mentioned:

<blockquote>
Midsummer during spring, on the southwest of the "mountain" called Red Cliff, about ten steps from there, a flame arose which burned for three days in a row. On the fourth day a huge dragon arose from there, being raised high in the sky terrifying many. After having showed itself for half an hour, it again descended.
</blockquote>

Result:

In his chronicles, a dragon is mentioned:

Midsummer during spring, on the southwest of the "mountain" called Red Cliff, about ten steps from there, a flame arose which burned for three days in a row. On the fourth day a huge dragon arose from there, being raised high in the sky terrifying many. After having showed itself for half an hour, it again descended.

Top


<br>

Syntax:

<br [clear="none|left|right|all"]>

This forces a line break in your text. It is similar to pressing the Enter key for a hard return in your word processor.

Use the clear attribute when text has to be wrapped around an image to make the new line start below an in-line graphic. The line break will expand vertically down until a clear left or right margin, or until both margins are clear of images.

none : The next line will begin normally. This is the default value.
left : The next line will begin at nearest line below any floating objects on the left-hand margin.
right : The next line will begin at nearest line below any floating objects on the right-hand margin.
all : The next line will begin at nearest line below any floating objects on either margin.


Example: Paragraph=left, Image=left, Break=right

Source:

<p><img align="left" src="../img/example_button.gif"> The big brown fox jumps over the lazy dog.<br clear="right">The big brown fox jumps over the lazy dog.

Result:

The big brown fox jumps over the lazy dog.
The big brown fox jumps over the lazy dog.


Example: Paragraph=right, Image=left, Break=right

Source:

<p align="right"><img align="left" src="../img/example_button.gif"> The big brown fox jumps over the lazy dog.<br clear="right">The big brown fox jumps over the lazy dog.

Result:

The big brown fox jumps over the lazy dog.
The big brown fox jumps over the lazy dog.


Example: Paragraph=left, Image=right, Break=left

Source:

<p><img align="right" src="../img/example_button.gif"> The big brown fox jumps over the lazy dog.<br clear=left>The big brown fox jumps over the lazy dog.

Result:

The big brown fox jumps over the lazy dog.
The big brown fox jumps over the lazy dog.


Example: Paragraph=right, Image=right, Break=left

Source:

<p align="right"><img align="right" src="../img/example_button.gif"> The big brown fox jumps over the lazy dog.<br clear="left">The big brown fox jumps over the lazy dog.

Result:

The big brown fox jumps over the lazy dog.
The big brown fox jumps over the lazy dog.


Tip: If your browser should ignore subsequent <br> codes, use alternating <p> and <br> codes.

Note:

Top


<center>...</center>

Syntax:

<center>...</center>

This block level element can be used to center text, images or tables. The end tag is always required.


Example:

Source:

This is normal text. <center>This is centered text.</center> This is normal text.

Result:

This is normal text.

This is centered text.
This is normal text.

As you can see in the example, the starting and ending center code makes the browser start at a new line. Whether it shows a blank line before and after the <center> tags depends on your browser. Netscape and Opera don't, Internet Explorer does.

The text between the beginning and ending code can span more than one line, you don't have to worry about that. You can also center a whole paragraph by using the appropriate attribute with the paragraph code (see the paragraph section).

The <center> tag was introduced by Netscape before they added support for the HTML 3.0 <div> element. Later, support was continued because of its widespread deployment.

Top


<div>...</div>

Syntax:

<div [align="left|center|right"]>...</div>

This block level element is used to define a division in a document. The end tag is always required.

The <div> element is a block element and can contain headers, paragraphs, and block elements (such as <p>, <ul>, <ol>, <dl>, <pre>, <div>, <center>, <blockquote>, <hr>, <table>). It will terminate an open paragraph <p> element.

Browsers are not expected to render paragraph breaks before and after <div> elements. <center> is directly equivalent to <div> with <align=center>. Both <div> and <center> require start and end tags.

Top


<h>...</h> header

Syntax:

<hlevel [align="left|center|right"]>...</hlevel>

Use the headers element to create headers in your text. The end tag is always required.

There are six header levels to denote several levels of paragraphs in your document which should be used in hierarchical order. The level should appear immediately after the "h".

Using the <h>...</h> codes automatically implies empty lines before and after the headers are being inserted by the browser. You can easily understand this by taking a look at the source code, which does not include any paragraph separator or hard return. You should avoid using this construction in your own documents however - it is nearly meant as an example. Use some carriage returns in your document to show that you are using a header. This will make it easier to understand the source code of your document.

Use the align attribute to align the header the way you specify. This only applies for the header, not for any text following the header.


Example:

Source:

<h1>This is header level 1</1h> <h2>This is header level 2</h2> <h3>This is header level 3</h3> <h4>This is header level 4</h4> <h5>This is header level 5</h5> <h6>This is header level 6</h6>

Result:

This is header level 1

This is header level 2

This is header level 3

This is header level 4

This is header level 5
This is header level 6


Tip: If your browser should ignore subsequent <br> codes, use alternating <p> and <br> codes.

Don't: You should avoid using headers to create boldfaced text or to change the font size. Instead, use the <b> code combined with the font size changing codes.

Don't: Do not use text formatting codes inside headers. The following example is incorrect:

   <h2>...<p>...<p>...</h2>

Don't: Do not use headers inside lists. The following example is incorrect

   <ul>
     <li><h3>...</h3>
   </ul>

Use the <b> tag or <font size> tag instead.

Do not use lines inside headers. The following example is incorrect:

   <h1>...<hr>...</h1>

Use the header only for what it is intended for: naming of new paragraphs.

Top


<hr>

Syntax:

<hr [align="left|center|right"] [width="value"] [size="height"] [noshade]>

The <hr> code puts a horizontal line in your document.

All of these attributes are optional. There is no end tag.

Options:

Alignment

Syntax:

align="left|center|right"

Justifies the line the way you specify: left, center or right. If omitted, the default value "center" will be used.

Line width

Syntax:

width="value"

The line width can be specified as a percentage ("xxx%") or as an absolute value (indicating the number of pixels). The line width will vary when specified as a percentage, depending of the video mode of your monitor.

Line thickness

Syntax:

size="value"

The line height (i.e. "size") is specified as the number of pixels. This is always an absolute value.

No shadow

Syntax:

noshade

If you want a line without the shadow effect, specify the noshade attribute.

Top


<img>

Syntax:

<img src="URL" [align="alignment"]
[alt="alternative text"] [border="value"]
[height="value"] [width="value"]
[hspace="value"] [vspace="value"]
[lowsrc="URL"]>

This code can be used to place an image in your HTML document.

Options:

Alignment

Syntax:

align="left|center|right"
align="top|middle|bottom"
align="toptexttop|absmiddle|absbottom|baseline"

Justifying to the left or right are probably the most frequently used ones. Normally, the image will be treated just the way text is treated, i.e. you can not wrap text around it. To do this, you will need to align the image to the left or right. If you center the image on the screen, you will not be able to wrap text around it.

Some browsers support more attributes. Top aligns to the top of the tallest item of the line. Middle aligns with the middle of the image. Absmiddle aligns the middle of the image with the middle of the line. Baseline and bottom align the image with the baseline of the line. Absbottom aligns the bottom of the image with the bottom of the line.

Alternative text

Syntax:

alt="text"

This way you can specify a textual alternative or substitute text for those who do not have the auto image option enabled. The text will be shown in a box on the location of the image, though its dimensions will always be the same. Put some useful text here, so that a user can decide whether or not to load the image after all. If the image is hyperlinked, then the text inside the box will be underlined, as with regular hyperlinked text. Use quotes around the text.

Although intended as a replacement for the image when the image itself is not available, some browsers will use the alt attribute as a tool tip when hovering over the image with the mouse pointer. Browsers also might support the title attribute for this purpose.

Border

Syntax:

border="value"

Normally, an image will not be surrounded by a border. By specifying a border width, a border in the default text color will appear. When an image is part of a hyperlink, a border will appear by default. You can disable this by specifying a border width of 0. The hyperlinked "go to top" images do not have a border, you see? This is done exactly the same way, by specifying a border width of 0 (border="0" or border=0).

Dimensions

Syntax:

width="value" height="value"

You can specify the dimensions of the image by using the width and height attributes. You can also specify just one of the two. The other value is then calculated by the browser so that the original dimension ratio remains roughly equal.

It is suggested that you always specify an image's dimensions, so that the browser can put the text on the screen before the image itself is downloaded, therefore creating the illusion of a document being loaded faster. The drawback of this is that you need to edit the HTML source of the document when the image's dimensions change.

Free space around the image

Syntax:

hspace="value" vspace="value"

The hspace and vspace attributes specify horizontal and vertical space around the image. The value is given in the number of pixels.

Low resolution image

Syntax:

lowsrc="URL"

If a high resolution image is used, one that takes some time to download, a low resolution version of the image can be specified that will be loaded prior to the "real" image, as defined with de lowsrc attribute. Both high and low resolution images have to be of the same size, or you need to specify the height and width.

Note:

Top


<nobr>...</nobr>

Syntax:

<nobr>...</nobr>

This code is used to prevent a line from being divided. Normally, the browser will divide long lines of text in the source code of the HTML document over a number of lines, depending of the screen width. You can prevent lines from being divided by using special tags.


Example:

Source:

<p>Line #1: The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog.

<p><nobr>
Line #2: The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog.
</nobr>

Result:

Line #1: The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog.

Line #2: The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog. The big brown fox jumps over the lazy dog.

The first line of the example will be divided by your browser, unlike the second line.

See also the <wbr> tag.

Note:

Top


<p>...</p>

Syntax:

<p [align="left|right|center|justify"]>...[</p>]

Use this block level element to start a new paragraph in your document. A blank line is inserted automatically by your browser. The end tag can always be omitted.

Use the align attribute to align the paragraph the way you specify. This only applies for the paragraph you specify the attribute for. Each of the subsequent paragraphs needs to be aligned separately.

Browsers generally do not justify both margins -- it is hard to do this effectively without sophisticated hyphenation routines. By convention, browsers wrap text lines to fit within the available margins. However, some browsers support the justify attribute, which does exactly that.


Example:

Source:

This the first sentence.
<p>This is the second sentence.

Result:

This the first sentence.

This is the second sentence.


Tip: If your browser should ignore subsequent <p> codes, use alternating <p> and <br> codes.

Top


<pre>...</pre>

Syntax:

<pre [width="40|80|132"]>...</pre>

Your browser will ignore more than one subsequent space or tab, as well as carriage returns in the HTML source code. Sometimes however it is required to display a text exactly as you entered it in, say, a plain ASCII file. Well, the solution is to use the pre code, which will trigger the browser to use a fixed-width font.

The text will be shown exactly as you typed it, i.e. carriage returns and spaces will not be ignored. Do not forget to include the closing tag of this block level element.

The width attribute specifies the maximum number of characters for a line and allows the browser to determine which of its available fonts to use and how to indent the text -- if at all. If the width attribute is not present, a width of 80 characters is assumed. Where the width attribute is supported, widths of 40, 80 and 132 characters should be presented optimally, with other widths being rounded up. This attribute is not widely supported currently.


Example

Source:

<pre>
Annual review:

January       123
April          45
July          435
October        86
</pre>

Result:

  Annual review:

  January       123
  April          45
  July          435
  October        86

Without the <pre> and </pre> codes, the table will look like this:

Annual review: January 123 April 45 July 435 October 86

Top


<wbr>

The word break tag is used particularly in conjunction with the <nobr> tag. The <wbr> tag inside <nobr>...</nobr> specifies where the line break will occur.

If used outside the <wbr> tag it can help the browser to determine where to break a line. However, it does not imply that the browser will break the line at that point always, it is merely a suggestion -- especially when using long URLs or words.

Example:

Source:

<p>URL #1:<br>
http://www.some_domain.somewhere.nl/~some_user/
some_subdirectory/some_subdirectory/another_subdirectory/
a_very_long_html_document_file_name.html

<p>URL #2:<br>
<nobr>
http://www.some_domain.somewhere.nl/~some_user/<wbr>
some_subdirectory/some_subdirectory/another_subdirectory/<wbr>
a_very_long_html_document_file_name.html
</nobr>

Result:

URL #1:
http://www.some_domain.somewhere.nl/~some_user/some_subdirectory/some_subdirectory/another_subdirectory/a_very_long_html_document_file_name.html

URL #2:
http://www.some_domain.somewhere.nl/~some_user/
some_subdirectory/some_subdirectory/another_subdirectory/
a_very_long_html_document_file_name.html

Note:



Paragraph separator