XHTML Basic 1.0 Tutorial - Tag Reference

This XHTML Basic - tutorial can be used for tag and attribute reference if you intend to make a website accessible for clients with low-power devices such as cell phones and PDAs. The goal of XHTML Basic is to serve as a common language supported by various kinds of user agents.

It is very similar to standard XHTML. The only difference is that it doesn't consist of all of it's tags.

XHTML Basic 1.0 Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

STRUCTURE
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<html>
  • xmlns
  • dir
  • lang
  • xml:lang
To tell the parsing device(browser, search engine robot, PDA, etc...) that this is the start of a html document.
<html> <head> <title> Title of document </title> Meta information </head> <body> Document content </body> </html>
<head>
  • xml:lang
  • profile
For meta information. Goes in the head section of a document. Meta-data specified here won't be displayed in the browser window.
<title>
  • xml:lang
To display the title of the document. The title is very important. It should accurately describe the content of the document. If the document title is relevent for the document's copywrite(the actual content of you page) there will be alot easier to get good rankings in search engines.
<body>
  • class
  • style
  • title
  • onmousedown
  • onmouseover
  • onkeypress
  • onkeyup
  • onmouseup
Content of the document.
TEXT
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<span>
  • style
  • class
  • id
  • title
  • xml:lang
A section within a document without automatic new line before and after. Often used with an id or class attribute in combination CSS, since it by itself doesn't do anything.

code: This <span> is a text in a span section </span>.

output:

This is a text in a span section.

<div>
  • style
  • class
  • id
  • title
  • xml:lang

A section in a document with a new line included before and after.

Often used with an id and/or class attribute in combination CSS.

Not recommended to put text directly in the div element - like in the example to the right - since the purpose of the <div> is to divide a document into sections. Best practice is to use the paragraph for text.

code:
This is a <div>text within <div> tags</div>
output:

This is a
text within <div> tags

<p>
  • title
  • style
  • class
  • id
  • xml:lang
A paragraph with an extra blank line included before and after the paragraph. code:
<p> This is text within a paragraph. </p> <p> More paragraph text. </p>
output: This is text within a paragraph. More paragraph text.
  • <h6>
  • <h5>
  • <h4>
  • <h3>
  • <h2>
  • <h1>
  • class
  • id
  • style
  • title
  • xml:lang
Sets the size of a header. From h1(biggest) to h6(smallest). Use h1 for top-level headings and change it's size with CSS if the default size is too big. It is said this could be important for search engine optimization. code:
<h3> Header with size 3. </h3> <h3> Header with size 4. </h4>
output:

Header with size 3

Header with size 4

<br />
  • title
  • class
  • style
  • id
To insert a line break. Important to have a white-space between the "br" and the forward slash. code:

This demonstrates a line break.This demonst<br/> rates line break

output:

This demonstrates a line break. This demonst
rates a line break

<blockquote>
  • id
  • class
  • style
  • title
  • xml:lang
  • cite
For long quotations. Usually indented. The indention can of cource be changed with CSS code:

<blockquote>Here goes a blockquote quation.</blockquote>

output:

Here goes a blockquote quation.

<code>
  • style
  • id
  • title
  • class
  • xml:lang
For presenting source code(programming code). code:

<code>var webpelican = website</code>

output:

var webpelican = website

<strong>
  • title
  • class
  • style
  • xml:lang
  • id
Gives a strong emphasized text. code:

<strong>This is a strong text.</strong>

output:

This is a strong text.

<em>
  • title
  • class
  • style
  • id
  • xml:lan
Makes a text emphased. code:

<em>Emphased text.</em>

output:

Emphased text.

LISTS
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<ol>
  • style
  • class
  • id
  • xml:lang
  • title
Implements an ordered list. code:
<ol> <li> First ordered list element </li> <li> Second ordered list element </li> <li> Third ordered list element </li> </ol>
output:
  1. First ordered list element
  2. Second ordered list element
  3. Third ordered list element
code:
<ul> <li> First unordered list item </li> <li> Second unordered list item </li> <li> Third unordered list item </li> </ul>
output:
  • First unordered list item
  • Second unordered list item
  • Third unordered list item
<li>
  • id
  • class
  • style
  • title
  • xml:lang
A list item.
<ul>
  • id
  • class
  • style
  • title
  • xml:lang
Implements an unordered list.
<dl>
  • id
  • class
  • style
  • title
  • xml:lang
