WebPage Tags and Definitions

HTML TAGS AND DEFINITIONS

Go back to the Main Menu

HTML Tags

Yin Yang Symbol.

Welcome to the HTML Tutorial, and Exercises page.
On this page, you shall find a number of links to various pages, containing helpful information on HTML Tags, and their definitions and uses.

The links below are anchors, which will take you to a specific part of the page below. Just click on a link that you have interest in,and you'll be taken to the relevant section.

Links

HTML Resources

The Barebones guide to HTML

The Compendium of HTML Elements

Eric's HTML MEGASITE

HTML Tutorials

A HTML Reference Guide

Tag	Short Description
<HTML> <HEAD> <HR> <TITLE> <BODY> <BR> <P> <Hx> <B> <I> <U> <OL> <UL> <LI> <TT> <FONT> Special Characters <IMG> <A> <BLOCKQUOTE> <!-- Comments --> <TABLE> <Hexadecimal Numbering>	Html Tag Header Tag Horizontal Rule Tag Title Tag Body Tag Line Break Tag Paragraph Break Tag Heading Tag Bold Tag Italics Tag Underline Tag Ordered List Tag Un-Ordered List Tag List Item Tag Typewriter Text Tag Font Tag Special Characters Image Tag Anchor Tag Blockquote Tag Comment Tag Table Tag Hexadecimal Numbering

HTML Tags - Definitions and Examples

HTML
This tag tells the browser that you are using the HTML Language, rather than the page being just a normal text file. This language allows you to incorporate pictures, tables, forms so that customers or webpage users can provide input, and various other objects within the page, to make it more visually spectacular.

Example

As you can see, the HTML tag has a beginning and end Tag. End tags are preceded by a /. Most tags require an ending tag.

HEAD
This tag contains the Webpage's Header, which contains basic information about the page, such as Title, Meta Information and other basic info. This tag is placed after the HTML tag and requires an ending tag, after information about the page has been put between the tags...

Example

HR
The HR tag specifies that a horizontal rule of some sort (The default being a shaded engraved line) be drawn across the page.

<HR SRC="image filename">: The SRC tag lets you use an image as the ruled line instead of a boring old normal line.
<HR SIZE=number>: The SIZE tag lets you give an indication of how thick you wish the horizontal rule to be.
<HR WIDTH=number|percent>: The default horizontal rule is always as wide as the page. With the WIDTH tag, you can specify an exact width in pixels, or a relative width measured in percent of document width.
<HR ALIGN=left|right|center>: Now that horizontal rules do not have to be the width of the page You might want to align them to the left, right or center of the page. up against the left margin, the right margin, or centered in the page.
<HR COLOR="#hexadecimal number">: The COLOR attribute allows you to change the colour of the text. rrggbb is a six digit hexadecimal number with the first two digits specifying the red value, the middle two the green value, and the last two the blue value. The values used are 0-9 and A-F, being the numbers 1-16.
<HR NOSHADE>: Finally, for those times when you really want a solid bar, the NOSHADE tag lets you specify that you do not want any fancy shading of your horizontal rule.

Example

TITLE
This tag contains the title of the Webpage, which is shown on the top bar of the browser.
This tag is also sometimes used by search engines, which use a page's title in indexing searches.
This tag is placed within the HEAD tag and requires an ending Tag, which is placed after the Title of the page.

Example

<HTML>
<HEAD>
<TITLE>Title of Page</TITLE>
..
..
</HEAD>
</HTML>

BODY
This tag is one of the most important tags of all. This tag allows you to place text and other items on your page, therefore making it a little more interesting that just a blank white screen. The more ingenious user can position their text and pictures in interesting and creative ways, giving their page that spice it needs.

<BODY BACKGROUND="Image filename">: The BACKGROUND tag allows the use of an image as the background for the page.
<BODY BGCOLOR="#hexadecimal number">
<BODY TEXT="#hexadecimal number">
<BODY LINK="#hexadecimal number">
<BODY ALINK="#hexadecimal number">
<BODY VLINK="#hexadecimal number">: The BGCOLOR, TEXT, LINK, ALINK, and VLINK tags specify the colours to be used for the background, text, links, active links, and visited links respectively. (An link is active for the moment the user clicks on it, and changes colour to confirm it has been clicked.)
<BODY LEFTMARGIN=margin>
<BODY TOPMARGIN=margin>: The LEFTMARGIN and TOPMARGIN tags set the margin at the left and top of the document, in pixels.
<BODY BGPROPERTIES="FIXED">: The BGPROPERTIES tag causes the background image (set with the BACKGROUND tag) to remain fixed as the document scrolls: a watermark effect.

