HTML overview

Basic structure

HTML HTML is the outermost tag, which contain all of the document. It is optional. HTML Occurrence: Outermost, i.e. contain any other elements (except the !DOCTYPE-element) Content: contains HEAD and BODY elements

HEAD HEAD contains information about the document, like title, meta-information etc. It is optional, i.e. it is implied if not present. HEAD Occurrence: May occur in HTML Content: may contain TITLE, ISINDEX, BASE, SCRIPT, style, META, LINK

BODY BODY contains all the visible content of the document which is rendered in the browser window. It is optional, i.e. it is implied if not present. BODY BACKGROUND=url background graphics BGCOLOR=color color of background TEXT=color color of text LINK=color color of links VLINK=color color of visited links ALINK=color color of links at click Occurrence: May occur in HTML Content: contains anything

Head

TITLE Contains the title of the document. This is the only required tag, i.e. all valid HTML-documents must contain a TITLE. TITLE Occurrence: Should occur in HEAD Content: may contain plaintext.

META Can be used in one of two ways: 1) Contain meta-information about the document, e.g. keywords, description 2) To emulate a HTTP-header META NAME=string type of meta information HTTP-EQUIV=string name of a HTTP-header content=string content of the meta-information Note: A META-tag must contain either NAME or HTTP-EQUIV (but not both). Occurrence: May occur in HEAD Content: empty

LINK Describes a connection from the document to other document. It is not a clickable link like the A HREF element, but an implied link to an external resource like a style-sheet. LINK REL=string Relationship. The function of the linked resource, e.g. "style-sheet" REV=string Reverse relationship, i.e. the function of this document for the linked. Seldom used. HREF=url URL for the linked document TYPE=mediatype MIME-type for the linked document, e.g. "text/css" for a CSS style-sheet IE3/NN4 TITLE=string Description of the link. Effect depends on the context. Occurrence: May occur in HEAD Content: empty

BASE Two uses: 1) Indicates a base URL, which all relative URLs in the document is resolved relative to. 2) Define default target for non-targeted links in a framed document. BASE HREF=url Base URL for relative URLs in document TARGET=string Default target frame for links NN/IE Occurrence: May occur in HEAD Content: empty

Paragraphs

P (Paragraph) Basic text paragraph P align="left"|RIGHT|CENTER Horizontal alignment of paragraph Content: may contain text level

H1-H6 (Headlines) Headlines. Ranges from H1 (the largest) to H6 (the smallest). Usually rendered as bold text in different sizes. Shown below for H1, but works the same for H1,HEADLINE,H3,H4,H5,H6 H1-H6 align="left"|RIGHT|CENTER Horizontal alignment of headline Content: may contain text level

ADDRESS A paragraph containing an address. Usually rendered indented and in italics. ADDRESS Content: may contain text level

BLOCKQUOTE Paragraphs shown indented. Originally meant for marking quotations, but mostly used as an easy way of creating margins. BLOCKQUOTE Content: may contain anything

DIV Denotes one or more paragraphs e.g. to define alignment. DIV align="left"|RIGHT|CENTER Horizontal alignment of paragraphs Content: may contain anything

PRE (Preformatted) The content of a PRE-tag is shown as formatted text, not as HTML. That means: - text is shown in a monospaced font - text is not wrapped to fit the window width. - line break characters in the HTML-source is not ignored, but is rendered as line breaks, like the BR-tag. - consecutive space-characters is not collapsed but preserved. This makes it possible to insert formatted ASCII-text, e.g. the body of an e-mail message or program source code, directly into HTML. PRE Content: may contain text level

Lists

UL (Unordered List) A bulleted list UL TYPE=DISC|SQUARE|CIRCLE Type of bullets used Content: contains LI-elements

OL (Ordered List) A list with the items numbered OL TYPE="1"|"a"|"A"|"i"|"I" Type of numbering (arab, roman, letters) START=number By which number the list should start Content: contains LI-elements

LI (List Item) Denotes a single item in a OL or UL-list. LI TYPE=DISC|SQUARE|CIRCLE (when in UL) type of bullet TYPE="1"|"a"|"A"|"i"|"I" (when in OL) type of numbering value=number (when in OL) item number Occurrence: May occur in UL or OL Content: may contain anything

DL (Definition List) A list of alternating terms and definitions. Rendered as paragraphs alternating between left aligned paragraphs (the terms) and indented paragraphs (the definitions), and without extra vertical spacing between paragraphs. DL COMPACT Indicates that term and definition should be shown on same line if possible Content: contains DL and DD elements