A definition list. code:
<dl> <dt> First term </dt> <dd> First term definition </dd> <dt> Second term </dt> <dd> Second term definition </dd> </dl>
output:
First term
First term definition
Second term
Second term definition
<dt>
  • class
  • id
  • style
  • title
  • xml:lang
Defines a term inside a definition list.
<dd>
  • class
  • id
  • style
  • title
  • xml:lang
A definition within a definition list.
HYPERLINK
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<a>
  • class
  • style
  • title
  • xml:lang
  • accesskey
  • charset
  • type
  • href
  • id
  • hreflang
  • onblur
  • rev
  • rel
  • shape
  • coords
  • tabindex
  • onfocus
An anchor which can be used to link to another document by using the href attribute or to create a bookmark inside a document.

There are two kind of links, absolute links and relative links.

Absolut link code:

<a href= "http: //www.webpelican.com/internet-programming-3/"> This is an absolut link to the Internet Programming 3 - course.</a>

Relative link code:

<a href="../../internet-programming-1"> This is an reletive link.</a>

output:

This is an absolut link to the Internet Programming 3 - course

This: ../, is taking one step up and out of current folder.

This: ../../internet-programming-1/, is taking two step up and out of current folder and in to a folder named internet-programming-1.

An image as a link:

code:

<a href= "http://www.webpelican.com/"><img src= "/web-tutorials/images/xhtml-1-0-basic.jpg" alt="Valid XHTML 1.0 Basic picture" width="88" height="31" /></a>

output:

Valid xhtml 1.0 Basic picture

Link to a ftp server

code:

<a href=
"ftp://ftp.funet.fi/">Link to a ftp site</a>.

output:

Link to ftp.funet.fi

Use the id attribute to make a bookmark at specific sections of a HTML documents. This is how the bookmark in the top of this section looks like

<caption id="hyperlinks">HYPERLINKS</caption>.

and this is how it is linked

<a href= "#hyperlinks ">A link to the bookmark id at the HYPERLINKS section</a>

and this is the link.

A link to the bookmark id at the HYPERLINKS section

If you create a link to an email address your local email application will start:

code:

<a> href= "mailto:soprum@hotmail.com ?subject=Hello%20soprum!How%20are%20you?"> Send me an email</a>

output:

Send me an email

OBJECT
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<object>
  • class
  • id
  • usemap
  • style
  • name
  • height
  • width
  • title
  • xml:lang
  • classid
  • codebase
  • data
  • type
  • codetype
  • standby
  • tabindex
  • archive
Should be used to embed multimedia objects in XHTML documents. With this element you can specify parameters and data for objects inserted into HTML documents, and the code that can be used to display that data. code:

<object data=" /web-tutorials/images/xhtml-1.0-basic.jpg" width="89" height="73" ></object>

output:

Note: The width and height can be specified with a CSS. In the example above I have specified them directly in the element to be a little smaller than the inserted object's width and height just to show how an automatic scrollbar appears when the object element is overflowed.

<param/>
  • value
  • valuetype
  • type
  • id
  • name
To send parameters to an object inserted into an XHTML document.
TABLE
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<table>
  • class
  • id
  • title
  • style
  • border
  • xml:lang
  • summary
  • width
  • dellpadding
  • frame
  • rules
  • cellspacing

A table in which you can put table headers, table rows, table cells, other tables, etc...

Wrongly used for layout by many. It's real purpose is for marking up tabular data.

For layout one should use the <div> tag instead. Preferly in combination with a CSS.

code:
<table summary="The summary should describe what the table is about. It will not be rendered by visual browsers, but are very useful for screen readers."> <caption> Primary table header. </caption> <tr> <th> Secondary header, first column. </th> <th> Secondary header, second column. </th> </tr> <tr> <td> </td> </tr> <tr> <td colspan="2"> Table cell 1 in first row with the colspan-attribute set to 2. </td> </tr> <tr> <td> Table cell 1 in second row. </td> <td rowspan="2"> Table cell 2 in second row with <br/> the rowspan-attribute set to 2. </td> </tr> <td> Table cell 1 in third row </td> </table>
output:
Primary table header
Secondary header, first column. Secondary header, second column.
Table cell 1 in first row with the colspan-attribute set to 2.
Table cell 2 in second row. Table cell 3 in second row with the rowspan-attribute set to 2.
Table cell 4 in third row
<caption> class id style title xml:lang A table caption. Must be inserted immediately after the table tag. Only one caption per table can be specified.
<tr> class
id
title
style
xml:lang
char
charoff
align
valign
To create a table row.
<th> class
id
style
title
xml:lang
axis
abbr
headers
rowspan
colspan
scope
char
charoff
align
valign
For headers inside the table.
<td> id
style
title
xml:lang
axis
abbr
headers
rowspan
colspan
scope
char
charoff
align
valign
A table cell.
FORM
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<form> class
id
style
title
xml:lang
action
enctype
method
onsubmit
onreset
accept
accept-charset

