TechnologyUK - Web Page Design Logo

XHTML Quick Reference

The tags described below are all defined within the strict XHTML 1.0 document type definition, and are supported in the current versions of all major browsers. Note that there are many more XHTML tags available to you, but the subset described on this page includes those most frequently used, and should suffice for most purposes (for a more comprehensive XHTML reference, visit http://xhtml.com/en/xhtml/reference/).

XHTML 1.0 Tags
TagDescription and usage
<!-- . . . -->Comment - used to enclose a comment within the source code (note that this is not
strictly speaking an XHTML tag, and does not therefore require a closing solidus).

Example:

<!-- this is a comment! -->

<!DOCTYPE . . . >Document type - the document type declaration is the first thing to appear in an
XHTML document (note that this is not strictly speaking an XHTML tag, and does
not therefore require a closing solidus).

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<a> . . . </a>Anchor - used to create a link to another document, a bookmark within a document,
or a link to a bookmark within a document.

Example:

<a href="http://www.technologyuk.net">Visit TechnologyUK</a>

<area> . . . </area>Area - defines an area within an image map.

Example:

<img src ="family.gif" width="160" height="120" alt="Family"
    usemap="#familymap"/>
<map name="familymap">
    <area shape="rect" coords="0,0,40,120"    
        href="mum.html" alt="Mum" />
    <area shape="rect" coords="41,0,80,120"    
        href="dad.html" alt="Dad" />
    <area shape="rect" coords="81,0,120,120"    
        href="sis.html" alt="Sis" />
    <area shape="rect" coords="121,0,160,120"    
        href="bro.html" alt="Bro" />
</map>

<b> . . . </b>Bold - the enclosed text appears in bold type.

Example:

Here is some <b>bold</b> text.

<body> . . . </body>Body - encloses the contents of a HTML document (i.e. those elements that will be
visible within the browser window).

Example:

<html>
<head>
    <title>My Document</title>
</head>

<body>
. . . page content goes here . . .
</body>

</html>

<br />Break - inserts a single line break. This is an empty tag, and in XHTML must
include a solidus immediately before the closing angle bracket.

Example:

Here is some text that<br />contains a line break.

<button> . . . </button>Button - defines a push button that can display either text or an image.

Example:

<button type="submit">Click me!</button>

<div> . . . </div>Division - defines a discrete section within an XHTML document. This tag can be
used together with cascading style sheets to create a document layout.

Example:

<div>
    <h2>A level 2 header goes here</h2>
    <p>Some generic text content goes here.</p>
</div>

<em> . . . </em>Emphasis - the enclosed text is emphasised.

Example:

This text needs to be <em>emphasised</em>.

<form> . . . </form>Form - creates a form that can contain text boxes and other controls that allow a
user to enter text or make choices.

Example:

<form action="my_script.php" method="post">
    Surname: <input type="text" name="surname" /><br />
    Forename: <input type="text" name="forename" /><br />
    <input type="submit" value="Submit" />
</form>

<h1> . . . </h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6> . . . </h6>		Document heading - this tag creates a document heading. There are six heading
levels, with level one being the largest and level six being the smallest.

Example:

<h1>This is a level one heading</h1>

<head> . . . </head>Head - encloses the document header information for a HTML document.
Usually contains the <title> . . . </title> tag, meta information, and links to external
files such as cascading style sheet files and script files.

Example:

<head>
    <title>My First XHTML Page</title>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8" />
</head>

<hr />Hard return - inserts a single line break and draws a line across the screen. This is
an empty tag, and in XHTML must include a solidus immediately before the closing
angle bracket.

Example:

This text is above the line . . .
<hr />
. . . and this text is below the line.

<html> . . . </html>HTML - encloses the document header and body elements, and tells the browser
that this is an HTML document.

Example:

<html>
<head>
    <title>My Document</title>
</head>

<body>
. . . page content goes here . . .
</body>

</html>

<i> . . . </i>Italic - the enclosed text appears italicised.

Example:

Here is some <b>italic</b> text.

<img />Image - used to display a graphic image within a web page. This is an empty tag,
and in XHTML must include a solidus immediately before the closing angle bracket.

Example:

<img src="circle.gif" alt="A picture of a circle." />

<input />Input - defines an input control on a form. An input field can be a text box, checkbox,
radio button or push button, depending on its type attribute. This is an empty tag, and
in XHTML must include a solidus immediately before the closing angle bracket.

(see <form>)
<label> . . . </label>Label - defines a label for an input element on a form.

Example:

<form>
    <label for="male">Male</label>
    <input type="radio" name="gender" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="gender" id="female" />
</form>

<li> . . . </li>List item - defines one item in a list of items.

Example:

<ul>
    <li>Avon</li>
    <li>Cornwall</li>
    <li>Devon</li>
    <li>Dorset</li>
    <li>Somerset</li>
</ul>

<link />Link - defines a link to an external file, such as a style sheet. This is an empty tag,
and in XHTML must include a solidus immediately before the closing angle bracket.

Example:

<head>
    <title>
        TechnologyUK
    </title>
    <meta http-equiv="content-type" content="text/html;
        charset=utf-8"/>
    <link rel="stylesheet"
        type="text/css" href="../../css/sitestyle.css" />
</head>

<map> . . . </map>Image map - defines a client side image map. An image map is an embedded
image that has clickable areas that provide links to bookmarks or other pages.

(see <area>)
<meta />Metatag - encloses information about the contents of an HTML document. This is
an empty tag, and in XHTML must include a solidus immediately before the
closing angle bracket.

Example:

<head>
    <title>
        TechnologyUK
    </title>

    <meta name="description" content="A collection of web
        pages for technology students."/>
    <meta name="keywords" content="Technology, Computing,
        Programming, Visual Basic, C, C++, Systems Analysis
        and Design, Networks, Data Communications, World
        Wide Web, Internet"/>
    <meta http-equiv="content-type" content="text/html;
        charset=utf-8"/>
    <link rel="stylesheet" type="text/css"
        href="css/sitestyle.css"/>
</head>

<noscript> . . . </noscript>No script - contains alternative content for client browsers that do not support
client-side scripts.

Example:

<script type="text/javascript">
    /* <![CDATA[ */
    var myDate = new Date;
    var thisyear = myDate.getFullYear();
    document.write('<p class="right"> Copyright © 2001 - '
        + thisyear + ' TechnologyUK </p>');
    /* ]]> */
</script>
<noscript>
    <p class="right"> Copyright © 2001 - present
        TechnologyUK </p>
</noscript>

<object> . . . </object>Object - used to define an embedded object of some type (e.g. Flash movie,
Java applet etc.).

Example:

<object classid="clsid:1B487523-BEC2-11CF-BF9E-0020AF998FF5"
    height="100%" width="100%" id=world>
    <param name="World" value="robot.svr" />
</object>

<ol> . . . </ol>Ordered list - encloses a numbered list of items, each defined using the
<li> . . . </li> tagset.

Example:

<ol>
    <li>Avon</li>
    <li>Cornwall</li>
    <li>Devon</li>
    <li>Dorset</li>
    <li>Somerset</li>
</ol>

<option> . . . </option>Option - defines the options available from a drop down selection box in a form.

Example:

<form>
    <select>
        <option>Avon</option>
        <option>Cornwall</option>
        <option>Devon</option>
        <option>Somerset</option>
    </select>
</form>

<p> . . . </p>Paragraph - the enclosed text is treated as a separate paragraph. A blank line is
inserted before and after the text.

Example:

<p> This text is treated as a paragraph.</p>

<param />Parameter - used to define a parameter for an object element. This is an empty
tag, and in XHTML must include a solidus immediately before the closing angle
bracket.

(see <object>)
<script> . . . </script>Script - encloses in-line code written in a client-side scripting language such as
JavaScript.

(see <noscript>)
<select> . . . </select>Select - defines a drop-down selection box in a form.

(see <option>)
<span> . . . </span>Span - defines a portion of a document that can be manipulated using scripting or a
style sheet. It has no visible effect on the enclosed text otherwise.

Example:

<p>
    This text is a <span class="red">warning</span>.
</p>

<strong> . . . </strong>Strong - renders the enclosed text in a heavier (emboldened) font.

Example:

The last word in this sentence is <strong>strong</strong>!

<style> . . . </style>Style - used to define style information within an HTML document.

Example:

<head>
    <title>TechnologyUK</title>
    <style type="text/css">
        p.center { text-align: center }
        p.right { text-align: right }
        p.left { text-align: left }
    </style>
</head>

<sub> . . . </sub>Subscript - enclosed text is displayed as subscripted text.

Example:

V<sub>Total</sub> is the sum of V<sub>1</sub>
    and V<sub>2</sub>.

<sup> . . . </sup>Superscript - enclosed text is displayed as superscripted text.

Example:

Signals propagate at (circa) 2x10<sup>8</sup>
    ms<sup>-1</sup>.

<table> . . . </table>Table - defines a table.

Example:

<table>
    <tr>
        <th>LastName</td>
        <th>FirstName</td>
        <th>TelNo</td>
    </tr>
    <tr>
        <td>Bloggs</td>
        <td>Fred</td>
        <td>01752 110077</td>
    </tr>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>01752 774499</td>
    </tr>
    <tr>
        <td>Jones</td>
        <td>David</td>
        <td>01752 123456</td>
    </tr>
</table>

<th> . . . </th>Table header - defines a column heading in a table

(see <table>)
<td> . . . </td>Table data - defines a cell in a table

(see <table>)
<textarea> . . . </textarea>Text area - defines a multi-line text input control on a form. The rows and cols
attributes can be used to control the visible area of the input box.

Example:

<form action="my_script.php" method="post">
    Comment: <textarea name="comment"
        rows="6" cols="20"></textarea>
    <br />
    <input type="submit" value="Submit" />
</form>

<title> . . . </title>Title - defines the title of an HTML document.

Example:

<title>My Document</title>

<tr> . . . </tr>Table row - defines a row in a table

(see <table>)
<ul> . . . </ul>Unordered list - encloses a bulleted list of items, each defined using the
<li> . . . </li> tagset.

Example:

<ul>
    <li>Avon</li>
    <li>Cornwall</li>
    <li>Devon</li>
    <li>Dorset</li>
    <li>Somerset</li>
</ul>



Contact the author: webmaster@technologyuk.net

Valid XHTML 1.0 Strict Valid CSS!

advanced
search engine by freefind