martin2k

How HTML Works - Tag Reference

HomeForumTutorials Tags:
 
 

Tag Reference

The following guide will show you what tags to use to achieve a specific effect, including examples where possible.


Text

Tag Effect Example
ABBREV Abbreviation Example Text
ACRONYM Acronym Example Text
ADDRESS Address - italicises text
Example Text
B Bold Example Text
BIG Big - enlarges text Example Text
CITE Citation - italicises text Example Text
CODE Code - monospaces text Example Text
DEL Deleted text - strikesthrough text Example Text
DFN Definition - italicises text Example Text
EM Emphasises text - italicises text Example Text
FONT Allows you to specify different font faces, sizes and colours Example Text
H1 Heading 1

Example Text

H2 Heading 2

Example Text

H3 Heading 3

Example Text

H4 Heading 4

Example Text

H5 Heading 5
Example Text
H6 Heading 6
Example Text
I Italic Example Text
INS Inserted text - underlines text Example Text
KBD Keyboard text - monospaces text Example Text
LISTING Listing - monospaces text (use PRE instead) Example Text
MARQUEE Creates horizontally scrolling text Example Text
PLAINTEXT Plain text - should not be used due to strange effect produced  
PRE Preformatted - monospaces text
Example Text
Q Quotation - places quotes around text (Firefox only) Example Text
S Strikethrough Example Text
SAMP Sample computer code text Example Text
SMALL Small - shrinks text Example Text
STRIKE Strikethrough Example Text
STRONG Strong - bolds text Example Text
SUB Subscript Example Text
SUP Superscript Example Text
TT Teletype text - monospaces text Example Text
U Underline Example Text
VAR Variable text - italicises text Example Text
XMP Preformatted - monospaces text (use PRE instead) Example Text

Paragraphs

Tag Effect Example
BLOCKQUOTE Indents text on the left and right hand side of the paragraph
Example Text
BR Inserts a single linebreak Example
Text
CENTER Centres text - the ALIGN attribute of the P tag should be used instead
Example Text
NOBR Prevents text from wrapping at the end of the page - causes a horizontal scrollbar to be displayed if the text goes past the end of the page  
P Begins a new paragraph and creates a gap before and after itself Example Text

Example Text

Hyperlinks

Tag Effect Example
A Creates a hyperlink Performance Modified Cars

Images

Tag Effect Example
AREA Defines an area on an image, which can be clicked on to go to another URL.  Use in conjunction with the MAP tag. See MAP example
IMG Shows an image Escort GTi
MAP Specifies an image to use for an image map.  AREA tags are used to specify clickable areas on the image. Shapes Red circle Blue rectangle Green polygon

Lists

Tag Effect Example
DD Specifies a description in a definition list See DL example
DIR Defines a directory listing.  The LI tag is used within this tag.  Behaves like the UL tag. See UL example
DL Creates a definition list
Telephone
A device used to communicate with people over long distances.
DT Specifies a term in a definition list See DL example
LI Defines a list item either in an ordered list (OL) or an unordered list (UL).  Multiple LI tags are contained within the OL or UL tags. See OL and UL examples
MENU Defines an unordered list (the same as UL).  Multiple LI tags can be contained within this tag. See UL example
OL Defines an ordered list i.e. a list where each item is prefixed either with numbers, letters or Roman numerals.  Multiple LI tags are contained within this tag to define each item in the list.
  1. Aston Martin
  2. BMW
  3. Jaguar
  4. Mercedes-Benz
UL Defines an unordered (bulleted) list.  Multiple LI (list items) tags are contained within this tag to define each item in the list.
  • Volkswagen
  • Ford
  • Toyota
  • Renault

Forms

Tag Effect Example
BUTTON Creates a command button. The difference between the button created with the INPUT tag is that you can put page content into this button.
FORM Defines an area for a web form on a page  
INPUT Defines elements of a FORM, which are either hidden or can be completed by the user.  Types of elements that can be defined include button, checkbox, file, hidden, image, password box, radio button, reset button, submit button and a text box.
OPTGROUP Allows you to arrange the items in a ComboBox control (defined by the SELECT tag) See SELECT example
OPTION Defines each list item in the ComboBox control (drop-down list) on a web page See SELECT example
SELECT Creates a ComboBox (drop-down list)
TEXTAREA Creates a multiline textbox