DT (Definition Term) The term to be defined. DT Occurrence: May occur in DL Content: may contain text level

DD (Definition Data) The definition - shown indented DD Occurrence: May occur in DL Content: may contain anything

Character formatting, physical

These tags indicate the visual presentation of characters or words.

B Bold B

I Italic I

TT Teletype (monospaced font) TT

BIG Larger font size BIG

SMALL Smaller font size SMALL

SUB Subscript SUB

SUP Superscript SUP

BLINK Blinking text BLINK NN

S Strikethrough text (non standard) S NN3/IE

STRIKE Strikethrough text STRIKE

U Underline (supported from NN3) U

Content: may contain text level

Character formatting, logical

The following elements indicate the function or meaning of characters or words, rather than the presentation.

EM emphasis, (usually rendered italic) EM

STRONG strong emphasis, (usually rendered bold) STRONG

SAMP sample output (usually rendered monospaced) SAMP

VAR variable VAR

CITE citation (usually rendered italic) CITE

CODE code (usually rendered monospaced) CODE

KBD keyboard, i.e. something to be entered by the user (usually rendered monospaced) KBD

DFN definition (usually rendered cursive) DFN

Content: may contain text level

Font formats

font Change the color, size and family of the font. font size=number|"+number"|"-number" Font size. May be given as absolute (1-7 when 3 is default) or relative (+number or -number) to basefont size. COLOR=color Text color face=string One or more font names, delimited by comma, e.g. face="Univers" or face="Optima, Arial, Helvetica". The first family on list, which is available on the client, is used. NN3/IE Content: may contain text level

BASEfont Define the font size for the following text. The relative font sizes used in font SIZE attribute is resolved relative to this. BASEfont size=number Font size from 1-7, 3 is default Content: empty

Line break

BR (Break) Forces a line break. BR CLEAR=LEFT|ALL|RIGHT|NONE The following line continues below current floating objects. Content: empty

HR (Horizontal Rule) Inserts an ugly horizontal line or bar. Is a block-level element, i.e. it forces a paragraph break. HR align="left"|RIGHT|CENTER Horizontal alignment of the rule noshade No 3d-shades size=pixels Thickness width=pixels|percent% Width Content: empty

NOBR (Nobreak) Nobreak element - content is not line wrapped to fit. NOBR NS/IE Content: may contain text level

WBR (Wordbreak) Line may be wrapped at this point. WBR NS/IE Occurrence: May occur in NOBR Content: empty

Tables

table A table table align="left"|CENTER|RIGHT horizontal alignment of table width=pixels|percent% width of table border=pixels size of border around table on the outside. If 0 no visible borders. cellspacing=pixels size of bars between cells CELLPADDING=pixels margin between cell content and cell borders BGCOLOR=color background color in cells NN3/IE COLS=number number of rows in table (indicated to make rendering of table faster) NN4/IE Content: contains TR, maybe also CAPTION

table CAPTION A caption shown above or below a table table CAPTION align=TOP|bottom shown above or below table Occurrence: May occur in table Content: may contain text level

TR (Table row) Designates row of cells in a table TR align="left"|RIGHT|CENTER horizontal alignment of cell contents, default is LEFT valign=TOP|MIDDLE|bottom|BASELINE vertical alignment of cell contents, default is MIDDLE Occurrence: May occur in table Content: contains TD, TH

TD (Table data) A cell in a table TD rowspan=number the number of grid rows the cell spans COLSPAN=number the number of grid columns the cell spans NOWRAP indicates that contents should not be wrapped align="left"|RIGHT|CENTER horizontal alignment of cell contents, default is as TR valign=TOP|MIDDLE|bottom|BASELINE vertical alignment of cell contents, default is as TR width=pixels minimum cell width height=pixels minimum cell height BGCOLOR=color cell background color NN3/IE Occurrence: May occur in TR Content: may contain anything

TH (Table header) A header cell. Rendered as TD except content is bold and centered. It has the same attributes as TD. TH attributes same attributes as TD Occurrence: May occur in TR

Link/anchor

A (Anchor) A link and/or a named link target A HREF=url link destination NAME=string name of anchor (link target) TARGET=string target frame (only when HREF is present) NN/IE Note: Must contain HREF or NAME or both. Content: may contain text level

