Note: Assuming your browser supports it, this list will not be printed out. Hide navigation

Beginner's Guide to XHTML

Wednesday 22nd June 2005 - Saturday 7th January 2006

The Basics

If you want to design a website, there are various ways to do it. Although you can get programs to write the pages for you, you can get far more control if you decide to write the page yourself. This is done in the language called HTML (Hypertext Markup Language). The next version of HTML is XHTML - there are stricter rules, meaning that the look of webpages is more consistant, and the code is easier to edit and understand. As such, I will be looking at XHTML, although most of what is said in this guide can be applied to standard HTML as well.

This part of the guide will look at the bare essentials for building a website, including the structure of the page, headings and paragraphs. All you need is a text editor, such as Notepad or gedit, and you can start writing. When saving the file, use the extension .html (make sure there isn't a .txt on the end).

If you are using Windows, you might want to use an alternative to Notepad, such as Crimson Editor - this will perform syntax highlighting on your document so that it easier to read as you work. It is also generally nicer to work with than Notepad, and makes switching between documents easier through use of tabs. Those using Linux should already have a decent text editor, such as gedit, which includes syntax highlighting, as well as tabs.

When writing XHTML documents, you will be making heavy use of tags. These are used to do virtually everything in the webpage. In XHTML, they must always be written in lower case. Tags are always between < and >. The most basic tags are those that define the structure of the website. The first tag you want in a website is <html>. This states when the document begins. The last tag you always want is </html>. This is a closing tag - all tags must be closed, and most are closed by the corresponding closing tag, shown by a forward slash just after the <.

Next, we want to split the page into two parts. The first is called the head, and contains information about the page, while the second part, the body, contains the actual data that will appear on the page. We use <head> and <body> tags, along with their closing equivalents, to define the two different areas of the webpage. This means that the basic page layout is like this:

<html> <head> </head> <body> </body> </html>

We also need a title for the page, which will appear in the titlebar for whichever browser you are using. Since the title doesn't appear on the page itself, it goes in the head section. Between the <head> and </head> tags, type <title>Whatever you want your title to be</title>. Your page should be looking similar to this now:

<html> <head> <title>Your Title</title> </head> <body> </body> </html>

After that, we should start actually adding stuff to the page itself. The method for this is to stick whatever you want between the body tags, since it appears on the actual page. Since, most of the time, you'll be writing in paragraphs, you need to stick a <p> tag at the beginning of each paragraph, and a </p> at the end of each paragraph. If you want to start a new line, use the <br /> tag. Note that, since it does not have a closing tag, it has a space and slash at the end instead.

You can also put in headings in the same way, ranging from the largest, <h1>, to the smallest, <h6>. When designing a website, use the heading according to its position rather than size e.g. for the title of a page, use <h1>, for subheadings use <h2>, subheadings within that <h3>, rather than choosing the heading based upon the font size of the heading. This should give you something like this:

<html> <head> <title>Your Title</title> </head> <body> <h1>My first web page</h1> <p>This is my first web page. It's not very good, but it works!</p> </body> </html>

Now that we've got a basic webpage, there's just a couple more things to do to make sure it is a proper web page. The first is to change the <html> tag. We need to tell the web browser that this page is XHTML, so change the tag to <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">. The xml:lang="en" part states the language; in this case English, so you can change it to whatever language you're using.

The last thing we have to do is add a doctype. A doctype tells dictates what version of XHTML you are using. At this point in time, the main versions are XHTML1.0 Strict, Transitional and Frameset, and XHTML1.1, which is essentially XHTML1.0 Strict. Frameset is, funnily enough, for use if you have frames in your webpage. However, it's probably a good idea not to use frames and use an alternative, such as divs. Strict is just that, cutting out many features of HTML, largely presentational, using CSS instead. Transitional is between Strict and HTML, including presentational features. In this guide, I will be concentrating on XHTML1.0 Strict.

When I said the <html> tag was the first tag, I lied a little - the doctype has to go first, although it isn't really an XHTML tag. You use a different doctype tag depending on which doctype you choose - if you're following the guide, I recommend XHTML1.0 Strict for now (I explain later why not to use XHTML1.1).

For XHTML1.0 Frameset, you need:

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

For XHTML1.0 Transitional, you need:

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

For XHTML1.0 Strict, you need:

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

For XHTML1.1, you need:

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

There is another part that is not required, but recommended. Since this now an XML document, you should add the XML declaration at the top: <?xml version="1.0" encoding="ISO-8859-1"?>, replacing ISO-8859-1 with whatever character encoding you want to use. I'm in Western Europe, so ISO-8859-1 is the right one for me. A link to a list can be found at the bottom of the page. You should also add the following line in the head section:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Here, we come across attiributes - these take the form of attribute="attributevalue". These are found inside tags, and the attribute must be in lower case, while the attribute value is in quotation marks. The 'charset' should match whatever you put in previously. The attribute 'content' tells the browser what type of document it is reading. XHTML should actually be defined as an XML document, but it is allowed to stay as text/html so that internet browsers can read the page properly. However, XHTML1.1 should always be defined as an XML document, rather than HTML as it in this case, which is why I do not recommend using XHTML1.1.

This means that you should be left with a page that looks similar to this:

<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Your Title</title> </head> <body> <h1>My first web page</h1> <p>This is my first web page. It's not very good, but it works!</p> </body> </html>

There! A fully working webpage! It may not do much, but it's a start. You can check that it is all written properly using a validator. Before the end of this part, there is one other tag that might be useful - the comment tag. You can add a comment anywhere, simply by using this format:

In the next part, we'll be looking at images and hyperlinks.

Summary

All tags in lower case
Every tag must be closed
<html> - begins the XHTML document
<head> - begins the head section of the document
<body> - begins the body section of the document
<title> - sets the title of the document
<h1> to <h6> - begins a heading
<p> - begins a paragraph
<br /> - starts a new line

Useful Links

World Wide Web Consortium
(X)HTML Validator
List of Character Encodings
Crimson Editor - Text Editor for Windows

Images and Hyperlinks

So, what do we have so far?

We have a working webpage with some text. Not very interesting, is it? In this part, images and hyperlinks will be used to make the page more interesting and interactive.

Adding an image is relatively simple. All we do is use this code: <img src="pathofimage" alt="alternative text" />. Replace pathofimage with, surprisingly enough, the path of your image. If the image is the same folder/directory as the XHTML file, you can just type the name of the file (don't forget the extension e.g. .gif, .jpg, .png). If the file is in a subdirectory, you type the name of the directory, a forward slash, and then the name of the file. You also need to provide alternative text - this is text that is displayed if the picture is not displayed.

For example, if I have an image called eggs.png in the directory pictures, which is in the directory storage, which is in the same directory as the XHTML file, I would write something similar to this:

<img src="storage/pictures/eggs.png" alt="A picture of eggs" />

There is something to note when using alternative text: in Internet Explorer, when you hover the image, the alternative text is displayed. However, this is not the way alternative text should be used - it should be only be used when the image isn't. As such, Firefox won't display the alternative text when you hover over the image. Instead, it will display the title text. Therefore, if you want the alternative text to be displayed when the image is hovered over, you should define both the alternative text and title. In this case, the title attribute belongs inside the <a> tag. For example:

<img src="storage/pictures/eggs.png" alt="A picture of eggs" title="A picture of eggs" />

You can also add the width and height to the image (in pixels), which can change the shape and size of the image. However, it is best to define the width and height as they really are. If you make the image smaller, you have a file larger than it needs to be, so you should shrink it yourself. If you make the image larger, you lose image quality. The advantage of defining the image width and height is that it helps keep the layout of the page correct, even when the images do not load. So, if my picture of eggs was 100 pixels tall and 50 pixels wide, I would use this code:

<img src="storage/pictures/eggs.png" alt="A picture of eggs" height="100" width="50" />

Adding a hyperlink is similarly easy. At the beginning of the section of text, or just before the image, you want to turn into a hyperlink, type <a href="pathoflink">, and type </a> at the end of that section of text, or the end of the image tag. The path can be internal, in the way described previously for images, or it can be another website. For example:

<a href="http://www.example.com">example.com</a>

Just as you can in images, you can set the text that appears when you hover over the link using the title attribute. For example:

<a href="http://www.example.com" title="example.com">example.com</a>

If you want to jump to a specific part of a page, you have to set up that page correctly. The code used is <a name="whatevernameyouwant" id="whatevernameyouwant"></a>, while the link is: <a href="pagepath.html#whatevernameyouwant"></a> For example, if, on a web page called 'food.html', I want to be able to jump to the heading 'Eggs', I would use the code:

<a name="eggs" id="eggs"></a><h2>Eggs</h2>

On the page that I want to jump to, while I would use this code to create the link:

<a href="food.html#eggs"></a><h2>Eggs</h2>

The name attribute is not really required - you could probably get away with just using the id attribute. Indeed, any tag can be used with the id attribute and function in the same way, but using <a name="... keeps compatibility with older browsers. Remember, the name and ID must be the same, and IDs should start with a letter (although they can contain letters, numbers, underscores, hyphens, colons and full stops.)

One thing to note is the attribute target="yourtarget". The main use would be when using frames, which, in this guide, we're trying to avoid. The other main use is target="_blank" - this makes the link appear in a new window. However, I don't encourage use of this - not only does it not conform to the XHTML1.0 Strict specification, it also forces a new window to be opened. By now, a user should be able to choose whether or not (s)he wants to open links in a new window.

One last tag is useful for seperating out text - the horizontal rule. The code is simply <hr />, which creates this:

Useful Links

Changing Appearance

In XHTML, there are various tags that can be used to changed the appearance of text. Although using style sheets and <span> tags is a better idea in some cases, these tags are still allowed, and some are extremely useful. <span> tags will be covered in due time, but these tags are still useful if you want to highlight something quickly.

The following table shows a multitude of tags that can be used in XHTML to change the text. For example, in this guide, I have been using the <code> tags when I have been writing code. Some tags are better than others. If a tag is a description of appearance, such as bold or italic, then it isn't particularly wise to use. On the other hand, tags that describe their purpose, such as emphasis, are much better, since this they are not presentational descriptions, but rather semantic descriptions.

If you're wondering why this is important, it is because XHTML should be used to describe the content of a webpage, not its appearance. So, you can say what bits are headings, paragraphs, quotes, code, definitions, etc., since these show the structure and actual content of the page. You should avoid presentational tags, such as bold, italics, etc., since these do not convey any sort of meaning as to the content of the page.

Opening Tag	Description	Example
`<b>`	Makes the text between the tags bold	This text is bold
`<i>`	Makes the text between the tags italic	This text is italic
`<big>`	Enlarges the text between the tags	This text is enlarged
`<em>`	Emphasises the text between the tags	This text is emphasised
`<small>`	Makes the text between the tags small	This text is small
`<strong>`	Makes the text between the tags strongly emphasised	This text is strongly emphasised
`<sub>`	Makes the text between the tags subscript	Normal _Subscipt
`<sup>`	Makes the text between the tags superscript	Normal ^Superscript
`<code>`	Makes the text between the tags appear as computer code	`This text is code`
`<dfn>`	Makes the text between the tags a definition	This is a definition
`<kbd>`	Makes the text between the tags keyboard text e.g. input text when using a program	`This is keyboard text`
`<pre>`	Makes the text between the tags preformatted	This text is preformatted
`<samp>`	Makes the text between the tags sample output e.g. from a program	`This text is sample output`
`<tt>`	Makes the text between the tags teletype text	`This text is teletype`
`<bdo dir="ltr">`	Changes the text direction to left to right	Left to right
`<bdo dir="rtl">`	Changes the text direction to right to left	Right to left

Useful Links

Tables

So far, we can create a web page, format the text a little and add images and hyperlinks. In this part, we will see how to display information in tables, along with a multitude of attributes that change the table's appearance.

Tables can be used to display information easily on a web page. In the past tables were used to layout the various parts of a page - this is now a bad practice to use in XHTML. This is the basic form of a table:

<table> <tr> <th></th> <th></th> </tr> <tr> <td></td> <td></td> </tr> </table>

The <table> tags define the start and finish of the table. Each row of the table is between the tags <tr> and </tr>. Normally, each cell is defined by <td> tags, but on the first row we want to put headings in first by using the <th> tags instead. The example above would create a table of two cells by two cells. Here is an example that actually has data in it:

<table> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>10 Pencils</td> <td>50p</td> </tr> <tr> <td>10 Pens</td> <td>80p</td> </tr> </table>

That code creates this table:

Item	Price
10 Pencils	50p
10 Pens	80p

In the <th> tags, we should add an attribute: scope. For most tables, the value should either be row or col. This tells the browser what the heading applies to, helping the disabled to view your webpage. We should also add a summary to the webpage using summary="A summary." in the <table> tag. The modified code would look like this:

<table summary="A table showing the prices of various items"> <tr> <th scope="col">Item</th> <th scope="col">Price</th> </tr> <tr> <td>10 Pencils</td> <td>50p</td> </tr> <tr> <td>10 Pens</td> <td>80p</td> </tr> </table>

This tells the browser that the first column contains Items, while the second column contains Prices.

There are a number of other attributes that can be used.

You can set a caption for the table, which is normally similar to the summary, although perhaps not always as long. Simply use the attribute caption in the <table> tag. E.g. <table summary="A table showing the prices of various items" caption="Prices of various items">

Note: it is generally better to use CSS rather than XHTML to change the apperance of tables. However, the following presentational markup is stil valid.

You can also use the border="Number" attribute, although using style sheets is better (they will be covered in a different guide). For the rest of the example tables, all is the same apart from the table tag As such, only the table tag would be shown - writing it out in full might gobble up slightly too much space! This table has a border of 2:

<table border="2">

Item	Price
10 Pencils	50p

The width of the table is defined, somewhat predicatably, by the attribute width="Number". The number can either be a normal number, or a percentage. In this table, the width is 50%:

<table width="50%">

Item	Price
10 Pencils	50p

The cellpadding="Number" attribute tells the browser the gap between the border of each cell and the contents of the cell. This table has cell padding of 10:

<table border="2" cellpadding="10">

Item	Price
10 Pencils	50p

The cellspacing="Number" attribute tells the browser the gap between the each of the cell borders. This table has cell spacing of 5:

<table border="2" cellspacing="5">

Item	Price
10 Pencils	50p

Finally, we have the rules attribute. This tells the browser where to draw the lines on the table. The two main uses are rules="rows" and rules="cols".

<table rules="rows" border="2">

Item	Price
10 Pencils	50p

<table rules="cols" border="2">

Item	Price
10 Pencils	50p

Useful Links

Lists

In this reasonably short part, we are going to look at how to create lists, of which there are two main types: ordered and unordered. However, they both follow the same basic rules, and can be nested within each other.

An ordered list begins with the <ol> tag, while an unordered list begins with the <ul> tag. For each part of the list, we have text surrounded by the <li> tag, representing list item. For example, here is the code you would use for an ordered list:

<ol> <li>Item 1</li> <li>Item 2</li> </ol>

Which creates this:

Item 1
Item 2

An unordered list is the same, except with a single letter change in the first and last tags:

<ul> <li>Item 1</li> <li>Item 2</li> </ul>

The end product of which is:

Item 1
Item 2

The final point about lists is the ability to nest them. This means that you can have a list within a list. That list still follows the same rules as an ordinary list. You can mix ordered and unordered lists. For example:

<ol> <li>Cake <ul> <li>Sponge Cake</li> <li>Chocolate Cake</li> </ul></li> <li>Bread <ul> <li>White Bread</li> <li>Brown Bread</li> </ul></li> </ol>

The result is this:

Cake
- Sponge Cake
- Chocolate Cake
Bread
- White Bread
- Brown Bread

Useful Links

Special Characters

When writing in XHTML, there are various characters that are not in the normal character set. There are also characters that are using in writing XHTML, and so cannot be displayed as you would a normal character. For these characters, you must use a character entity. The table below shows some of the special characters you may use. Of particular note is the ampersand. You must use the character code for it not only in normal text, but when defining a link.

Character code	Result
`"` or `"`	"
`&` or `&`	&
`<` or `<`	<
`>` or `>`	>
` ` or ` `	Non breaking space
`¡` or `¡`	¡
`¢` or `¢`	¢
`£` or `£`	£
`¤` or `¤`	¤
`¥` or `¥`	¥
`¦` or `¦`	¦
`§` or `§`	§
`©` or `©`	©
`®` or `®`	®
`±` or `±`	±
`²` or `²`	²
`³` or `³`	³
`¼` or `¼`	¼
`½` or `½`	½
`¾` or `¾`	¾
`×` or `×`	×
`÷` or `÷`	÷

For a fuller list of characters, you can look at the reference on the World Wide Web Consortium's Website. Here is an example of how to use the table:

<!ENTITY uml CDATA "¨" -- diaeresis = spacing diaeresis, U+00A8 ISOdia -->

The part after ENTITY tells you the first way you can write the character, in this case ¨. The part after CDATA tells you the second way you can write the charater, in this case ¨. The final part is a description of the character.

Useful Links

Accessibility

When creating a web page, it is always important that as many people as possible can view it. By making a web page more accessible, you can make sure that almost anybody can view your webpage, regardless of browser or disability. Although there are a number of ways in which this can be achieved, this article concentrates on the specific (X)HTML tags that can be used.

In the previous part, we already covered using labels, which make forms easier to use. Another tag is <abbr>. Along with the title attribute, this allows you to specifiy an abbreviation. When you hover over the word, it will then display the contents of the title attribute. For example, (X)HTML is an abbreviation of eXtensible HyperText Markup Language, so we'd use the following code:

<abbr title="eXtensible HyperText Markup Language">(X)HTML</abbr>

You can already see the result in the first paragraph i.e. (X)HTML. Generally, you should define an abbreviation in this way the first time you use it. After that, it is acceptable to simply use the abbreviation. In some browsers, such as the Mozilla family, abbreviations are underlined by dots. However, a certain browser called Internet Explorer doesn't actually support this tag. However, it does support the <acronym> tag.

At this point, a small English is required. An acronym is a type of abbreviation where the first letters of words are used to create a new word, such as NATO (North Atlantic Treaty Organisation), and FIFA (F?d?ration Internationale de Football Association). HTML, on the other hand, is pronounced as each each letter individually, not as a single word. As such, it is an initialism, not an acronym. However, to many people, initialisms are acronyms.

The tag is used in exactly the same way as an abbreviation e.g.

<acronym title="North Atlantic Treaty Organisation">NATO</acronym>

Here is the result: NATO. Now, in Internet Explorer, when you hover over the word, you can see the full form of the acronym, as well as in most other browsers.

This leaves you with a number of choices.

Use <abbr> all the time, or with <acronym>. Since acronyms are a type of abbreviation, this will always be correct usage of tags, but Internet Explorer users won't be able to see the full term if you use <abbr>. This is the option I generally use.
Use <abbr>, and <acroynm> for acronyms and initialisms. Although this might not be strictly correct, it is probably an acceptable use of <acroynm>. However, I would avoid using tags in this way since it may confuse some software that tries to read words out to the user. Again, Internet Explorer can't see abbreviations.
Always use <acronym>. This is the best solution for Internet Explorer users, but, in my opinion, the worst solution overall. It is incorrect usage of the tags, and could confuse some software.

I would advise people to choose option number one. It is only Internet Explorer that will suffer, and I am not willing to compromise for one application.

The other tag I'm going to cover is the <link> tag. An example is:

<link rel="start" title="Front Page" href="/" />

In browsers that support this, such as Seamonkey, Opera, Links and Lynx, this will provide a link back to the start. This makes it easier for some people to navigate around a site. The title attribute is a specific description of where the link will go, the href attribute is the URL of the destination, while the rel attribute is the type of destination. Below is a table showing the common values for rel:

Value	Explanation
start	The front page/starting point of your website.
up	A 'level' up in your web page e.g. from an article to a list of articles.
first	The first page, such as the first page of an article.
prev	The previous page, such as the page before in an article.
next	The next page, such as the following page in a article.
last	The last page, such as the final page of an article.
help	The location of the help page for your website.
search	The location of the search page for your website.
author	The page showing the author(s) of your website.
copyright	The location of the copyright notice for your website.
alternate	Alternative versions of the current page, such as an Atom feed or version without images/graphics. There can be multiple alternative versions - each one has a separate tag.

Beginner's Guide to XHTML

The Basics

Summary

Useful Links

Images and Hyperlinks

Useful Links

Changing Appearance

Useful Links

Tables

Useful Links

Lists

Useful Links

Special Characters

Useful Links

Forms

PHP

Useful Links

Accessibility

Useful Links