XHTML Basics

XHTMLis an Extensible HyperText Markup Language

XHTML is almost identical to HTML 4.01 but a stricter cleaner version

XHTML is a combination of HTML and XML (EXtensible Markup Language)

W3C Recommendation, January 26, 2000, revised August 1, 2002

Validate your XHTML at W3C

XHTML Rules

Must contain a DTD, Document Type Declaration

XHTML Documents Must Have One Root Element

Documents must be well formed
     Open and close tags correctly
     Nest tags correctly
     All text must be included in a block level tag

All tags must close - even self contained tags

All tags and attributes must be in lower case

All attributes must be within quotes

Cannot use attribute minimisation

For internal links must use an ID attribute instead of the name attribute

Must use alternative text for every image on the page

All ampersand charactors must use their entity value

Click here to go straight to tag code

XHTML Documents Must Have One Root Element

The entire code must be nested within the <html></html> root element

Basic Structure of the Page

The basic Code for a page is written as follows:
<html>
<head>

<title>The information within this tag appears at the top of the browser</title>

</head>

<body>The information that appears in the browser window goes here</body>
</html>

Writing the Code

We are just going to deal with what goes in the" body" of your page click here for information for your head tags.

Must use Lower-Case
All page code elements and attribute references must be in lower case.
<BODY><./BODY> INCORRECT
<body></body>CORRECT

Must use Quotes For all Attributes
<span class=bluetext></span>INCORRECT
<span class="bluetext"></span>CORRECT
Open and Close tags Correctly
Tags open and close inside one another
<div><p></div></body>INCORRECT
<div><p></p></div></body>CORRECT
Nest tags Correctly

Tags open and close inside one another
<body><p><div></p></div></body>INCORRECT
<body><div><p></p></div></body>CORRECT
All Text must placed in a block level tag

Text cannot be placed directly in the body
<body> this is my text</body> INCORRECT
<body><p> this is my text</p></body> CORRECT
All Ampersand Charactors Must Use Their Entity Value

Instead of writing & in the code, you need to write &
Internal links should use an "id" not "name
"
In XHTML the "id" attribute has replaced the "name" attribute
But for the time being it is probably best to use both the "name" and " id" in order for the code to be read correctly by older browsers. If you use an "id" for all elements it is no longer necessary to create an anchor we would just point the user towards a particular id. Example:
<a href="#area">Area</a>
<div id="area" name="area"></div>
Cannot use attribute minimization

For html you were able to just place one word attributes in some tags
For example noshade was written as noshade
In xhtml this is how you are required to write it:
noshade="noshade"
Must use alternative text for every image on the page

The alt attribute must be included in every image. The alt attribute should descript the image and include any text that is on that image. This is also required by section 508
<img src="tree.png" alt="trees in a field" />
ID

An id should be assigned to every tag except breaks
Each "id"must be unique within the page
Each tag can only have one "id"
The name of the "id" must start with an alphabetic letter or an underscore
The "id" attribute has replaced the "name" atttribute.
The "id" can be the target of a link.
The "id" can be used to identify styles on a styles sheet
IDs in the style sheet are identified by the # sign
Class

Tags can also be assigned a class.
The same class can be more than once on a page
Classes in the style sheet are identified by a period.


