HTML Tags

This is a quick overview of some of the main tags you will use when writing HTML. All HTML tags go within < and > brackets HTML Structural Elements

Several tags - such as HTML, HEAD and BODY - determine the web page's overall structure

HTML Identifier

<HTML> . . . </HTML>
The HTML identifier - a tag which tells browser that the document contains HTML elements. The HEAD and BODY elements are contained within the HTML identifier tags.

HEAD

<HEAD> . . .</HEAD>

Describes the document's title and relationship to other documnts. Requires the TITLE tag (the name of the document that will appear at the top of the web browser) and may include META tags, comments, JavaScripts etc...

TITLE

<TITLE> . . . </TITLE>
The Title tag is a label for the window on the browser displaying the document. It should go inside the HEAD tags.

BODY

<BODY> . . .</BODY>
Body tags go at the top and bottom of your actual document text, so they go after the HEAD tags.The body of your HTML document contains all the text and images that make up a page, along with all the formatting and control tags. You can tweak various attributes in it to vary your page's background...

BACKGROUND

Use this attribute to specify a URL pointing to an image to be used as a background for the document. The image is usually smaller than the overall page so it is "tiled" in the background. Here's an example:

<BODY BACKGROUND="image.gif"> Rest of document </BODY>

BGCOLOR

Use this tag instead of the BACKGROUND one to set the background to one specific color - which can be a bit plainer than the BACKGROUND tag but it speeds things up - the page doesn't have to make yet another network access to download an image. The format is:

<BODY BGCOLOR="#rrggbb"> Rest of document </BODY>

where #rrggbb is a hexadecimal red-green-blue triplet usd to specify the background color. Some browsers can also use special names to define certain colors.

BGPROPERTIES

Internet Explorer lets you "fix" background images so that they do not scroll on the page as normal background images do - adding a sort of watermark to the page:

<BODY BACKGROUND="image.gif" BGPROPERTIES=FIXED> Rest of document </BODY>

Head Related Elements

COMMENTS

<!-- > . . . --</>

You can insert comments into your HTML document that will be ignored by the browser. For example, if you're changing a very specific part of a page a lot, you might want to put a pair of comment lines just before and after this section to find it quickly. Note that white space isn't allowed between the < and !

Body Related Elements

ADDRESS
contains elements that describe the document's title, usage and relationship to other documents. Again, you probably won't use this.

Anchor

<A> . . . </A>
The ANCHOR tag is one of the most important ones in HTML. It indicates a link to an "external" location <A HREF=> or (less often) the place to go to when linking to a specific point in a Web page <A NAME=> The HREF attribute can also contain a value such as "#anchor". This shifts the browser to a specific anchor point within the same document. A value of "document.html#lookhere" will take you to the specific anchor point lookhere within the document document.html.

NAME

Use the NAME attribute to make the anchor the target of a link. Its value can be an arbitrary string of characters (such as "lookhere") but this must be unique for each anchor in a particular document.

TARGET

Since FRAMES were introduced into HTML, browser windows can have names associated with them. Your links in any window can refer to another window or frame by name. When users click on the link, the associated document appears in that named window or frame. If the window or frame does not exist, the browser will open a new window and name it for you.

BLOCKQUOTE

<BLOCKQUOTE> . . .</BLOCKQUOTE>
Used to contain text quoted from another source. A quick way to add space (an indent) on the right and left...

CENTER

<CENTER> . . .</CENTER>
Used to centre anything that comes between its start and end tags - this could be a bit of text, or graphics, or a table, or a combination of any or all of these.

HEADINGS
<H1> . . .</H1> through <H6> . . .</H6>
HTML uses six levels of headings. Each heading implies font changes and paragraph breaks before and after. The highest level of heading is H1 and the smallest heading is H6.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Horizontal Rule

<HR>

Draws a line across the document. Include the NOSAHDE attribute to render the line , or you can alter the width (e.g. with the attribute WIDTH=80%)

Paragraphs

<P>
Creates a new paragraph (and unlike the <BR> tag it puts a blank line between paragraphs).

PREFORMATTED

<PRE> . . .</PRE>
Renders text with unchangable font and spacing.

Information Type Elements

CITE

A citation (i.e. it puts text into italics).

STRONG

<STRONG> . . . </STRONG>
Indicates strong typographic emphasis (usually turns text bold).

Character Format Elements

BOLD

Turn text bold

ITALIC

<I> . . .</I>
Turn text into italics

Image Element

IMAGE

<IMG>

Incorporate inline graphics or icons. The ALT attribute should be used to indicate alternative text for very old browsers, browsers that have turned graphics off, or for any visually impaired visitors to your site who might be using voice synthesizer software.

The Image Element's other attributes include:

ALIGN=
Accepts TOP, MIDDLE or BOTTOM, which indicates if the text which follows should be aligned with the top, middle or bottom of the graphic.

SRC=
Value for the SRC attribute is the URL of the graphic file to be embedded. See the separate section on how to insert images

List Elements

Go to the section on lists for more information.