Images

IMG (Image) Inserts an image IMG SRC=URL Image file ALT=string Alternative text, shown in image-challenged clients align=TOP|MIDDLE|bottom Vertical placement of image relative to text baseline align="left"|RIGHT Makes the image float to left or right with text wrapping around. height=pixels Size of image. Should be indicated to make rendering faster. width=pixels Size of image. Should be indicated to make rendering faster. border=pixels Width of border around picture HSPACE=pixels Spacing around picture VSPACE=pixels Spacing around picture USEMAP="#navn" Name of a client-side image map (defined with MAP) ISMAP Indicates that a server-side image map is present Content: empty

Client-side image map

MAP (Image map) Contains the definition of a client-side image map. MAP NAME=string Name of the map, to be used in IMG USEMAP Content: contains AREA-tags

AREA A geometric area associated functioning as a link in a client-side image map AREA SHAPE=RECT|CIRCLE|POLY|DEFAULT shape of area. DEFAULT is all otherwise undefined areas. COORDS=string set of comma delimited coordinates indicating the shape HREF=url URL of link NOHREF indicates the area is not a link ALT=string alternative text (not supported by NN) TARGET=string Target frame of link NN/IE Content: empty

Forms

FORM A form for entering information to be send to a CGI-script FORM ACTION=url URL of the CGI-script to which information is submitted METHOD=GET|POST indicates HTTP-method to use for transferring the data ENCTYPE=mediatype which method to be used for encoding the data *) TARGET=string frame target for returned page NN2 Note: *) Default ENCTYPE is application/x-www-form-urlencoded. If the form contains a INPUT-element with TYPE=FILE it should be multipart/form-data Content: contains ordinary HTML and form elements: INPUT, SELECT, TEXTAREA

INPUT A input widget in a form. Several different types exists, which use different attributes. They all support the attributes TYPE (indicating the type of widget) and NAME, indication a name which will identify the information form the field when submitted. Below the different TYPEs is described separately, though they use the same tag name. INPUT

INPUT (type=Text, Password) A widget for entering one line of text. If TYPE is PASSWORD letters entered is not shown, but represented by stars. INPUT TYPE=TEXT|PASSWORD widget type NAME=string name of field value=string default content in field size=number physical length of field (in characters) maxlength=number max. number of letters to be entered in field Occurrence: May occur in FORM Content: empty

INPUT (type=Checkbox, Radio) A radio- or checkbox. Only one radio-button in a group can be chosen. INPUT TYPE=CHECKBOX|RADIO widget type NAME=string name for identifying field. RADIO-buttons in same group have same NAME value=string if TYPE=RADIO: a name to identify which button is selected CHECKED indicates that the button is selected by default Occurrence: Must occur in FORM Content: empty

INPUT (type=Submit, Reset) When the SUBMIT-button is pressed, the data entered into the form is send to the server. If the RESET-button is pressed, the data is reset to default values. INPUT TYPE=SUBMIT|RESET widget type NAME=string can be used for identifying different SUBMIT-buttons in the same form value=string caption on button Occurrence: Must occur in FORM Content: empty

INPUT (type=Hidden) An element invisible for the user, but may contain data which is send with the form. INPUT TYPE=HIDDEN widget type NAME=string name identifying the field value=string the contained value Occurrence: May occur in FORM Content: empty

INPUT (type=Image) A picture functioning as a submit button. Coordinates for the position of the mouse on the picture is sent when submitted. INPUT TYPE=IMAGE widget type NAME=string name identifying the field SRC=url URL of image file align=TOP|MIDDLE|bottom|LEFT|RIGHT vertical alignment of image on text line Occurrence: Must occur in FORM Content: empty

INPUT (type=File) A widget allowing the user to indicate a file to upload. Rendered as a field with the filename, and a button usually labeled "Browse" for choosing the file. INPUT TYPE=FILE * NAME=string name identifying the field size=number length of field in characters maxlength=number max. number of characters i file name Note: *TYPE=FILE not supported in IE versions prior to 3.02 Occurrence: May occur in FORM Content: empty

INPUT (type=Button) A button. Only usable in connection with scripting. INPUT TYPE=BUTTON widget type NN/IE NAME=string name identifying the button value=string button caption Occurrence: May occur in FORM Content: empty

SELECT A list box with selectable items SELECT NAME=string name identifying the field size=number number of visible items MULTIPLE indicates that more than one item may be selected Occurrence: May occur in FORM Content: contains OPTION-elements