Tables

Tag Description
CAPTION Creates a caption above a table (by default) - it must be used within the TABLE tag
COL/COLGROUP Defines the characteristics of columns in a table.  Must be used within the COLGROUP tag.  It is possible to create columns in tables without the COLGROUP tag.
TABLE Defines a table
TBODY Defines the section of the table used between the table header (THEAD) and table footer (TFOOT).  This tag is used within the TABLE tag.  The table body contains all the table data.
TD Defines a cell in a table.  It is used within the TR (table row) tag.
TFOOT Defines the section of the table used as the footer (bottom).  This tag is used within the TABLE tag.
TH Defines a header cell in a table. It is used within the TR (table row) tag.  Text used within this tag is usually centred and made bold.
THEAD Defines the section of the table used as the table header (top).  This tag is used within the TABLE tag.
TR Defines a row in a table

Objects

Tag Effect Example
APPLET Creates an area on a web page for a Java applet See APPLET tag to see example
EMBED This tag puts a plugin into the web page e.g. a media player ready to play music
PARAM Sets a parameter for a Java applet.  Multiple PARAM tags can be used within an APPLET tag.  

Scripts

Tag Description
NOSCRIPT If the browser does not support scripts, the text held within this tag will be displayed instead.  This tag should be used immediately after the closing SCRIPT tag.
SCRIPT Defines a client-side script.  The text contained within the opening and closing script tags will be executed on the client computer when the page is loaded (unless the script is a function).

Invisible Tags

Tag Description
BASE Specifies the base URL for resources in the web page.  It must be used within the HEAD tag.
BASEFONT Defines the font of text contained within the tag.  This is an old HTML 3.0 tag - the FONT tag or a style sheet should be used instead.
BGSOUND Plays music or a sound when the web page loads, which can loop a number of times or continuously
BODY This tag contains all the visible elements of the page i.e. text, images, tables etc.  It is contained within the HTML tag.
HEAD This tag contains non-visible information about the page.  It is contained within the HTML tag.
HTML Defines a page as being in the Hyper Text Markup Language (HTML) format.  This tag should surround all others.
LINK This tag defines links to related documents.  It is used in the HEAD section.  Its main use is to specify what style sheet or style sheets are used by the document.
META This tag is used to describe meta information about the page.  Multiple META tags can be used.  META tag must be contained within the HEAD tag.
STYLE This tag defines the styles for the document.  It is used within the HEAD tag.  If you want to use the same styles for more than one page, you should use a style sheet.  This is linked to the document using the LINK tag.
TITLE This tag defines the document's title.  It is contained within the HEAD tag.

Frames

Tag Description
FRAME Specifies details of an area of the screen, which have been split using the FRAMESET tag
FRAMESET Splits the screen into areas (frames).  Each frame holds its own URL.
IFRAME Defines a rectangular area (frame) on the page, in which another document is displayed
NOFRAMES If the browser cannot display frames, the content within the NOFRAMES tag will be displayed instead

Miscellaneous

Tag Description
DIV Defines a section (division) in the document
HR Creates a horizontal rule (line) across the screen
ISINDEX Creates a single textbox control, with a prompt.  When the user fills in the textbox and presses the Enter key, the textbox string is passed to the current URL.
SPACER Creates a blank space on the page, which is used to layout items on the page properly
SPAN This tag allows you to apply styles to inline-elements i.e. text does not have to start on a new paragraph when applying a different style
SPOT An old tag that is used to mark a space on a page, using the ID attribute, when there is no other way of doing so

Previous - Creating a Simple Web Page


blog comments powered by Disqus

Archived Comments

From: seszer
Date: Monday, July 14, 2008 at 19:23:51
Comments: Html Attribute for <MARQUEE ...> -- Marquee Slide Image and Text ---
http://html-lesson.blogspot.com/2008/06/marquee-slide-image-text.html
 
From: james
Date: Friday, February 9, 2007 at 06:49:08
Comments: very good information gives about html tags

© Martin Allen 1999 - 2011.  Last updated Sunday 07 August 2011 01:01:46 AM +0100.