A form for user input. A form can contain text fields, input fields checkboxes, radio-buttons and more.

Forms are usually used to send data to an URL where there is a server-side application that processes the parameters specified in the form.

code:
<form action= "MAILTO: 08.6047494@telia.com" method="post" enctype="text/plain"> Given name:<br/> <input type="text" name="gname" value="" size="20"/> <br /> Surname:<br/> <input type="text" name="sname" value="" size="20"/> <br /> Message:<br /> <input type="text" name="message" value="" size="40"/> <input type="submit" value="Send"/> <nput type="reset" value="Reset"/> </p> </form>

output:

Given name:
Surname:
Message:
<label />
  • id
  • class
  • style
  • title
  • xml:lang
  • for
  • accesskey
  • onfocus
  • onblur
A label. If you click the text within the label element, it is supposed to toggle the control.

<input />

  • class
  • id
  • title
  • style
  • type
  • xml:lang
  • name
  • value
  • checked
  • disabled
  • readonly
  • size
  • maxlenght
  • src
  • alt
  • usemap
  • tabindex
  • accesskey
  • accept
  • onfocus
  • onblur
  • onselect
  • onchange
An input field.
<select>
  • class
  • id
  • style
  • title
  • name
  • xml:lang
  • disabled
  • size
  • multiple
  • tabindex
  • onfocus
  • onblur
  • onchang
A selective drop-down list.
<textarea>
  • class
  • id
  • style
  • xml:lang
  • title
  • name
  • rows
  • disabled
  • cols
  • readonly
  • tabindex
  • accesskey
  • onfocus
  • onblur
  • onselect
  • onchange
A textarea for user input.
<option>
  • class
  • id
  • title
  • style
  • xml:lang
  • selected
  • disabled
  • label
  • value
An option in the drop-down list.
IMAGE
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<img>
  • class
  • id
  • title
  • style
  • src
  • alt
  • height
  • width
  • xml:lang
  • longdesc
  • usemap
  • ismap
To insert an image in the document. code:

<img src="/web-tutorials/images/xhtml-1-0-basic.jpg" alt="Valid xhtml 1.0 Basic picture" />

output:

Valid XHTML 1.0 Basic picture

TAG ATTRIBUTE DESCRIPTION EXAMPLE
<link>
  • class
  • id
  • title
  • style
  • href
  • hreflang
  • xml:lang
  • charset
  • type
  • rel
  • rev
  • media
Goes in the head element to link to a different document. External style sheets is the most common document to link to.

<link href="format.css" rel="stylesheet" type="text/css"/>

META
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<meta />
  • xml:lang
  • http-equiv
  • name
  • content
  • scheme

Goes inside the head element to insert meta-information about your document, such as the name of the author, descriptions of the content and keywords that should be found in the content.

Meta tags are used to make life easier for parsing devices such as browsers and search engine robots.

Metadata is always passed as name/value pairs.

No data defined with meta tags will show when the document is viewed.

Keywords for search engines:

Most search enginees don't care about the keyword value in the name attribute anymore since it has been used for spamming. This is what it looks like if you decide to use it:

<meta name="keywords" content="HTML, XHTML 1.0 Basic", "tutorial" />

Description of your document. A meta tag using a name attribute with a description value should be included since it sometimes will show below the link text in a SERP:

<meta name="description" content="XHTML 1.0 Basic tutorial to be used as a reference when building Web Pages for low-powered devices" />

The author value of the name attribute in a meta tag is concidered to be good practice. Author of a document:

<meta name="author" content="Forename Surename, 07/01/2006" />

A meta tag using the http-equiv attribute with the content-type as value are often included to connect the content attribute to an HTTP header.

It has a some other values too. For example the refresh value . Refreshes a document every 10 seconds: (kind of a static client pull):

<meta http-equiv="refresh" content="10" />