XHTML 1.1 Tutorial - Tags and their Attributes

What is XHTML? Internet Programming 3, Course Description

This XHTML 1.1 - tutorial can be used for tag and attribute reference if you intend to create Web pages with strict markup.

XHTML 1.1 is a reformulation of XHTML 1.0 Strict using XHTML Modules. By this follows that many tags available in other XHTML types, e.g. XHTML Frames, are not available.

This version of XHTML is for developing documents that are very strict with elements and attributes from the XHTML namespace.

XHTML 1.1 Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Example of an XHTML 1.1 Document

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>WebPelican Web Tutorials</title> </head> <body> <p>This is a WebPelican tutorial and bla bla...</p> </body> </html>

Note that the XML declaration is included. An XML declaration is not required in all XML documents. However, W3C strongly encouraged XHTML authors to use XML declarations in all their documents. This declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16.

STRUCTURE
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<html> xmlns
dir
lang
xml:lang 		The surrounding root tag to tell your browser that this is the start/end of a (X)HTML document.

<html>
<head>
<title>
Document title
</title>
Meta information
</head>
<body>
Document content
</body>
</html>

<head> xml:lang
profile 		For meta information. The only element inserted here that will be displayed is the title element. All others will not show.
<title> xml:lang To display a title at the very top of the browser window.
<body> class
style
title
onmousedown
onmouseover
onkeypress
onkeyup
onmouseup
 Document content goes here, but not directly. The actual content must be within other tags like the <p> tag.
TEXT
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<span> style
class
id
title
xml : lang
 A section in a document without new line before and after. This tag is often used with an id and/or class attribute to conntect to an external CSS file to change its appearance since it by itself doesn't do anything. code: This <span>
is a span section text </span>.
output:
 This is a span section text.
<div> style
class
id
title
xml : lang
 A section in a document with a new line before and after. This tag is often used with an id and/or class attribute to conntect to an external CSS file to change its appearance and/or placement in an XHTML document. In the example I use text directly in the div to avoid clutter. However, this is not how it should be done. It's better to use paragraphs(the <p> tag) 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 before and after. code:
<p>
This is a paragraph.
<p>
<p>
This is a another paragraph.
<p>
output:

This is a paragraph.

This is another paragraph.

<h6>
<h5>
<h4>
<h3>
<h2>
<h1>
 class
id
style
title
xml:lang 		Used to set the size of a header where h1 is the biggest and h6 the smallest.
code:
<h6>
Header with size 6.
</h6>
<h1>
Header with size 1.
</h1>

output:
Header with size 6

Header with size 1

