XHTML Basics


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:

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


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

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.


The following tags are just the basic tags for a web page. A more extensive list will be added later. I have not included any XHTML tags for fonts and styles etc. because the assumption is that you will be using a linked style sheet and not including the styles on the page.



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>


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.

<h1> </h1>


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



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



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



Create italic text
Style can be customized in css



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 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



<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>


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>







info arch

the net





be inspired

my notes