Example

BR
The line break tag breaks the current line of text. It's not necessary inside a PRE tag. There is no </BR> tag.

<BR CLEAR>
<BR CLEAR="type">: The CLEAR tag type can be LEFT to break until there is nothing to the left, RIGHT for the right side, all for break until both sides are clear, and NONE for a normal break.

Example

<HTML>
<HEAD> .. </HEAD>
<BODY>
..
Some sample text<BR>
more text..
..
</BODY>
</HTML>

P
The paragraph tag starts a new paragraph, equivalent to two BR tags. The </P> tag is optional if the tag is only to insert space between two paragraphs, but vital when tags (for example, ALIGN="center") are to apply to the whole paragraph.

<P ALIGN=left|right|center>: The ALIGN tag can be one of LEFT, RIGHT, or CENTER.
<P NOWRAP> text: The NOWRAP attribute will make it so lines are only broken at the <BR> tag.

Example

More text
..
</BODY>
</HTML>

Hx
This tag is the heading tag. It is sometimes used by search engine indexers to locate a person's page. There are 6 levels of headings that you can use. These are the sizes 1-6. Heading size 1 is the biggest, and then it gets smaller, until you get heading size 6, which is the smallest.

Example

<HTML>
<HEAD> .. </HEAD>
<BODY>
..
<H1>Some sample text</H1>
<H2>more text..</H2>
..
..
..
<H6>even more text..</H6>
</BODY>
</HTML>

B
The bold tag defines text that should be shown in boldface.

Example

<HTML>
<HEAD> .. </HEAD>
<BODY>
..
<B>Some sample text</B>
more text..
..
..
</BODY>
</HTML>

I
The italic tag defines text that should be shown in italics.

Example

<HTML>
<HEAD> .. </HEAD>
<BODY>
..
<I>Some sample text</I>
more text..
..
..
</BODY>
</HTML>

U
The underlined tag defines text that should be shown with a line underneath it.

Example

<HTML>
<HEAD> .. </HEAD>
<BODY>
..
<U>Some sample text</U>
more text..
..
..
</BODY>
</HTML>

OL
The ordered list tag introduces an ordered (numbered) list, which is made up of List Item (LI) tags. Your average ordered list counts 1, 2, 3, ... etc.

<OL COMPACT>

The COMPACT tag instructs the browser to reduce the space occupied by the list.

<OL SEQNUM=number>

The SEQNUM tag allows the first list item to be number instead of the default 1.

<OL CONTINUE>

The CONTINUE tag continues the numbering from the previous ordered list.

<OL START=number>

The START attribute allows the first list item to be number instead of the default 1.

<OL TYPE=type>

The TYPE attribute governs the way items are numbered. The types are:

`A.....`	A, B, C...
`a.....`	a, b, c...
`I.....`	I, II, III...
`i.....`	i, ii, iii...
`1.....`	1, 2, 3...

Example

UL
The unordered list tag introduces an unordered (bulleted) list, which is made up of List Item (LI) tags.

<UL COMPACT>: The COMPACT tag instructs the browser to reduce the space occupied by the list.
<UL SRC="image filename">: The SRC tag identifies a graphic image to be used as a bullet.
<UL PLAIN>: The PLAIN tag specifies not to use a bullet on each item.
<UL WRAP=vert|horiz>: The WRAP attribute is either VERT or HORIZ, and indicates multiple columns of data.
<UL TYPE=disc|circle|square>: Your basic bulleted list has a default progression of bullet types that changes as you move through indented levels. From a solid disc, to a circle to a square. The TYPE tag is added to the UL tag so no matter what your indent level you can specify whether you want a TYPE=disc, TYPE=circle, or TYPE=square as your bullet.

Example

