Quick Reference Guides to HTML 4.01 and XHTML 1.0
Introduction
HTML is in the process of being superseded by XML, an extensible markup
language that has much more versatility in a variety of communicating
environments. HTML 4.01 is the
final version of
this longstanding markup language. It will not be revised further. XHTML
1.0, a combination of HTML and XML that provides a transition between
the two, may undergo a few revisions, but eventually it will also be superseded
by XML. This page provides quick reference guides to both HTML 4.01 and
XHTML 1.0.
Guide to HTML 4.01
Format used in the tables below
- Bold text indicates the syntax for a tag and its attribute(s).
- Italic text indicates input to
be supplied by the user, such as:
- content is the text or image
to be displayed or otherwise acted upon by the
markup tag.
- # represents a numeric
value.
- value is a numeric,
text or code value for an attribute, depending
on the type of attribute. Some tags
can have more than one attribute, and
these can be used simultaneously. A tag's
attributes are contained inside the tag.
- name represents a unique
name.
- url or path is
the absolute address (URL) or relative path
to another document or asset (e.g., an image).
- Tag format: <tagname
attribute="value">content</tagname>
For example, an anchor tag (<a></a>)
providing a link to NC State's home page might look like
this:
<a
href="http://www.ncsu.edu">NC
State's Home Page</a>
and the text would be displayed like this:
NC State's Home Page
Be sure to:
- Type each tag
in lowercase, e.g., <head> instead
of <HEAD>.
- Include an
end for each tag, e.g., <title>title
of the page</title>. Alternatively,
for <p>, <br> and <hr> you may use a
combination beginning and end tag, e.g., <br
/> instead of <br></br>
- Enclose each
attribute value in quotes, e.g., size="10px" instead
of size=10px.
- Specify a value
for every attribute, e.g., align= "center" instead
of align=" ".
- Use only one space between words. Multiple consecutive
spaces are treated as a single space, and the extra ones are not
displayed by the browser.
- See http://webdesign.about.com/library/tags/bl_index.htm for
a complete listing of HTML and XHTML tags, their specifications
and their attributes.
Commonly used tags and
their attributes:
Skeletal tags
<html>the
entire HTML document</html>
<html attribute(s)="value">the
entire HTML document</html>
|
Defines the beginning
and end of an HTML document. |
<head></head>
<head attribute(s)="value">content
of the head</head>
|
Defines the beginning
and end of the "head" part of an HTML document. Sets off the
title and other information that isn't displayed on the Web page itself. |
<body>content
of the document body</body>
<body attribute(s)="value">content
of the document body</body>
|
Defines the beginning
and end of the "BODY" part of an HTML document. Sets off the
visible portion of the document. |
<!-- comments
in the source -->
|
The Comment tag is used
to contain textual matter that appears in the source code of the document
but is not rendered by the browser. |
<frameset>content
of the frameset</frameset>
|
Defines a collection
of frames and framesets and controls their spacing and borders. Replaces
the <body> tag in a frames document; can also be nested in other
framesets. |
<frameset rows="value,value"></frameset>
|
Defines the number and
width (value) of the rows within a frameset. Values are in pixels or
percentages of frameset width. |
<frameset cols="value,value"></frameset>
|
Defines the number and
width (value) of the columns within a frameset. Values are in pixels
or percentages of frameset width. |
<frame>content
of the frame</frame>
|
Defines a single frame — or
region — within a frameset. |
<noframes>message
to be displayed by browser that is not frame-compliant</noframes>
|
Defines the message
that will be displayed by a browser that doesn't support frames. |
Header tags
NOTE: These must go inside the <head></head> tag.
<title>title
of the document</title>
|
Displays the name of
the document in the browser's title bar for the displayed document. |
<meta>information
about the document</meta>
<meta attribute(s)="value">information
about the document</meta>
|
Meta tag(s) provide
additional information about the document. May be used by search engines
to locate the document. |
<style>style
properties</style>
<style attribute(s)="value">style
properties</style>
|
Used to create properties
to control the display of the body content for the entire document. |
<script>executable
script to be processed by the browser</script>
<script attribute(s)="value">executable
script to be processed by the browser</script>
|
Defines one or more
scripts that can be invoked by elements within the document. Some
scripts are invoked by code or attributes within the "body". |
Body tag
<body bgcolor="value">document
content<body>
|
Specifies the background
color, using the name or hex value of the color. |
<body background="url
of the image" (or "path
to the image")>document
content<body>
|
Uses an image for the
background. |
<body text="value">document
content<body>
|
Specifies the text color,
using the name or hex value of the color. |
<body vlink="value">document
content<body>
|
Specifies the color
of followed links, using the name or hex value of the color. |
<body alink="value">document
content<body>
|
Specifies the color
of links on click. |
Text markup tags
<pre>text
to be preformatted</pre>
|
Displays preformatted
text. Preserves all spacing and text characteristics. |
<h1>headline
content</h1>
|
Displays the largest
headline. |
<h6>headline
content</h6>
|
Displays the smallest
headline. |
<b>text
to be displayed in bold</b>
|
Displays bold text. |
<i>text
to be displayed in italic</i>
|
Displays italic text. |
<tt>text
to be displayed in teletype style</tt>
|
Displays teletype or
typewriter-style text. |
<cite>information
to be cited</cite>
|
Displays a citation,
usually in italic. |
<em>text
to be emphasized (italic)</em>
|
Emphasizes a word (currently
with italic). |
<strong>text
to be emphasized (bold)</strong>
|
Emphasizes a word (currently
with bold) |
<font face="value">text
to be displayed in a certain font</font>
|
Specifies font face
(e.g., Arial, Courier, Times Roman) |
<font size="#">text
to be displayed in a certain font</font>
|
Specifies font size,
from 1 to 7. |
<font color="value">text
to be displayed in a certain font</font>
|
Specifies font color,
using the name or hex value of the color. |
Hyperlink tag
<a href="url" (or "path")>text to be displayed as a link</a>
|
Displays a hyperlink. |
<a href="mailto:emailaddr@somewhere.com"></a>
|
Displays a mailto link. |
<a name="name
of the target"></a>
|
Displays a target location
within a document. |
<a href="#name
of the target"></a>
|
Displays a link to a
target location from elsewhere in the same document. |
Formatting tags
<p>content
of the paragraph</p>
|
Begins a new paragraph
or inserts a double line break. |
<p align="value">content
of the paragraph</p>
|
Aligns a paragraph to
the left, right or center. |
<br />
|
Inserts a single line
break. |
<blockquote>text
to be indented</blockquote>
|
Indents text from both sides. |
<dl>list
of definitions</dl>
|
Defines the beginning
and end of a definition list. |
<dt>term
to be defined</dt>
|
Displays each definition
term. |
<dd>definition
of the term</dd>
|
Displays each definition. |
<ol>ordered
(numbered) list</ol>
|
Defines the beginning
and end of a numbered list. |
<li>individual
item in a list</li>
|
Displays a list item
and its number. |
<ul>unordered
(bulleted) list</ul>
|
Defines the beginning
and end of a bulleted list. |
<div align="value">content
to be formatted<div>
|
A generic tag used to
format large blocks of HTML. Also used for stylesheets. |
Tags for graphic elements
<img src="path
to the image" or "url
of the image"></img>
|
Inserts an image. |
<img src="path
to the image" or "url
of the image" align="value"></img>
|
Aligns an image: left,
right, center; bottom, top, middle. |
<img src="path to the image" or "url of the image" border="#"></img>
|
Specifies thickness
of the border around an image. |
<hr></hr>
|
Inserts a horizontal
rule. |
<hr size="#"></hr>
|
Specifies the thickness
(height) of a rule. |
<hr width="#" (or "%")></hr>
|
Specifies the width
of a rule, as a percentage of the page width or an absolute value (pixels). |
<hr noshade></hr>
|
Creates a rule without
a shadow. |
Table tag
<table>entire
table contents</table>
<table attribute(s)="value">table
row contents</table>
|
Defines a table. |
| <caption>text
of the caption</caption> |
Displays the caption for a table. The caption
tag must be inside the table tag. |
<table border="#">entire
table contents</table>
|
Specifies the width
of the border around a table. |
| <table align="value">entire
table contents</table> |
Specifies the horizontal alignment of the
table on the page. Options are left, center and right. |
<table cellspacing="#">entire
table contents</table>
|
Specifies the amount
of space between table cells. |
<table cellpadding="#">entire
table contents</table>
|
Specifies the amount
of space between a cell's border and its contents. |
<table width="#" or "%">entire
table contents</table>
|
Specifies the width
of a table — as a value in pixels or as a percentage of document
width. |
| <table bgcolor="value">entire
table contents</table> |
Specifies the background color of a table. Value must be a color's hex
number or one of the approved color words. This attribute can also be used
to specify the background color of a table row or of an individual cell. |
Table row tag
<tr></tr>
<tr attribute(s)="value">table
row contents</tr>
|
Displays a row in a
table. Table row tags and their content must be inside the <table></table> tag. |
<tr align="value">table
row contents</tr>
|
Specifies the horizontal
alignment for cell(s) (left, center or right). |
<tr valign="value">table
row contents</tr>
|
Specifies the vertical
alignment for cell(s) (top, middle or bottom). |
Table Data Cell Tag
<td>content
of a data cell</td>
|
Displays the contents
of a cell in a row. <td> (data cell) tags and their content must
be placed inside a <tr></tr> tag. |
| <th>content
of a table column heading</th> |
When placed inside the
first row of a table tag, <th></th> tags display column headings
in bold, centered text. |
| <td width="value">content
of a data cell</td |
Specifies the width of a cell. |
<td align="value">content
of a data cell</td>
|
Specifies the horizontal
alignment for the content of an individual cell (left, center or right). |
<td valign="value">content
of a data cell</td>
|
Specifies the vertical
alignment for the content of an individual cell (top, center, middle,
baseline or bottom). |
<td colspan="#">content
of a data cell</td>
|
Specifies the number
of columns a cell should span. |
<td rowspan="#">content
of a data cell</td>
|
Specifies the number
of rows a cell should span (default=1). |
<td nowrap>content
of a data cell</td>
|
Prevents the lines within
a cell from being broken to fit. |
Frame Tag
<frame src="url
of the document to be displayed in the frame">content
of the frame</frame>
|
Specifies the HTML document
to be displayed within the frame. |
<frame name="name
of the frame">content of the frame</frame>
|
Names the frame, or
region, so that it may be targeted by other frames. |
<frame marginwidth="#">content
of the frame</frame>
|
Specifies the left and
right margin widths for the frame; must be equal to or greater than 1. |
<frame marginheight="#">content
of the frame</frame>
|
Specifies the top and
bottom margin widths for the frame; must be equal to or greater than
1. |
<frame scrolling="value">content
of the frame</frame>
|
Determines whether the
frame has a scrollbar; values are "yes," "no" and "auto." The default,
as in ordinary documents, is auto. |
<frame noresize>content
of the frame</frame>
|
Prevents resizing a
frame. |
Form Tags
NOTE: HTML creates only the appearance of a form. For the form to work
properly, a script is needed on the server. The script processes the transaction
after the "Submit" button is pressed.
<form>content
of the entire form</form>
|
Displays a form. |
<select multiple
name="name" size="#"></select>
|
Displays a scrolling
menu. Size sets the number of menu items visible before you need to scroll. |
<select name="name"></select>
|
Displays a pulldown
menu. |
<option>description
of a menu item</option>
|
Labels a menu item. |
<textarea name="name" cols="#" rows="#">text
or instruction to be displayed inside the box (usually left blank)</textarea>
|
Displays a text box
area. "Cols" value sets the width; "rows" value sets
the height. |
<input type="checkbox" name="name">text
to be displayed next to the box</input>
|
Displays a checkbox
and its associated text (label). |
<input type="radio" name="name" value="x">text
to be displayed next to the button</input>
|
Displays a radio button
and its associated text (label). Value indicates the symbol or text that
will be sent to the server if this option is selected. |
<input type="text" name="name" size="#">text
to be displayed next to the area</input>
|
Displays a one-line
text area. Size indicates the number of characters that the user can
type in the box. |
<input type="submit" value="name">text
to be displayed next to the button (often left blank)</input>
|
Displays a "Submit" button |
<input type="image" border="#" name="name" src="path
to or url of the image">text to be displayed next
to the image (often left blank)</input>
|
Displays a "Submit" button
using an image. |
<input type="reset">text
to be displayed next to the button (often left blank)</input>
|
Displays a "Reset" button. |
Deprecated Tags (outdated, to be discontinued)
NOTE: The following tags are currently supported by HTML 4.01 and XHTML 1.0, but their use is discouraged.
| <applet> - Embedded Java or other language
applet |
object |
| <basefont> - Default font properties |
cascading style sheets (CSS) |
| <center> - Centered block of text |
CSS |
| <dir> - Directory list |
ul tag and CSS |
| <font> - Inline text font properties |
CSS |
| <isindex> - Queryable document (text
query interface) |
input element inside a form |
| <menu> - Menu list |
ul tag and CSS |
| <s> - Strike-through text style |
CSS |
| <span> - inline generic language/style
container |
CSS |
| <strike> - Struck-out text style |
CSS |
| <u> - Underline text style |
CSS |
What is XHTML (EXtensible HyperText Markup Language)?
- a combination of the elements of HTML 4.01 and the syntax of XML (eXtensible
Markup Language) that will eventually replace HTML
- a stricter and cleaner version of HTML 4.01
- XML that browsers interpret as HTML
- HTML that is defined as an XML application
Document Type
- In additional to the usual
<html>, <head>, <title>, and <body> elements, each XHTML document must
have a DOCTYPE declaration (see the Sample
Page Structure below).
- The DOCTYPE declaration is needed for:
- correct interpretation of your page's CSS
- validation of your page
- rendering of your page by a browser
- DOCTYPE modes
- Standards mode
- Quirks mode
- Missing or invalid DOCTYPE
- Not standards compliant
- Browser parses page in "backward-compatible" fashion
(as if pages were coded for IE 4)
Valid XHTML Document Types
There are three variants of XHTML 1.0, each
with its own uses and Document Type Definition (DTD), which specifies mandatory
elements and sets out the
rules
and
regulations for using HTML.
- XHTML 1.0 Strict
Use this when you want really clean structural markup, free of any markup
associated with layout. Combine it with W3C's Cascading Style Sheet
language (CSS) to get the font, color and layout effects you want.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Transitional
Use this to take advantage of XHTML features, including style sheets.
You can also make small adjustments to your markup to
accommodate older browsers that can't understand style sheets. These
include using
the
<body>
element with bgcolor, text and link
attributes.
<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset
Use this when you want to use Frames to partition the browser window
into two or more frames. Note, however, that the use of frames is
discouraged.
<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Basic XHTML Rules
- Specify the DOCTYPE.
- Include the XHTML namespace declaration as shown in the sample structure
below.
- Namespace is a link to a list of valid tags that can be used in
XHTML; e.g., http://www.w3.org/1999/xhtml.
- Follows the DOCTYPE
- Multiple namespaces are possible.
- Make sure the document is well-formed, i.e.:
- Close all tags, even empty ones; e.g., <img />, <br />
- Properly nest XHTML elements.
- Use lower case for:
- all tags.
- attribute names.
- Use quote marks on attribute values; e.g., <img width="20" height="30">
- Don't abbreviate attributes.
- Use the id attribute instead of the name attribute.
Sample Page Structure
<!DOCTYPE Document type goes here.>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here.</title>
</head>
<body>
Body content goes here.
</body>
</html>
Additional Information
Last modified
December 7, 2004
by cawalker
|
Page Top
| OIT
| PolicyDisclaimer