<br /> title
class
style
id 		Used to insert a line break. Remember to insert an extra white-space between the r-character and the forward-slash. This is important for the document to render correct in all kinds of parsing devices(browsers, PDA's, etc...). code:
This line bre.<br />akes.
This line does not break.
output:
This line bre
akes. This line does not break.
<blockquote> id
class
style
title
xml:lang
cite 		This tag is used for long quotations. The blockquote will usually be indented.
code:
<blockquote>
This is a blockquote. It will probably be indented.</
blockquote>
output:
This is a blockquote.It will probably be indented.
<code> style
id
title
class
xml:lang 		Can be used for presenting programming code(source code).
code:
<code>String xhtml = Extensible Markup Language</code>
output:
String xhtml = Extensible Markup Language
<strong> title
class
style
xml:lang
id 		This tag is used to display strong emphasized text.
code:
<strong>
This text is strong emphasized.
</strong>
output:
This text is strong emphasized.
<em> title
class
style
id
xml:lan 		To make a text emphasized.
code:
<em>
This text is emphasized.
</em>
output:
This text is emphased.
LISTS
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<ol> style
class
id
xml:lang
title 		Tag used for implementing 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 element
  </li>
  <li>
  Second unordered list element
  </li>
  <li>
  Third unordered list element
  </li>
</ul>
output:
  • First unordered list element
  • Second unordered list element
  • Third unordered list element
<li> id
class
style
title
xml:lang 		Defines an item in a list.
<ul> id
class
style
title
xml:lang 		Used for implementing an unordered list.
<dl> id
class
style
title
xml:lang 		Defines 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 within a definition list.
<dd> class
id
style
title
xml:lang 		Defines a definition within a definition list.
HYPERLINKS
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<a> class
style
title
xml:lang
accesskey
charset
type
href
id
hreflang
onblur
rev
rel
shape
coords
tabindex
onfocus 		Defines an anchor which can be used to link to another XHTML document by using the href attribute or to create a bookmark inside an XHTML document by using the id attribute.

There are two kind of link types:

Absolut link code:

<a href="http://www.webpelican.com/internet-programming-3/xhtml/">This is an absolute link</a>

Relative link code(relative to the root of this site):

<href="/internet-programming-3/xhtml/">This is a relative link</a>

output:

This is an absolut link


This is a relative link

There is no visible difference between an absolute and a relative link. If, however, one would want a new domain name for a website, each and every absolute link with the old domain would have to be changed.


Using an image as a link:

code:
<a href="http://www.w3.org/TR/xhtml11/"><img src="/web-tutorials/images/xhtml-1-1.jpg" alt="Valid XHTML 1.1" width="89" height="73" /></a>

output:

Valid XHTML 1.1

Linking to an ftp server.

code:
<a href=
"ftp://ftp.funet.fi/">
Link to an ftp server</a>.

output:


Link to an ftp server

Use the id attribute to make a bookmark at specific section of an XHTML document. This is how the bookmark in the LIST section of this document look like:

<a id="list">LIST</a>.

and this is how I link to it:

<a href="#list">
A link to the bookmark</a>

and this is the link.

A link to the list section

If you link to an email address, your local mail application will start.

code:
<a> href="mailto: soprum@hotmail.com?subject=Hello %20soprum!How%20are%20you?"> Mail link</a>

output:

Mail link

OBJECT
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<object> class
id
usemap
style
name
height
width
title
xml:lang
classid
codebase
data
type
codetype
standby
tabindex
archive 		Used to embed multimedia objects in your XHTML document. With this element you can specify the data and the parameters for objects inserted into XHTML documents, and the code that can be used to display that data. code:
<object> data="
/web-tutorials/images/css-2.bmp"
width="88" height="31"></object>

output:
This is an alternate text in case the object doesn't show.
<param /> value
valuetype
type
id
name 		Used for sending 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 		Defines a table in which you can put put table headers, table rows, table cells, and other tables.

<table>
 <caption>
  Primary table header.
 </caption>
 <thead>
  <tr>
  <th>
  Secondary header, first column.
  </th>
  <th>
  Secondary header, second column.
  </th>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td>
  Footer.
  </td>
  </tr>
 </tfoot>
<tbody>
  <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>
</tbody>
</table>

Primary table header.
Secondary header, first column. Secondary header, second column.
Footer.
Table cell 1 in first row
with the colspan-attribute set to 2.
Table cell 1 in second row. Table cell 2 in second row with the rowspan-attribute set to 2.
Table cell 1 in third row
<thead> class
id
title
style
char
charoff
xml:lang
align
valign 		Defines the table header. Enables you to group rows in a table.
<tfoot> class
id
style
title
xml:lang
char
charoff
align
valign 		Defines the table footer. Enables you to group rows in a table.
<tbody> class
id
title
style
xml:lang
char
charoff
align
valign
 Defines the table body. Enables you to group rows in a table.
<tr> class
id
title
style
xml:lang
char
charoff
align
valign 		Used to create a new table row.
<th> class
id
style
title
xml:lang
axis
abbr
headers
rowspan
colspan
scope
char
charoff
align
valign 		Used for headers inside the table.
<td> id
style
title
xml:lang
axis
abbr
headers
rowspan
colspan
scope
char
charoff
align
valign
 Defines a table cell.
<caption> class
id
style
title
xml:lang 		Defines a table caption. The tag
must be inserted immediately after
the table tag. You can specify
only one caption per table.
FORM
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<form> class
id
style
title
xml:lang
action
enctype
method
onsubmit
onreset
accept
accept-charset 		Creates a form for user input. A form can contain textfields, checkboxes, radio-buttons and more. Usually used for sending data to a server.

code:
<div>Send a form to
soprum@hotmail.com
</div>

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

output:
Send a form to soprum@hotmail.com
Given name:
Surname:
Message:
<label /> id
class
style
title
xml:lang
for
accesskey
onfocus
onblur
 Defines a label. If you click the text within the label element, it's 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 		Defines an input field.
<select> class
id
style
title
name
xml:lang
disabled
size
multiple
tabindex
onfocus
onblur
onchang
 Creates a selective drop-down list.
<textarea> class
id
style
xml:lang
title
name
rows
disabled
cols
readonly
tabindex
accesskey
onfocus
onblur
onselect
onchange 		Creates a textarea for user input.
<option> class
id
title
style
xml:lang
selected
disabled
label
value 		Defines 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 		Used to insert an image in a XHTML document.
code:
<img src="/web-tutorials/images/xhtml-1-1.jpg" alt="Valid XHTML 1.1" />
output:
Valid XHTML 1.1
SCRIPT
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<script> type
src
defer
charset
xml:space 		Used to insert script in the document. <script type="text/javascript"
src="myScript.js">
</script>
<noscript> id
class
style
title
xml:lang 		Used to define an alternate text if a script is not executed. <noscript>
This document contains a script
your browser can't handle. </noscript>
LINK
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<link> class
id
title
style
href
hreflang
xml:lang
charset
type
rel
rev
media 		Used in the head element to link to a different resource such as an external Cascading Style Sheet. <link href="main-style.css" rel="stylesheet" type="text/css"/>
META INFORMATION
TAG ATTRIBUTE DESCRIPTION EXAMPLE
<meta /> xml:lang
http-equiv
name
content
scheme 		Put this tag inside the head element to insert meta information about your document. For example descriptions and keywords for search engines etc. code:
Keywords:
<meta name="keywords" content="HTML, XHTML 1.1, tutorial" />

Description of your document:
<meta name="description" content="XHTML 1.1 TUTORIAL" />

Last revision of your document:
<meta name="revised" content="Martin Carlsson, 25/03/2004" />

Refresh page every 10th seconds:
<meta http-equiv="refresh" content="10" />

Defines the author:
<meta name="author" content="Martin Carlsson" />