OPTION Contains the label of an item in a select box OPTION value=string name identifying the item SELECTED indicates the item is selected by default Occurrence: May occur in SELECT Content: contains plaintext

TEXTAREA A box where several lines of text can be entered. Contains the default text in the box. TEXTAREA NAME=string name identifying the field ROWS=number width of box in characters COLS=number height of box in characters WRAP=OFF|HARD|SOFT indicates if text should be wrapped to fit the box NN Occurrence: May occur in FORM Content: may contain plaintext

Objects

EMBED Embeds a object of file which should be rendered by a plug-in program EMBED NN/IE SRC=url URL of data file NN/IE TYPE=mediatype MIME-type of plug-in. If no SRC is given, this decides plug-in type NN NAME=string name identifying the object NN/IE align="left"|RIGHT|TOP|bottom Alignment of object NN width=pixels width of plug-in area NN/IE height=pixels height of plug-in area NN/IE HSPACE=pixels margin NN VSPACE=pixels margin NN border=pixels width of border around area NN FRAMEborder=NO indicates if a border is present NN UNITS=PIXELS|EN unit of measurement for width/height (default is PIXELS) NN PALETTE=FOREGROUND|BACKGROUND ? NN/IE other parameters other parameters specific for the plug-in program. NN/IE HIDDEN=TRUE|FALSE indicates if the object is visible NN PLUGINSPAGE=url URL of page from which plug-in program can be downloaded NN PLUGINURL=url URL of plug-in program as JAR-file NN3 Content: empty

NOEMBED The contents of this element should be shown on browsers not supporting the EMBED-tag. However, it is also shown on MSIE and Navigator 2... NOEMBED NN3 Content: may contain anything

APPLET Embeds a Java-applet APPLET CODE=url URL of main class-file CODEBASE=url base URL for finding other class-files NAME=string name identifying object ALT=string alternative text (if applet is not shown) align="left"|RIGHT|TOP|MIDDLE|bottom position of area height=pixels height of area width=pixels width of area HSPACE=pixels margin around area VSPACE=pixels margin around area MAYSCRIPT indicates that the applet may use script functions on page NN3 ARCHIVE=url URL of compressed version of class-files NN3 Content: contains PARAM tags, and other html, which will be shown if the browser does not support

PARAM (Parameter) A parameter accessible from a Java applet. PARAM NAME=string name identifying the parameter value=string value Occurrence: May occur in APPLET or OBJECT Content: empty

OBJECT Tag used for embedding ActiveX-controls in MSIE. Proposed as a generalized solution for embedding objects as images, program objects, plug-in objects and more. Not as widely supported as the more specific APPLET and EMBED elements. OBJECT IE/NN4 DATA=url address of object data IE/NN4 TYPE=mediatype MIME-type of data IE/NN4 CODEBASE=url Base URL for object code IE/NN4 CODETYPE=mediatype MIME-type of code IE/NN4 CLASSID=url URL of executed object IE/NN4 NAME=string name identifying object IE/NN4 align="left"|CENTER|RIGHT area placement on page IE/NN4 height=pixels size of area IE/NN4 width=pixels size of area IE/NN4 HSPACE=pixels margin around area IE/NN4 VSPACE=pixels margin around area IE/NN4 border=pixels border around area IE/NN4 DECLARE indicates the object should be prepared but not executed IE/NN4 SHAPES ? IE/? STANDBY=string caption showing while waiting IE/NN4 USEMAP=url image map IE/? Content: empty

Script

SCRIPT Contains a script e.g. a JavaScript program. The script often is inserted into a comment-tag. SCRIPT LANGUAGE=string Script language, e.g. LANGUAGE="JavaScript1.1" SRC=url Address of external script, e.g. a "*.js" file NN3 Content: contains a script in the indicated language

NOSCRIPT shown by browsers not supporting script. However, content is also shown by Navigator 2 and MSIE. NOSCRIPT NN3

Style-sheets

any tag (style-sheet attributes) These are universal attributes which may occur in any tag, and is used in connection with style-sheets. any tag ID=string unique identification of element IE/NN4 CLASS=string classification of element IE/NN4 style=string declares style-information of element IE/NN4

style contains a style-sheet style TYPE=mediatype MIME-type of style-sheet language, e.g. "text/css" Occurrence: May occur in HEAD Content: contains a style-sheet in the indicated language