Body The body tags are placed around all of the information that you want to appear in the browser window.	<body> </body>
Div - Divide Block Level Will automatically force the text onto the next line. Divs are used to divide text into blocks which in turn are suitable for positioning and floats	<div> </div>
Blockquote Block Level It also indents the text on both sides.	<blockquote></blockquote>
Header tags Block level Will automatically force the text onto the next line. Defines text sizes from largest h1 to smallest h6. Sizes and style can be customized in css. These tags should be used for titles and sub titles They are required for Section 508 and also aid in making a web page easier to read.	<h1> </h1>
Paragraph Block Level Will force the text onto the next line and there will be a space between the two lines	<p></p>
Span Inline Allows you to change the style of some text while still keeping it within the same line .	<span></span>
Strong Inline Creates bold text as the default. Style can be customized in css	<strong></strong>
Em Inline Create italic text Style can be customized in css	<em></em>
Break This is a self contained tag therefore you also need to include the closing slash There is a gap between the "r" and the "/".	<br />
None Breaking Space Not encased in a tag Creates one space between letters. You should only use a few in any one place probably only about five. Some browsers appear to measure the width of a none breaking space differently than others.
Horizontal Line Creates a line across the web page This is also a self contained tag therefore you need to enclude the slash so that it closes within itself. Don't forget the gap between the "r"and the "/"	<hr />
Image Image tags are used for pngs, gifs and jpgs. You are required to include an alt tag in which you place a description of the image. Including the alt tag is a rule of XHTML and also a requirement of section 508 The image tag is another self contained tag so once again you need to enclose the slash so that it closes within itself.	<img src="name.png" alt="description of image" />
Relative Link Link to a page in the same directory (folder)	<a href="page.htm"> page </a>
Relative Link Link to another to another page inside a directory (folder)	<a href="folder/page.htm"> page </a>
Relative Link Link to another to a page that is in a directory (folder)which is one level higher	<a href="...folder/page.htm"> page </a>
Absolute Link Link to another site	<a href="http://site.com"> site </a>
Anchor It is not longer necessary to create an anchor because theorically each tag on the page has an "id' therefore you can just link to specific "id"	<a name="top2" id="top"></a>
Link to an Anchor or ID on the same page must include the # Allows the user to jump to another part of the page that is indicated by an Anchor.	<a href="#top">name</a>
Link to an Anchor or ID on another page	<a href="page.htm#top">name</a>
Link to an email address	<a href="mailto:name@.com">name</a>

Body

The body tags are placed around all of the information that you want to appear in the browser window.

Div - Divide

Block Level
Will automatically force the text onto the next line.

Divs are used to divide text into blocks which in turn are suitable for positioning and floats

Blockquote

Block Level
It also indents the text on both sides.

Header tags

Block level
Will automatically force the text onto the next line. Defines text sizes from largest h1 to smallest h6.

Sizes and style can be customized in css.

These tags should be used for titles and sub titles

They are required for Section 508 and also aid in making a web page easier to read.

Paragraph

Block Level
Will force the text onto the next line and there will be a space between the two lines

<p></p>

Span

Inline
Allows you to change the style of some text while still keeping it within the same line .

Strong

Inline
Creates bold text as the default. Style can be customized in css

Em

Inline
Create italic text
Style can be customized in css

Break

This is a self contained tag therefore you also need to include the closing slash
There is a gap between the "r" and the "/".

<br />

None Breaking Space

Not encased in a tag

Creates one space between letters. You should only use a few in any one place probably only about five. Some browsers appear to measure the width of a none breaking space differently than others.

Horizontal Line

Creates a line across the web page
This is also a self contained tag therefore you need to enclude the slash so that it closes within itself. Don't forget the gap between the "r"and the "/"

<hr />

Image

Image tags are used for pngs, gifs and jpgs.

You are required to include an alt tag in which you place a description of the image. Including the alt tag is a rule of XHTML and also a requirement of section 508

The image tag is another self contained tag so once again you need to enclose the slash so that it closes within itself.

Relative Link

Link to a page in the same directory (folder)

Relative Link

Link to another to another page inside a directory

(folder)

Relative Link

Link to another to a page that is in a directory (folder)which is one level higher

Absolute Link

Link to another site

Anchor

It is not longer necessary to create an anchor because theorically each tag on the page has an "id' therefore you can just link to specific "id"

Link to an Anchor or ID on the same page

must include the #
Allows the user to jump to another part of the page that is indicated by an Anchor.

Link to an Anchor or ID on another page

Link to an email address

XHTML Basics

XHTML Rules

XHTML Documents Must Have One Root Element

Basic Structure of the Page

Writing the Code

Must use Lower-Case

Must use Quotes For all Attributes

Open and Close tags Correctly

Nest tags Correctly

All Text must placed in a block level tag

All Ampersand Charactors Must Use Their Entity Value

Internal links should use an "id" not "name

Cannot use attribute minimization

Must use alternative text for every image on the page

ID

Class

Tags

Body

Div - Divide

Blockquote

Header tags

Paragraph

Span

Strong

Em

Break

None Breaking Space

Horizontal Line

Image

Relative Link

Relative Link

Relative Link

Absolute Link

Anchor

Link to an Anchor or ID on the same page

Link to an Anchor or ID on another page

Link to an email address

Basics Design: Color

www.color

Color Index

Color Index Two