LI
The list item tag defines one entry in an ordered, unordered, menu, or directory list. Other tags may be embedded in a list item.

<LI SRC=URL>: The SRC tag uses the image specified by the URL as the bullet for this item.
<LI SKIP=number>: The SKIP tag is used with ordered lists to skip forward in the count.
<LI TYPE=type>: The TYPE tag changes the bullet or numbering style for this item. type has the same values as it would in the OL or UL tag.
<LI VALUE=number>: The VALUE tag resets the sequence number to number.

Example

TT
The teletype tag defines text that should be shown in a fixed width font. For many lines of fixed width text, with the line breaks and other whitespace specified by the page author, use the <PRE> tag.

Example

FONT
The font tag allows you to change the way that text and other data are displayed upon the screen. Things such as colour, alignment, and the look of the font itself, can be changed.

<FONT SIZE=number>: The SIZE tag defines text with a smaller or larger font than usual.The normal font size corresponds to 3; smaller values of number will produce a smaller font, and larger values of number will produce a larger font. If number has a sign (for example +1), the font will be changed relative to the BASEFONT, or the browser's default font size.
<FONT COLOR="#hexadecimal number">: The COLOR attribute allows you to change the colour of the text. "hexadecimal number" is a six digit hexadecimal number with the first two digits specifying the red value, the middle two the green value, and the last two the blue value.
<FONT FACE="facename1, facename2...">: The FACE attribute specifies the face to be used, such as Arial or Courier. If multiple names are specified, the first one listed that is installed on the client machine is used. These fonts are the font's that are installed on the client's computer.

Example

Special Characters
These special characters are used to enter characters such as <, >, &, and " into HTML documents.The mnemonics of &lt, &gt, &amp, &quot, &nbsp, &reg and &copy stand for Less Than, Greater Than, AMPersand, double QUOTe, NonBreaking SPace, REGistered trademark and COPYright.

Example

<HTML>
<HEAD> .. </HEAD>
<BODY>
..
Some text and a "chicken" for dinner
This page is copyrighted, 2000 ®
..
</BODY>
</HTML>

IMG
The inline image tag displays an image referred to by a URL. It must contain at least an SRC tag. The tags are:

<IMG SRC="Image filename">: "Image filename" identifies the image source location, it is typically a GIF or JPEG file.
<IMG ALIGN="Alignment">: "Alignment" should be one of TOP, MIDDLE, or BOTTOM. This causes the top, middle, or bottom of the image to be aligned with the text on the line containing the IMG tag.; "Alignment" can also be LEFT or RIGHT, this moves the image to the left or right of the screen and allows text to flow around it.
<IMG ALT="Text">: "Text" is the text to be displayed by a browser that does not display images, or to be used when image display is suppressed.
<IMG BORDER=Number>: Number is the border thickness in pixels.
<IMG HEIGHT=Number>: This specifies the height of the image, measured in pixels.
<IMG HSPACE=Number>: Number is the space, in pixels, to leave to the left and right of the image.
<IMG WIDTH=Number>: This specifies the width of the image, measured in pixels.
<IMG VSPACE=Number>: Number is the space, in pixels, to leave above and below the image.

Example

A
The anchor tag defines either a link or an anchor in a document.

<A NAME="anchor-name">
<A HREF="#anchor-name">link-text</A>
<A HREF="filename">link-text</A>
<A HREF="filename#anchor-name">link-text</A>: The anchor tag must contain either a NAME attribute or an HREF attribute, or both.

Example

BLOCKQUOTE
The block quote tag defines text that is quoted from elsewhere. Can be represented as <BLOCKQUOTE> or <BQ>.

<BLOCKQUOTE> text </BQ>: Many browsers (including Netscape) display it in an indented block surrounded by blank lines.
<BLOCKQUOTE CLEAR =left|right|all> text </BLOCKQUOTE>: The CLEAR tag is used to position a quote after a graphic: it can be LEFT, RIGHT, or ALL and specifies which margin should be clear.
<BLOCKQUOTE NOWRAP> text </BLOCKQUOTE>: The NOWRAP tag stops the browser from wrapping except at a BR tag.

Example