Frames

FRAMESET Defines a frameset FRAMESET NN/IE COLS="pixels|percent%|*|*number, ..." defines horizontal split NN/IE ROWS="pixels|percent%|*|*number, ..." defines vertical split NN/IE border=pixels size of border between frames NN3 bordercolor=color color of borders NN3 FRAMEborder=YES|NO 3d-border or flat border NN3 FRAMEborder=1|0 3d-border or no border IE FRAMESPACING=pixels width of border IE Occurrence: replaces BODY in frameset-documents Content: contains FRAME-tags and/or other FRAMESET-elements

FRAME Defines a frame in a frameset. FRAME NN/IE SRC=url address of default page in frame NN/IE FRAMEborder=YES|NO 3d-border or flat border NN3 FRAMEborder=1|0 3d-border or no border IE bordercolor=color color of border NN3 MARGINheight=pixels vertical margin around frame-content NN/IE MARGINwidth=pixels horizontal margin around frame-content NN/IE NAME=string name identifying frame (as target) NN/IE NORESIZE indicates frame can not be resized NN/IE SCROLLING=YES|NO|AUTO indicates if scrollbars should be present NN/IE Occurrence: May occur in FRAMESET Content: empty

NOFRAMES This element occurs in a FRAMESET-page, and contains an alternate page body to show in browsers which does not support frames. NOFRAMES NN/IE Occurrence: May occur on a page with a FRAMESET Content: contains BODY.

Layout

MULTICOL The content of this element is flown into columns. MULTICOL NN3 COLS=number number of columns NN3 GUTTER=pixels spacing between columns, in pixel NN3 width=number width of each column, in pixels NN3 Content: anything

SPACER Inserts spacing SPACER NN3 align="left"|RIGHT|TOP|ABSMIDDLE|ABSbottom |TEXTTOP|MIDDLE|BASELINE|bottom placement of area NN3 TYPE=HORIZONTAL|VERTICAL|BLOCK type: horizontal, vertical or block-type space NN3 height=pixels height of area (if type is BLOCK) NN3 width=pixels width of area (if type is BLOCK) NN3 size=pixels height (if HORIZONTAL) or width (if VERTICAL) of area NN3 Content: empty

Special

<-- comment --> (Comment) A special tag which is used for inserting comments in HTML. The content is ignored by browsers. May not contain other tags or comments. <-- comment --> Content: empty. The comment text may include any sequence of character except -- and >; for example: <-- here starts menu bar -->

!DOCTYPE The !DOCTYPE-tag indicate which version HTML the document uses. Usually ignored by browsers, as they always process the elements they support and ignore the rest. The doctype declaration for HTML 3.2 is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> !DOCTYPE HTML describes the name of the document type PUBLICstring string indicating the document type definition Occurrence: must occur as the first tag in the document, before the HTML-element Content: empty.

Special markup characters

These signs must be represented by these codes, if they are used as part of the document content and not as part of the markup.

&	&	ampersand (and-sign)
>	>	greater than
&lt;	<	less than
&quot;	"	double quote

Special characters

These special characters can be represented by codes:

©	©	copyright sign
®	®	registered
™	™	trademark indication	IE3
 		non breaking space - a space which is never collapsed or wrapped

European letters

Character entity names exist for most special European letters, e.g.:

é	é
æ	æ
ø	ø
å	å
Æ	Æ
Ø	Ø
Å	Å

Color names

I HTML 3.2 colors may be specified by names. This is a list of these color names and the corresponding color names.

Name of color	Code
Black	#000000
Silver	#C0C0C0
Gray	#808080
White	#FFFFFF
Maroon	#800000
Red	#FF0000
Purple	#800080
Fuchsia	#FF00FF
Green	#008000
Lime	#00FF00
Olive	#808000
Yellow	#FFFF00
Navy	#000080
Blue	#0000FF
Teal	#008080
Aqua	#00FFFF

Deprecated tags and attributes

Certain tags and attributes has been part of earlier HTML versions, but is now deprecated.

Obsolete

These tags have been part of earlier HTML versions, but is now superseded by other tags

CENTER - superseded by P align="center" or DIV align="center"
MENU and DIR - superseded by UL
ISINDEX superseded by FORM
XMP, LISTING and PLAINTEXT superseded by PRE
NEXTID - not used.

Not supported

Certain attributes is part of the HTML 3.2 specification, but is not