<HTML>
<HEAD> .. </HEAD>
<BODY>
..
<BLOCKQUOTE>A sample sentence which will be "quoted" by the BLOCKQUOTE tag.
Some text
More text
</BLOCKQUOTE> ..
</BODY>
</HTML>

Comments
The comment tag includes the actual comment text. Any instance of --> ends the comment. Whitespace may be included between the -- and the > but not between the <! and the first --.

None of the comment is actually seen on screen by the user. This is mainly used for documentation purposes on commercial websites, in which many website designers may work on the one website.

Example

TABLE
A table consists of an optional caption (CAPTION) and one or more rows (TR.) The TABLE tags are:

<TABLE ALIGN="alignment">

This causes the table to be aligned in one of a variety of ways on the page.

LEFT: To the left text margin
CENTER: In the centre of the page
RIGHT: To the right text margin

Note that this does not affect the alignment of the table entries.

<TABLE WIDTH=number|percentage >

Specifys the width of the table on the page. Can be either expressed as a number in pixels or as a percentage of the page.

<TABLE BORDER=number>

This tag draws the table with a border number pixels thick.

<TABLE CELLPADDING=number>

This separates the cell borders and the text with a padding of number pixels.

<TABLE CELLSPACING=number>

This separates cells with a gutter of number pixels.

<TABLE BGCOLOR="#hexadecimal number">

This tag sets the background colour for the entire table.

<TABLE CLEAR=left|right|all>

Specifies which margin should be clear.

<TABLE NOFLOW>

This tag prevents text flow around the table and is equivalent to setting the CLEAR tag on the element after the table.

<TABLE NOWRAP>

This tag prevents word wrap within table entries.

Tables also contain two other tags. These tags contain the data, and set out the way that the data is displayed. They are:

TR
Valid only in a TABLE, the table row tag defines a row of cells that are defined with TH and TD tags.

<TR ALIGN="align">: Governs the alignment of the text within the table cell. "align" can be LEFT, RIGHT or CENTER.
<TR VALIGN="align">: Governs the alignment of the text within the table cell. "align" can be TOP, MIDDLE, BOTTOM, or BASELINE.
<TR BGCOLOR="#hexadecimal number">: This tag sets the background colour for the table row.
<TR CLASS="Class">: Class is one of Header, Body, or Footer and allows the browser to arrange for header or footer rows to be displayed as the user scrolls through the document.

TD
Valid only in a TR, the table data tag defines a table cell.

<TD COLSPAN="number">: The number of columns this cell occupies.
<TD ROWSPAN="number">: The number of rows this cell occupies.
<TD NOWRAP>: This attribute prevents word wrap within the cell.
<TD ALIGN="align">: Governs the alignment of the text within the table cell. "align" can be LEFT, RIGHT or CENTER.
<TD VALIGN="align">: Governs the alignment of the text within the table cell. "align" can be TOP, MIDDLE, BOTTOM, or BASELINE.
<TD BGCOLOR="#hexadecimal number">: This attribute sets the background colour for the table cell.

Example

<HTML>
<HEAD> .. </HEAD>
<BODY>
..
<TABLE BORDER=0 CELLPADDING=1 CELLSPACING=1 ALIGN=CENTER WIDTH=80%>
<TR BGCOLOR="#ee4465">
<TD WIDTH=40% VALIGN=TOP COLSPAN=4>
Table Data1</TD>
<TD WIDTH=60% VALIGN=BOTTOM COLSPAN=6>
Table Data2</TD>
</TR>
</TABLE>
More text
..
</BODY>
</HTML>

Hexadecimal Numbering
The hexadecimal numbers used in color's are comprised of 6 hexadecimal digits, every two corresponding to a different primary colour. RRGGBB, the first two digits tell the browser to display a certain amount of Red. The second two digits tell the browser to display a certain amount of Green, and the third two tell the browser to display a certain amount of Blue.

Hexadecimal numbers are as follows:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. This is a base 16 numbering system. A=10, B=11, C=12, D=13, E=14, and F=15.

Example

#000000=Black
#FFFFFF=White
#00FF00=Green
#FF0000=Red
#0000FF=Blue...
and so on.

Go back to the Top of the Page Go back to the Main Menu