XHTML topics

XHTML (eXtensible HTML)

As a web developer, you may be aware that the HTML language has a loose structure. This loose structure, over the years, has resulted in many inconsistent and incompatibility issues as different browser vendors tried to interpret differently the meaning of HTML code.

To establish better ground rules for developing web pages, XHTML (eXtensible HTML) technology was developed. XHTML is a subset of XML (Extensible Markup Language). While XML can be used to structure virtually any information, XHTML can be used to create highly structured web pages. XHTML enforces the structure of XML within the HTML language.

The huge benefit of using XHTML documents is that they can be validated or analyzed for correctness. A validated XHTML document indicates that it meets all the coding requirements of the XML language and the rules of an XHTML schema (document type definition or DTD).

Now, you may be thinking that XHTML is probably a complicated technology that requires you to learn set of unfamiliar instructions for creating web pages. Actually, if you already know HTML, you can learn XHTML without much difficulty because XHTML is not all that different from HTML.

What is XHTML?

The extensible Hypertext Markup Language (XHTML) is very like HTML (Hypertext Markup Language). Like HTML, XHTML is used for creating interactive web pages. The output of XHTML is very similar to that of HTML. In other words, users can still click on links to move between pages, fill out forms, search databases, play animations, and so on. Similar to what HTML does XHTML works behind-the-scenes to instruct web browsers to format and display content on web pages.

So what is a markup language? A markup language consists of scripting code that prepares a document for presentation. If you were to analyze XHTML code, you would find that is just a text file that contains the content you want to display in your web document. See figure 1 as an example of code of document:

An example of XHTML code for a web page document

As the figure shows, XHTML is nothing like a web page. Instead, it shows parts of the XHTML instruction that consist of elements, tags, and attributes. Figure 2 shows a webpage that is created from scripted markup of collective work of elements, tags, and attributes.

Example of a web page created from XHTML code

XHTML history

HTML is the predecessor of XHTML. HTML dates back to the early 1990s and late 1980s. Tim Berners-Lee first developed HTML to share document on the web. HTML is a Meta language that is derived from Standard Generalized Markup Language (SGML). SGML is used for creating markup languages such as HTML, XHTML, and XML.

When HTML was first introduced, it was primarily used to exchange reports and research findings at CERN, a physics laboratory in Geneva, Switzerland). By 1993, HTML and its reach was well known. In the same year, CERN released HTML for public use and for governance of the language specifications to an industry group known as the World Wide Web Consortium (W3C). W3C still is responsible for governing HTML, XHTML, and other markup languages. With the introduction of HTTP, Hypertext Transfer Protocol, it was possible for web browsers to request web pages and web servers to serve those pages.

The first version of HTML (HTML 1.0) was introduced in 1993. This version, however, lacked presentation and layout controls that are ubiquitously available to developers today. Consequently, HTML evolved over time with support for new features in each version release. Browser vendors also pushed for new features or they implemented support for their own scripting functionalities without HTML specifications approved by W3C. As a result, different browsers interpreted tags differently and consequently rendering web content in different ways. One of the primary reasons XHTML was introduced to address incompatible HTML scripting implementations.

XHTML Document Type Definition (DTDs)

There are three kinds of standard XHTML DTDs:

1. Strict
2. Transitional (also called loose)
3. Frameset

Each of these XHTML DTDs targets a different level of detail for XHTML. In other words, you can choose the kind of feature you want from the different features supported by these standard XHTML DTDs.

If your page, for instance, does not require an advanced feature of XHTML, you can use a minimal DTD. Keep in mind smaller DTDs result in faster validation, which in turn, results in a faster display of your web page.

See table 1 for a description for each of these standard XHTML DTDs. The strict DTD is the most efficient as it provides minimal XHTML language for creating web pages. So you might be thinking this is a very limited DTD and may not be of any use. Actually, as mentioned before, it is the most efficient DTD and enables a fastest validation of XHTML documents. The idea behind using a strict DTD is to use style sheets for display rather than presentation elements. Thus use of a strict DTD aims to separate presentation code from content.

The transitional adds more features than a strict DTD to a XHTML document. The support for more features increases the validation process when an XHTML document is displayed. Because a transitional DTD provides support for presentation elements, the transitional DTD can be used for converting HTML documents to XHTML. The transitional DTD does not include support for frames (which allows you to use a single browser window to display multiple web pages).

The third DTD, frameset, is a full-featured XHTML DTD. This DTD has support for what a transitional DTD offers plus support for frames. Because frameset DTD is the most complex, it is the slowest of three when it come to validating XHTML documents.

Table 1 summary of the three XHTML DTDs
XHTML DTD name	Description
Strict	The strict type DTD does not support any HTML presentation elements (such as <p>, <a>, <b>, etc.). This is the low-featured XHTML DTD.
Transitional	The Transitional type DTD adds support for HTML presentation elements. That means you can use HTML elements (such as <p>, <a>, <b>, etc.) directly inside of your XHTML document. The Transitional DTD is a medium-featured XHTML DTD.
Frameset	The Frameset type DTD adds support for frames. This is the most full-featured XHTML DTD.

Declaring an XHTML DTD

Declaring an XHTML DTD and namespace for an XHTML document is a straightforward; simply, place DTD declaration at the top of the document before the <html> root element. The following shows code for declaring strict DTD:

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

You would use this declaration when you wan to use the strict DTD. The public attribute informs the browser that the document’s DTD is a public standard hosted by the W3C (World Wide Consortium). The information enclosed by the quotation marks is called formal public identifier (or FPI). In this declaration, the FPI (“-//W3C//DTD XHTML 1.0 Strict//EN”) tells the browser that the DTD is the W3’s DTD for XHTML 1.0 in the English language. After the FPI, the actual web address of the DTD document is listed: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd.

The following shows document type declaration for the transitional DTD:

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

The document type definition for the frameset DTD is similar:

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

For an XHTML document to be valid, the document must include one of these declarations. As commented earlier, use the appropriate DTD for the required level of XHTML support.

XHTML tag structure

Tags define the look and placement of the contents of a tag. The content of a tag is contained between an opening and closing tag. The combination of starting tag, content inside the tag, and closing tag is referred to as an element.

So how do you create a tag? In XHTML, tags can be identified by the presence of angled (< and >) brackets. Inside these brackets, we write the code that identifies a tag. For instance, in

This is a <b>tag</b> for making some text bold.

we have two sets of angled brackets. Each of these two sets contain a lowercase “b” to make the word “tag” bold typeface. In the example, <b> is the opening tag. An opening tag starts an instruction: displays the content of the tag as bold typeface. In contrast, a closing tag stops an instruction. In the example, it instrcuts the browser to stop applying the bold typeface instruction. Since our element (<b>tag</b>) consists of the text only “tag”, only this text will be displayed as bold typeface and the rest of the text will be displayed as regular text. The following confirms this output:

This is a tag for making some text bold.

So you can see XHTML is not difficult to use though there are some rules, as described in the next section, that you should remember to create XHTML documents.

Tag syntax

Just as spoken languages have rules (called grammar), computer-based languages too have rules called syntax. You need to follow the tag syntax to instruct the browser exactly what you are trying to portray in an XHTML document. The following lists the basic principles that apply to XHTML documents:

• Place a document type declaration before the <html> tag.
• All XHTML documents must contain <html>, <body>, and <title> tags.
• All tags in XHTML must have a closing tag.
• Tags must be XHTML-compliant
• All tags their attributes must be lowercase.
• Enclose attribute values in quotation marks.
• Tags can be nested within other tags.

XHTML tag types

In this page, you will learn about the types of tags that can be used in an XHTML document. XHTML documents can be typically divided into two sections:

1. head, and
2. body.

The head section of the document contains elements that help identify the document. In addition, the head section also helps the browser to determine how the document is to be displayed. The body section contains the elements that make up the content of a webpage. Any information that you want to display, in other words, on a web page should be included in the body section of the document.

Head tags

A particular section of a web document is created with tags. The head section of an XHTML document is synonymous with the <head> element. The head section or the <head> element contains several tags that provide information about the document. Although majority of <head> elements do not appear on a web page, they are nonetheless important for identifying and organizing a document. The <head> elements also help search engines identify what your web document is about.

Here are the basic <head> tags:

• <title>
• <meta>
• <link>

The <title> tag adds title to a web page. For example, the element <title>XHTML tag types</title> instructs the browser to place the content of the <title> tag in the blue bar of the browser window (in Internet Explorer):

Showing output in MS Internet Explorer’s title bar of the code <title>XHTML tag types</title>.

The <meta> tag is an optional tag but you should still consider using it. The <meta> tag defines information about an XHTML document. This information is usually referred to as metadata. The metadata information is used by the search engines to determine what the document is about. For this page, as an example, we could use the following keywords and description:

<meta name="keywords" content="XHTML, XHTML tags, XHTML tag, title tag"></meta>
<meta name="description" content="Learn more about XHTML tag types. XHTML documents can be divdied into two main sections: head, and body."></meta>

So to summarize, the <head> element contains information about the document. So where do you place the information that you want to display on a web page? The information that needs to be displayed on a webpage should be included inside the <body> element.

Body tags

Because most of the tags used to create an XHTML document are placed inside the <body> element, we will be spending most of the pages devoted to this topic. (You can review these pages by following the links shown on the left.) To help you understand the different types of elements available for the <body> element, we can break the <body> elements into the following four categories:

• block
• inline
• links
• images

A block-level element can be identified by the fact that it starts a new line of text. Block-level elements handle blocks of text within an XHTML document. Examples of block-level elements include:

Element	Description
<p>A paragraph text.</p>	Creates a paragraph.
<h6>Heading 6</h6>	Creates a 6th level-heading
<ul> <li>An unordered list</> </ul>	Creates an unordered list.

On the other hand, the inline elements apply styling properties within blocks of text. The common examples of such elements include:

This is some text that uses an <b>inline</b> tag: <b>.
In this bock of text, we use the <i>italic bold typeface</i> tag: <i>.

The distinguishing characteristic of inline elements is that they do not start a new line of text; they rather only alter what is within a text block. Again, the block-level elements do start a new line.

The link elements connect web documents. What makes the World Wide Web work is the connection points defined by the link elements. Although link elements are like inline elements, they are handled differently from other elements. Examples of link tags include: <a>, and <link>

The tag used for displaying images in XHTML document is: <img />. Although this tag is neither a block tag nor inline tag, it can behave as both depending on use. We will omit the details for now just remember that the <img /> is used for displaying a graphic on a webpage.

Creating XHTML documents

Every web page you visit is likely to have invisible HTML and XHTML code that helps browsers to display that page. Writing that code to create a web page is the subject of this web page. The following shows an example of creating an XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document Title</title>
</head>
<body>
Some content to display on a web page.
</body>
</html>

Now let’s review the code shown above. The first line (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) simply specifies that we are using the transitional (also known as loose) DTD. Next, for the XML namespace, we are instructing the browser to reference the XML schema found on W3’s website:http://www.w3.org/1999/xhtml. For most of the XHTML documents you create, the first two lines (consisting of the DTD and XML schema) will remain the same while other parts of the documents are likely to change. Specifically, you would change the information in the header section (meta tags, title tag, etc.), and in the body section of a document.

In the header section, we have two tags: <meta> and <title>. With the <meta> tag, we are using the default character coding: iso-8859-1. This standard simply instructs the browser that we are to display characters on the webpage using the “Western” or “West European” alphabet. The <title> tag simply instructs the browser to display the text “Document Title” inside the title bar of the browser.

In the body section of our XHTML document, we only have one line to display: Some content to display on a web page.

You may be wondering how can you distinguish between the header section and the body section of the XHTML document. Look closely in our example above, when we start the header section, we use the <head> tag. This opening tag instructs the browser that the coming elements should be treated as header information for an XHTML document. As soon as the browser encounters the </head> tag, this ends the header section. Here is some terminology to keep note of: an opening tag starts an instruction and a closing tag stops the instruction. To create a closing tag, simply place a forward slash (/) between the first angled bracket (<) and the name of the tag; such as </a>, </b>, and </i>.

The simple answer is anything you place inside the <head> and </head> tag is treated as the header section of an XHTML document.

So how do we begin the body section of our XHTML document? If you answered with the <body> tag, you are correct. So any information you want to display on a webpage should be included in the <body> and </body> tags. You can also think of this as that the body section of an XHTML document begins with the <body> tag and the body section ends with the </body> tag.

The following shows the output of our example:

Output showing the content of the title bar and body section of the browser.

Validating XHTML documents

If you want to know whether or not your XHTML document is valid, you can go to https://validator.w3.org/.

The validation of XHTML documents requires one of three XHTML DTDs (strict, transitional, or frameset) and the following main requirements:

• A document type declaration (DOCTYPE) must appear in the document prior to the root element.
• The root element of the document must be <html>.
• The root element of the document (<html>) must designate an XHTML namespace using the xlmns attribute.
• Ensure that <head> and <body> tags are present.
• Make element and attribute names lowercase.
• Assign values to attributes.
• Enclose attribute values in quotation marks.
• Ensure non-empty elements have closing tags.

Editors for writing XHTML

XHTML editors

XHTML document can be developed with any text editor software. A simple text editor such as Notepad has limited functionality but is free and comes with loaded on Windows operating system. On the other hand, a development toll like Dreamweaver is more user-friendly and powerful but is expensive.

The cost may not be only the factor that will decide the type of editor you use to markup in XHTML. The degree of knowledge you posses of scripting, your preferences toward a particular development tool, and hand-coding versus visual designing are some of the factors that are likely to determine the type of software authoring tool you use. If you like hand-coding, this will not only help you learn XHTML elements, attributes, and structures but also provide you control over your documents versus using a development tool that will write the code for you without making it transparent the rational behind using particular piece of code. Hand-coding also gives you more control over exactly what scripting code is written.

If, on the other hand, you use a WYSIWYG (short for “what you see is what you get”) editor, it will require no or minimum knowledge of XHTML. Table 1 highlights the advantages and disadvantages of each of these two approaches to writing scripting code.

	Advantage	Disadvantages
Text editor	help you learn XHTML flexibility in code writing (you write code what you think is most appropriate for your web page, you don’t have to wait for a authoring software update for using newest XHTML features)	requires knowledge of XHTML coding typical text editors support only limited features may slow your work
Examples of text-editors	Notepad on Windows, vi or pico on Unix, SimpleText and TechText on Macintosh
WYSIWYG editor	requires little or no knowledge of XHTML simple to use as using a typical Word-processing application supports many useful features (such as link checking, FTP support, etc.)	expensive the development tool is in control over what code is written if you don’t know how/what to edit
Examples of WYSIWYG editors (for HTML, XHTML, etc.)	Dreamweaver, Microsoft FrontPage, and Netscape Composer

So what editor should you use given all these choices and considerations? You may try a simple text-based editor as a start. If you realize it is too much work for you to do hand code everything, you may try downloading a trial version for one of the available WYSIWYG editors. After trying both options, you will have a better understanding of what authoring tool is best suited to your scripting needs.

Creating Paragraphs in XHTML

The <p> tag is one of the most commonly used tags. The <p> tag contains paragraph text. Creating a paragraph in XHTML is very similar to what you do in HTML but with one noticeable exception: in HTML, your paragraphs will render correctly even if you fail to close the paragraphs tag this is not the case in XHTML. In XHTML, every opened tag must be properly closed.

Recall opening tag is the name of the tag surrounded by two angled brackets such as <p>, and closing tag simply has in addition a forward slash (/) between the less than sign and the name of the tag (i.e., </p>). Opening tag indicates start of an instruction and closing tag indicates end of the instruction. So opening tag, <p>, indicates start of a paragraph and the closing tag, </p> marks the end of a paragraph.

The following shows an example of creating a paragraph in XHTML:

<p>To create a paragraph in XHTML, have opening and closing tags around your paragraph text as it is done in this example. This is the text for our paragraph. Now, ending the paragraph.</p>

The following shows the output of the above scripting code:

Browser output of a paragraph

In the following example, we create multiple paragraphs using separate paragraphs tags:

<p>This is our first paragraph. Creating a paragraph in XHTML is easy. Simply place opening and closing tags around the text you want to designate as a paragraph. And, the browser will render it as a paragraph.</p>

<p>This strats our second paragraph. As you may have already realized, this paragraph too uses the same markup tag; namely, the <p> tag. Each new paragraph opening tag (<p>) starts the paragraph text on new line in the browser output. The browser is responsible for separating each paragraph from other paragraphs with a blank line. So you don't have to manually insert blank lines (using the <br> tag). With style sheets, you can actually customize the precise blank space that you want to use for separating paragraphs. See the output below.</p>

The following shows how a browser shows the two paragraphs created above:

Showing browser output of multiple paragraphs

XHTML Headings

Creating headings in XHTML is the same as in HTML. Headings, in general, are used organize information in logical hierarchy. With headings, you can break up large chunk of text of information and similarly announce to the readers the topics that follow. XHTML, like HTML, has six levels of headings. The six levels of headings are numbered from 1 through 6, where <h1> signifies the most importance and h6 signifies least importance. Most browsers render h1 in larger and/or bolder font than normal text. Conversely, h6 is rendered in smallest and/or bold font than normal text. These heading levels convey the logical meaning about a particular part of the web document. The physical structure (or characteristics such as color, font size, font-type, and so on) can be specified in a Cascaded Style Sheet (CSS).

The followings shows the code for creating six different levels of headings:

<h1>First level heading with h1</h1>
<h2>Second level heading with h2</h2>
<h3>Third level heading with h3</h3>
<h4>Fourth level heading with h4</h4>
<h5>Fifth level heading with h5</h5>
<h6>Sixth level heading with h6</h6>

The followings shows the headings created with the above code:

First level heading with h1

Second level heading with h2

Third level heading with h3

Fourth level heading with h4

Fifth level heading with h5

Sixth level heading with h6

It is possible that you may always need all these headings for all of your XHTML documents. Generally speaking, first level heading is probably the most used for the main heading of a web page document. A typical document may have two or three heading levels. More headings a document has, more difficult it becomes for readers of that document to keep track of the hierarchy of the document. If you have too many heading levels in use for a particular web document, you may consider dividing that document into multiple documents or reorganize the document content to clarify its organization or hierarchy. As mentioned earlier, headings should be used for emphasizing headings or for announcing topics that follow on the page but not, for example, for graphic captions or emphasizing other information within text.

Aligning headings

By default, headings are left-aligned as you may have already noticed. However, this can be easily changed using the align attribute or using style sheet specification. If you decide to use the align attribute, make sure your document is using the transitional version of XHTML (or HTML).

The following shows the four possibilities of alignment of headings using the align attribute:

<h5 align="left">Heading aligned left</h5>
<h5 align="center">Heading aligned center</h5>
<h5 align="right">Heading aligned right</h5>
<h5 align="justify">Heading aligned justify</h5>

The following shows the output of the above alignment code:

Heading aligned left

Heading aligned center

Heading aligned right

Heading aligned justify

In the following example, we use CSS to control the alignment of the headings:

<style type="text/css">
h1.left {text-align:left;}
h1.center {text-align:center;}
h1.right {text-align:right;}
h1.justify {text-align:justify;}
</style>

Remember this CSS specification must be placed between the <head> and </head> elements. Inside the body structure of the document, simply replace align with the keyword class as shown here:

<h5 class="left">Heading aligned left</h5>
<h5 class="center">Heading aligned center</h5>
<h5 class="right">Heading aligned right</h5>
<h5 class="justify">Heading aligned justify</h5>

The output of this code is same as shown for the above example.

XHTML Lists

Lists provide a great way to draw attention to important information. Although you may use paragraph format to include the items of your list, it may not be always effective as lists help readers to easily find, read, and use the information presented in a list. We make that point with the following example:

List items in a paragraph

Information shown in a paragraph may not immediately draw user’s attention to the parts of your list as the user has to read the paragraph text before the listing is reached. So consider use listing to draw user’s attention. Creating lists in XHTML: is easy as in HTML, requires knowledge of markup to start and end list and to add items to the list, allows you to present information in a more attractive manner.

Information shown as a list

As you will notice in this example, you can quickly spot the list items shown in this list below rather than some items shown in the above paragraph. Our list example:

• listing item is easy
• before you start, think of the type of list you want and the items you want to list
• for each list, use an opening and closing tag
• for each list item, use an opening and closing tag

As it is now evident to you from the above output, you are likely to agree to use lists, when appropriate, instead of paragraphs. Beside lists makes information more readable, there are other notable advantages. First of all, listed items can be shown with a bullet character, a number or letter, or some other defined custom graphic character. Secondly, addition or removing of an item does not require update to the listing character. For instance, if you are using a numbered list, if you add or remove an item, you don’t have to update the number because it is automatically shown based on the list item you have for your list. Lastly, there are number of presentation specifications for lists and can be coded in style sheets.

Lists in XHMTL can be grouped into these categories:

1. Numbered list (also called ordered list)
2. Bullet list (also known as unordered list)
3. Definition list

Creating numbered lists

Numbered lists are also known as ordered lists. To start a number list, use the <ol> tag. The ol in <ol> stands for ordered list. To indicate the ending of a list, use </ol>. Now, you know how to mark the beginning and end of your list.

Next, piece of information that is needed to create a list is the items you want to list. For indicating items of your list, use the <li> tag for each item. Do not forget to indicate the ending of each items of your list by using the </li> tag.

See table 1 for summary of the tags used in creating an ordered list.

Table 1 list of tags required for creating an ordered (numbered) list
Tag	Purpose
<ol>	Specifies start of an ordered list
</ol>	Marks the end of an ordered list
<li>	Specifies list item
</li>	Marks the end of list item

As you may realize from this discussion, these same tags are used in HTML to create an ordered list. However, there is one notable difference:

• In HTML, you don’t have to close the listing tag. Your list will show properly in a browser.
• In XHTML, however, any open tag must be closed (following this sequence: closing first the last tag that was opened) for the document to be valid.

We will create the following list, as an example:

1. Computers
2. Software
3. Hardware

Because each list item has a number in front, we know it is a numbered list. To create this list, we need to use the <ol> tag. Follow these steps to create this list:

Steps/Explanation	Steps/Explanation
1. Start the list with <ol> tag	<ol>
2. Mark the end of list with </ol> tag	</ol>
3. Enclose each list item between <li> and </li>	<li>Computers</li> <li>Software</li> <li>Hardware</li>
4. Between the start and end tag insert the markup for each list item.	<ol> <li>Computers</li> <li>Software</li> <li>Hardware</li> </ol>

In this example, we started with the <ol< tag to start an ordered list. For the first item that we want to list, we enclose it inside the <li> and </li>, as <li>Computers</li>. Similarly, the second and third items are surrounded by an opening and closing listing item tag. To mark the end of the numbered list, we use the Computers </ol> tag. By default, a numbered list appears with Arabic numerals, i.e., 1, 2, 3, and so on.

Bulleted list

A bullet list is also referred to as an unordered list. Table 1 shows the tags needed to create an unordered list.

Table 1 an unordered list tags
Tag	Purpose
<ul>	Starts a bullet list
</ul>	Ends a bullet list
<li>	Specifies start of a list item
</li>	Marks the end of a list item

Creating a bullet lists simple and is very similar to creating a numbered list. The following shows the involved in creating a bullet list:

1. Insert these two tags into your XHTML code editor: <ul> and </ul>
2. Copy or type all of your list items between those two tags
3. Surround the text of each list item with <li> and </li> tags

In the following example, we use these three steps to construct a bullet list:

Step 1:	<ul> </ul>
Step 2:	<ul> Honda Toyota Ford BMW </ul>
Step 3:	<ul> <li>Honda</li> <li>Toyota</li> <li>Ford</li> <li>BMW</li> </ul>

The following shows the output of the finished bullet list:

• Honda
• Toyota
• Ford
• BMW

By default, bullet shape is used in front of each list item and thus the name bullet list. Listing character type, however, can be changed to a square or circle. See table 2 for the possible choices using the list attribute type to specify the listing character.

Table 2 bullet type list attributes
Attribute	Explanation
type=”disc”	Specifies the bullet (disc) shape. This is the default shape.
type=”circle”	Specifies the circle shape
type=”square”	Specifies the square shape

To specify the listing shape, simply add the type attribute to the ul tag with one of the three possible values shown in table 2. Table 3 shows examples of each shape in use.

Note the type attribute is added once to the opening ul tag for the entire list; it would be incorrect to add the type attribute to the opening li tag.

Emphasizing text in XHTML

There are number of ways of emphasizing text in XHTML. The exact steps involved in applying text formatting instructions in XHTML is very similar to as it is done HTML. We can, for example, use the <b> tag to make the text bold in both XHTML and HTML. As you may already know <b> is a character-level formatting tag meaning it must be placed inside a paragraph tag (<p>), heading level tag (<h1>, <h2>…, or <h6>), listing tag (<li>), or other block level tag. Table 1 lists some of the mostly common used character-level formatting tags.

Table 1 block-level character-formatting tags
<b>	Specifies boldface font
<cite>	Specifies citation content
<code>	Indicates program code
<em>	Adds emphasis to text. This usually renders the text in italics.
<i>	Italicizes text
<strong>	Specifies strong emphasis (renders as bold)
<sub>	Renders text as subscript
<sup>	Renders text as superscript

See table 2 for output of the use of each of the character-level tags shown above.

Table 2 character-formatting tags in use
Tag	XHTML Markup	Output
<b>	This is in <bold>	This is in
<cite>	Reference: <cite>scriptbuzz.com, accessed Apr 2002.</cite>	Reference: scriptbuzz.com, accessed Apr 2002.
<code>	<code>var x = 8 + 5 * 9;</code>	var x = 8 + 5 * 9;
<em>	<em>Super</em> fast	Super fast
<i>	This is a <i>test</i>	This is a test
<strong>	This redenders as <strong>strong</strong>	This redenders as strong
<sub>	This is sub<sub>script</sub>	This is subscript
<sup>	This is super<sup>script</sup>	This is superscript

When using these character-level tags keep in mind they must be placed inside block-level elements. You can not place a block-level element inside of a character level tag. Consider the following as an example:

Incorrect: <b><p>A sample small paragraph text.</p></b>

Correct: <p><b>A sample small paragraph text.</b></p>

With character formatting tags, you can emphasize individual letters or words. Avoid use of more than one character formatting tag around a particular block of text:

Italicizing text is <em><em><em>easy</em></em></em>. This is not making the output any extra italic.

Output:

Italicizing text is easy. This is not making the output any extra italic.

Adding horizontal rules

Like in HTML, XHTML has the <hr> tag to insert horizontal rules to break up long section of a webpage document. The <hr> tag is an empty tag meaning it does not contain any content. Simply insert the <hr> (more precisely <hr />. This represents both of an opening and closing tag in XHTML. Although little more markup, <hr> and </hr> are equivalently valid.) tag in your markup where ever you want the horizontal rule to appear on the web page. See the following as an example:

<h4>This is some heading</h4>
<p>Paragraph 1 text. This is a short paragraph. Here we are trying to show you to use the horizontal rule.</p>
<hr />
<h4>Section 2</h4>
<p> This is text separated from the top section with a horizontal rule. Horizontal rules are helpful for breaking up long sections of text with horizontal lines.</p>

As the output shows below, <hr> tag renders horizontal rules as a shaded line spanning the entire page width of the browser window.

This is some heading

Paragraph 1 text. This is a short paragraph. Here we are trying to show you to use the horizontal rule.

---

Section 2

This is text separated from the top section with a horizontal rule. Horizontal rules are helpful for breaking up long sections of text with horizontal lines.

Although you can customize horizontal rule properties with four <hr> tag attributes, the attributes deprecated in favor of use of cascaded style sheets. Table 1 shows the four attributes that can be used to control the appearance and placement of horizontal rules.

Table 1 attributes of the horizontal rule tag
Attribute	Purpose
align=”left”	Specifies left align
align=”center”	Specifies center align
align=”right”	Specifies right align
size=”N”	Sets horizontal rule height, measured in pixels, as specified by the number N.
noshade=”noshade”	Specifies no shading for the horizontal rule
width=”N”	Sets horizontal rule width, measured in pixels, as specified by the number N.
width=”N%”	Sets horizontal rule width (measured as percentage of browser page width).

Table 2 provides some examples of using horizontal rules attributes.

Table 2 some example of horizontal rules attributes in use
Markup	Explanation
<hr align="left" width="20" />	Sets horizontal rule alignment left & rule width 20 pixels
<hr align="center" width="50%" />	Sets horizontal rule alignment center & rule width is 50% page width
<hr align="right" width="425" />	Aligns the horizontal rule to the right of the page and the rule width is 425 pixels.
<hr size="10" />	Specifies the horizontal rule height size to be 10 pixels
<hr size="10" noshade="noshade" />	Specifies the horizontal rule height size to be 10 pixels but no shading.

The following shows the output of each of the markup shown in table 2:

Specifying line breaks — blank lines

Sometimes it becomes necessary to add a line break within a webpage. The effect of adding a line break to a web page is similar to pressing the enter key in a word processing software such as Microsoft Word. When you press the enter key in MS word, the current line is ended and the cursor moves to the next line. Similarly, when you add a line break into a webpage, the web browser renders that line break by ending the current line and starts a new line. If there is any content after the line break, the content will be automatically displayed on the next line. You may also add more than one line break for your web pages by simply using more than one line break tag.

Like in HTML, XHTML has the <br> tag to add a line break to a web page document. In XHTML, however, this tag must be closed; any one of the following versions are acceptable for adding blank lines to a web page:

1. <br></br>
2. <br />

In the first version above we open and close this tag separately. Because the <br> is an empty tag, we can open it and close it simultaneously as <br />. The <br /> tag is referred to as an empty tag because it does not contain any content inside. The shorter version saves you a few key strokes and still yields a valid XHTML document.

The following shows am example of the <br /> tag in use:

<p>
John decided to shop.<br />
He drove to a local shopping center.<br />
He discovered huge sales in his favorite stores.<br />
He went to a clothing store nearby.<br />
He purchased clothes for himself and his wife.<br />
He returned home.<br />
What did he say to his wife?<br />
Honey, I just purchased clothes...<br />
I saved over $1030 and spent only $375.<br />
Does she believe that?<br />
Time to see what is in the shopping bags.<br />
</p>

In this markup, we have added a <br /> tag to the end of each line. As a result, the browser renders this paragraph by placing each line on its own:

John decided to shop.
He drove to a local shopping center.
He discovered huge sales in his favorite stores.
He went to a clothing store nearby.
He purchased clothes for himself and his wife.
He returned home.
What did he say to his wife?
Honey, I just purchased clothes…
I saved over $1030 and spent only $375.
Does she believe that?
Time to see what is in the shopping bags.

Although you may add as many line breaks as you want to separate each line, it is suggested the use of style sheets to have more precise control over the amount of spacing used between lines.

Specifying fonts

Specifying fonts is one of the many ways to make your webpage customized to your tastes or project specifications. When setting fonts, keep in mind the possibility of the web user’s computer not having the fonts you specify. If this is the case, the computer may use fonts that may be unacceptable to you. If, for example, you specify to use font type Technic, it is possible the web user’s computer does not have that font available and the computer would use a substitute. As a result, your page may not look the same if the substituted font is drastically different form the original font type you specified.

To avoid this situation, choose fonts that are more widely available or supported with substitutes. If you are absolutely sure you want to use only one particular font and that font is not widely available on your user’s machines, you may consider making text as graphic. This will ensure your pages appear universally similar. However, this approach introduces new problems of its own. First of all, from a web usability perspective, a screen reader cannot read the text embedded in graphics. Secondly, text size cannot be increased if the text is embedded in graphics, like ordinary text on a webpage. Finally, depending on the how the graphic is constructed, it may take longer to download because generally speaking text is downloaded faster than graphics.

As another alternative, to partially overcome the problem of user not having a particular font is to specify more than one font. With this approach, you want to make sure your choices of fonts yield similar output on the browser. Otherwise, your font choices may yield drastically different outputs because of the font choices you specified. As an example, Arial, Helvetica, sans-serif, would be the ideal choice for specifying more than one font types. While on Windows Operating System, Arial type is available, Helvetica is available on both Macintosh and UNIX.

One you specify more than one choice of fonts, the computer uses the first one that is available from the lists while searching from left to right. If none of the font choices are available from your list, then, the computer uses the default font — again that choice may be unacceptable to you.

For your convenience, Table 1 lists commonly available fonts on Windows, Macintosh, and UNIX.

Table 1 equivalent fonts on three main Operating Systems
Windows	Macintosh	UNIX
Arial	Helvetica	Helvetica
Courier New	Courier	Courier
Times New Roman	Times	Times

Fonts traditionally were specified (you can still find pages) with the font tag and face attribute. For example,

<font face="Arial">

instructs the browser to render the text using the Arial font because that is the value specified with the attribute face. To specify more than one font (but normally upto three), simply separate each font choice with a comma. Your comma-separated list of fonts may read something like:

<font face="Arial, Helvetica, sans-serif">

This piece of markup instructs the browser to use the first font that is available, starting from left to right. If none of the fonts are available from your list, the computer will use the default font.

In favor of use of style sheets, the font tag has been deprecated. What that means is that the font tag use should be avoided and style sheets should be used instead to set up fonts for webpages. The following gives an example of how to set the same fonts choices using a style sheet specification:

<style>
p {font-family:Arial, Helvetica, sans-serif;}
</style>

With this specification, we are defining three font choices for a paragraph tag (p). The style tag contains our style specification. The style tag is placed inside the header tag. You only need one style tag to contain all of your styling information. In the following example, we are specifying number of font choices for some of the common tags used in XHTML:

<style>
strong {font-family:"Times New Roman", Times, serif;}
em {font-family:Georgia, "Times New Roman", Times, serif;}
cite {font-family:Arial, Helvetica, sans-serif;}
</style>

Notice in this example, we have surrounded the Times New Roman font choice with double quotation marks. This is necessary whenever the font choice name contains one or more space characters.

Using colors

With the addition of colors, web pages look attractive and allow emphasis of web content. You may add special colors to text and/or background. You even can use colorful graphics to enhance the appearance of your web pages. When choosing colors, strive for maintaining readability and visibility of the web content/elements. If the color choices make it difficult for the web users to read or view the content, they may avoid using your website in the future.

Although you may spice up your pages with attractive color schemes, it may not render consistently in all browsers as users may override your color settings. (Also, monitor settings may affect color display.) Web users have the option of customizing their browsers to use specific colors that they like. Also, keep in mind some browsers are text-only, meaning they only display white, black, and gray colors. Despite these drawbacks of use of colors, they can be used safely. Without colors, your website may be perceived unattractive. Use of colors helps web designers to create webpages into a cohesive website.

How do you decide on what colors to use? Specific color schemes may be dictated by:

• your organization
• client, or
• your own preferences

If you are not sure what colors to use, try looking at the available color choices. Then, choose the ones that you may think will work best. You probably can change colors later if your first choice turns out less superior than the next one.

Specifying colors

Specifying colors in XHTML is very similar to how it’s done in HTML. RGB numbers are used to specify the choice of color you want to use. The acronym RGB stands for Red, Green, and Blue. RGB uses the hexadecimal format and combines portions of red, green, and blue colors. RGB color specification uses six digits: first two digits for red, the next two digits for green, and the last two digits for blue. With this format specification, there are millions of color possibilities though choose color combinations RGB to maintain readability of the web content. (See web safe color page for more information.)

The web safe colors are produced using the values 00, 33, 66, CC, or FF for each color choice. According to this color scheme, we end up with 256 color combinations. See Table 1 recommended safe colors.

Table 1 recommended sage web colors
R (red)	G (green)	B (blue)	Color intensity
00	00	00
33	33	33
66	66	66
99	99	99
CC	CC	CC
FF	FF	FF

To create web safe colors from table 1, simply:

1. start with a pound sign (#) to indicate the hexadecimal format
2. select one color value from each column from left to right

As an example, assume we want to use the color red. For this choice, following each step outlined above for creating web safe color gives us:

1. Step 1: #
2. Step 2:
   1. FF from R
   2. 00 from G
   3. 00 from B

Our final RGB value is #FF0000, where FF represents the most use of a color and 00 represents absence of a color. In this specification, we have indicated, we want most of red but no green and blue. As a result, we get the purest red possible. In a similar fashion, we can obtain purest the green by using 00 for R, FF for G, and 00 for B. The resulting hexadecimal value for green is #00FF00. Finally, purest blue can be obtained by using #0000FF. In this case, we are saying no red, and no green but use only blue.

Linking Documents

Everything else we have discussed in this section of XHTML, we dealt only defining the structure of the document but the discussion has not yet mentioned the hypertext capability of the XHTML language. Although the language is new, the idea about using hypertext is not. In an article published in 1945, titled “As we may think” Vannevar Bush articulated the use of a nonlinear structure to find the desired information from exponentially growing information storage house. He did not call his idea “hypertext” neither he imagined the use of World Wide Web (WWW). He proposed something called Memex but many of then computer scientists could not come with an application for its use.

In the 1960’s, Ted Nelson expanded on Bush’s idea and created the early form of technology called hypertext. Nelson realized the technology could be used as computer-aided instruction as it allowed students to navigate through topics. To understand the early use of Nelson’s approach to this technology one needs to understand the meaning of “hypertext”. So what does hypertext mean? The prefix “Hyper” in Hypertext means links, and the “Text” part in Hypertext means text. So the idea is hypertext facilitates document exploration in a nonlinear fashion. Without hypertext, documents could only be accessed from top to bottom. You could not, for example, start from the middle without having accessed top (or bottom) first. With proper links in place, documents could be accessed from anywhere just like you can turn to any desired page of a book.

XHTML supports linking of documents as you may have used (activated or clicked) links prior to finding this page on the WWW. Once a link is constructed, the linked document can join the global information space of the WWW. Without links, the WWW may not be very useful because the internet would become just an information storage warehouse as we won’t be able to navigate to explore internet resources. But we can with links. Links not only allow us link documents but they also help identify documents on the WWW. Because each document has a unique address (known as the uniform resource locator, or simply URL), it is possible to link to any document without any ambiguity.

Given the explosive growth of web documents, Web surfers would be lost in the hyperspace if there were no links or links that did not work!

Please access these pages for information about creating links in XHTML:

• Basics of links
• Understanding URLs
  • Understanding and using folder names (directory names) in URLs
  • file names in linking
  • URL types
• Relative URL linking
• Linking to files on the World Wide Web
• Linking to files in the same directory
• Linking to files in a different directory
• Linking to a specific section of a web page

Basics of links

To define links in XHTML, the anchor tag, <a> is used. Links allow you to jump from one document to another. The href attribute is required to define the anchor because it contains the destination document. To make a link, you need the following pieces of information:

1. anchor tag
2. href attribute set to the destination of your document
3. text or graphic that will be used to activate the link

The opening anchor tag starts the instruction of a link definition. The href attribute is placed inside the opening anchor tag. The attribute set to the URL of the target resource or the landing page. So if you want to link to scriptbuzz.com, you would set href=”https://www.scriptbuzz.com”. To make the link navigateable, you also need link text (or image if you want to set up an image as link). The link text is also referred to as “hot spot.” Figure 1 shows the main parts of a typical link syntax.

As figure 1 shows, a link has five parts:

1. the opening anchor tag
2. the href attribute to set the destination address of the document
3. link text, images, or mixture fo the two. This is needed to activate the link
4. URL – this is the destination or landing page
5. closing of anchor tag

If you are missing one or more of these elements in your link syntax, your link is likely not to work properly.

Link rendering

The following shows an example of creating a link:

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

This link creates an anchor to the homepage of Google. The link text is Google. This is what will appear in the web browser to activate the link. In other words, this is the text that will be clicked to visit Google. Web browsers, by default, display the text links as blue and underlined. See figure 2. Image links, on the other hand, appear with a blue border.

Above the word “Google” is displayed as blue and is underlined. The link text (“Google”) has rectangle around it to distinguish it from other links, which are displayed using other styles.

Because the link is placed on this web page, this page is referred to as the originating document. A linked document, on the other hand, is the destination site or document. In simple terms, think of originating document as from which the link is pointing, and think of destination document as to which the link is pointing. So from which document the link is created, it is referred to as the originating document.

Understanding URLs

The URL is an acronym that stands for Uniform Resource Location. It represents an address of a document available on the World Wide Web (WWW). Although a URL of your favorite website may look long and complex, it simply consists of four basic parts:

1. protocol
2. hostname
3. folder name (also referred to as directory), and
4. file name

Each of these four parts have a specific purpose. Read below for more. See figure 1 that shows the anatomy of a URL.

Figure 1 showing four basic parts of a URL: protocol, hostname, folder name, and file name

Protocol

You probably have heard of the protocols such as http, ftp, telnet, and so on. But you may have wondered what all these protocols are about? A protocol can be defined as a computer language that allows computers to transfer information. More specifically, a protocol tells the browser how to negotiate resource-specific services. For example, the web browser uses the http (Hypertext Transfer Protocol) to contact the web server and retrieve the appropriate content. Similarly, a FTP client uses the FTP (File Transfer Protocol) to send and receive files to and from a server.

The most commonly used protocol is http. As you may have realized, it is used in links to indicate where a specific document is located on WWW. It is also used to retrieve document from the WWW. Given the exponential growth of web documents and web sites in a short period of time, http has become one of the popular protocols in use today.

Although less frequently used than http, ftp and other protocols are also often invoked by hyperlinks. See table 1 for some of the common protocols that can be used in links.

Table 1 commonly used protocols
Protocol	Protocol indicator	Description
ftp	ftp://	allows downloading of files from a remote FTP server
file	file://	Allows accessing of files from local hard drive
gopher	gopher://	Allows access to documents located on a gopher server
http	http://	allows access to documents located on the web
mailto	mailto:	although it is not a standard, most browsers supports it to open user’s email client
news	news:	this protocol is used to connect to USENET newsgroup
telnet	telnet://	This protocol allows a telnet session to a telnet host

As the table indicates above, if you wanted to make link to a local document, you would use the file:// protocol indicator. The use of the file:// protocol indicator will instruct the web browser that the file is on the local machine. Similarly, if you want to link to a file on a FTP server, you would use the ftp:// protocol to instruct the ftp client to access a FTP server.

Hostname

A hostname is the name of a server that holds web related documents. Each web server has a specific address (specifically, IP address). Examples of hostname include www.google.com, www.yahoo.com, and www.scriptbuzz.com. Each of these has a specific IP address 72.14.215.104, 209.191.93.52, and 64.40.96.247, respectively. It is not surprising that IP addresses are more difficult to remember than hostnames. Do you access Google.com or your favorite website by its IP address? Chances are you access websites by their hostname rather than an IP address. When creating a link, a host name is used rather than IP address. When a hostname used to access a website, it is automatically routed to the corresponding IP address.

Folder name

A folder name is the chunk of information that follows a hostname. A URL may contain zero, one, or more folder names. A URL directory is a folder name in the URL. In the URL www.google.com/aboutus/goog.htm, aboutus is the folder or URL directory name.

This page provides more information on folder names to help you with constructing links in XHTML.

File name

For the proper functioning of a URL, it requires a valid file name. Not only file name indicates what item you want to access from the server but also instructs the server how to handle a specific file. For instance, an ASP type file would require execution on the server while a .JPEG or HTML file can be sent to the client without having any processing take place on the server.

Please access this page to read more on use of file name in URLs.

Relative URL linking

A relative URL is a shorthand form of a URL. With this shorten version of the URL, various parts of the web site address such as the protocol, domain name, and directory is inferred by the browser based on the URL of the current document or through the location specified in the <base> tag. When do you use a relative URL for linking purposes? A relative URL can be used whenever you want point to a file that is located in the same folder and on the server as the originating file. An originating file is the file that contains the link. A destination file is the file to which a link is made. See table 1 for example of relative URL representations.

Table 1 relative URL linking representations
Originating file (linking from)*	Destination file (linking to)*	Resulting relative URL to use
google.com/index.htm	google.com/contact.htm	contact.htm
msn.com/index.htm	msn.com/ads/xhtml.htm	ads/xhtml.htm
msn.com/ads/xhtml.htm	msn.com/index.htm	../index.htm
msn.com/ads/xhtml.htm	msn.com/go/news/latest.htm	../go/news/latest.htm
* Each URL example should have http://www. in front. For space saving, this information is omitted above.

The following shows XHTML anchor code to use for each of the examples shown in table 1:

<a href="contact.htm">Contact</a>
<a href="ads/xhtml.htm">XHTML Ads</a>
<a href="../index.htm">MSN Home</a>
<a href="../go/news/latest.htm">Latest news</a>

Notice above our XHTML code does not specify the protocol (http://), and the website address (www.google.com or www.msn.com). There is no reason to use the full address (http://www.google.com or http://www.msn.com) when making a relative link within the same website because this information is automatically inferred by the web browser. As long as you omit the protocol and the web site address, the browser will assume it is a relative link. That means the browser looks for the destination file of your link within the same website (and even same folder). This scheme works for all relative links.

Let’s briefly discuss the process involved in making a relative link for each of the example shown above. Please review file system hierarchy and linking if you are new to learning how the directory structure is used in the context of web development.

The first example appears to be simple for linking purposes as it does not use a directory. The file from which we want to link has the URL http://google.com/index.htm and the file to which we want to link has the URL http://www.google.com/contact.htm. In the URL for both of these files what is common is the protocol and the website address: http://www.google.com. As such, we only need to reference the file name in our anchor tag because the browser will infer the full website address when the link is activated. See figure 1 for directory structure for this example.

Our second example is slightly different but may seem complicated as it involves directory information. In the example, originating file is http://www.msn.com/index.htm and the destination file is http://www.msn.com/ads/xhtml.htm. Both of the URLs contain http://www.msn.com therefore this information can be omitted for constructing our relative link. Because we want to move one directory down of the root directory (see this page for discussion of, we need to use the directory name we want to move to (which is ads). The syntax ads/ accomplishes moving down from the root directory (http://www.msn.com/). Once our present location is ads/ we want to move to a file called xhtml.htm in the directory. This is precisely what our link syntax (ads/xhtml.htm) is accomplishing. See figure 2.

Our third example is interesting because here we want to do is just the opposite of what we did in example 2. In words, we want to move up a directory from http://www.msn.com/ads/xhtml.htm to http://www.msn.com/index.htm. The syntax for moving up a directory is two dots and forward slash (../). If you need to move one or more directories up, use this syntax for each such movement. In the example, we only need to move one directory therefore, we use ../. However, don’t forget the page to which we want to link to, which is index.htm. Consequently, the final anchor tag syntax is <a href=”../index.htm”>MSN Home</a>.

See figure 2 below.

Our fourth example may appear to be more complex than other three examples. In this example not only we want to move up a directory but also couple directories down. We want to make a link from http://www.msn.com/ads/xhtml.htm. Notice the URL indicates xhtml.htm file is in a directory: ads. Because we want to make a link to file outside of this directory, we must use the proper syntax to move to that directory. Specifically, we need to use ../ to move up to the root directory (http://www.msn.com/). Once there, it is just matter of moving down to the specific location of destination file. Our destination file is located two directories down from the root directory. Therefore, we need to use the directory name and a forward slash for moving one level down, as go/news/. Lastly, we need the destination file name, which is latest.htm. So our anchor tag contains the resulting link path as: Latest news. See figure 3.

Beside relative URLs being short, they help make the website transportable. Because the protocol and website address is not used in relative URLs, a website can be deveolped on one server and moved to another without ending up with broken links. If you use the full URLs, however, you may need to change the linking paths as the website address may have changed.

Use of relative URLs also has some notable downsides. First of all, they become confusing for a large website. For instance, ../../../index.htm could be confusing and may take some time to figure out the exact site structure. Secondly, if you are not using software such as Dreamweaver, you may end up with broken links if you make changes to the directory structure of your website. For instance, if you rename or move directories, you may end up with broken links. In these cases, realize even if you had used absolute URLs, you will still have broken links. To avoid broken links, make sure to not to make changes to your directory structure, if you do, remember to check for and fix any broken links.

Linking to files on the World Wide Web

Linking to files on the World Wide Web (web) requires the use of the full URL (or absolute URL). The full URL includes the protocol, domain name, directory name (if any), and the file name to which the link is made. All of this information helps the browser to find the destination file.

It is a good practice to check that the destination file is available as it may be on a website that you are not responsible for maintaining. If the destination file is moved, deleted, or renamed, the link to that will file no longer will work because your link path will contain outdate link information. When a user requests a file that no longer exists or perhaps because of invalid link path information, the web server will return the familiar 404-file not found response.

Constructing links to files on the web is a very straight-forward process. If you can visit a website, you are likely to be able to create a link to that website. Let’s look at the steps involved in creating a link:

Steps	XHTML markup
1) Start by opening an anchor tag	<a>
2) Insert the href attribute	<a href=””>
3) Specify the URL of the destination file or website inside double quotation marks	<a href=”http://www.google.com“>
4) Specify text or graphic that will be used to activate the link	<a href=”http://www.google.com”>Google
5) Close the anchor tag	</a>

These steps results in the following markup:

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

This shows the output of our markup:

Google

Figure 1 shows the two servers involved in making this link possible.

The five steps outlined above will help you link to any file found on the internet. Interestingly, out of the steps mentioned, the only information that will change from one link to another is the value you specify for step 2 and 4. The other syntax of the markup will remain the same regardless of the destination file or website to which you want to link. So if you wanted to link to msn.com instead of Google, your anchor markup will change to:

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

Linking to files in the same directory

Making links to files in the same directory (or folder) is a straightforward process because you only need to specify the destination file name. When linking, anytime you don’t specify the full URL of a destination file, it is considered a relative URL (or simply relative link). A relative URL is relative to what? A relative URL is relative to the current directory. Both the originating file (linking from) and the destination file (linking to) must be in the same directory for the link functionality to work correctly.

Figure 1 shows some documents in a directory called products. Linking to any one of the files in the product directory requires only the file name. The protocol, server name, and directory information is not needed in linking because both the destination and the originating files are in the same folder. To link, for example, from PDAs.asp to printers.asp, the anchor tag will consist of:

<a href="printers.asp">Printers</a>

From this syntax, the browser will automatically infer the protocol and website address to construct the full URL.

Table 1 below shows the different combinations of linking to various files in the products directory. It is important to understand that the link syntax discussed on this page specifically instructs the browser to look for the destination file in the same folder. So this syntax should be used only when linking to files within the same folder. If your link destination file is outside of the present folder (where the originating link file resides), consider using relative links to files in different directories or use absolute links if the destination file is on a external website.

Table 1 linking to files within the products directory
Linking from	Linking to	XHTML link syntax
PDAs.asp	printers.asp	<a href=”printers.asp”>Printers</a>
PDAs.asp	laptop.asp	<a href=”laptop.asp”>Laptop</a>
printers.asp	PDAs.asp	<a href=”PDAs.asp”>PDAs</a>
printers.asp	laptop.asp	<a href=”laptop.asp”>Laptop</a>
laptop.asp	PDAs.asp	<a href=”PDAs.asp”>PDAs</a>
laptop.asp	printers.asp	<a href=”printers.asp”>Printers</a>

Linking to files in a different directory

Within your website, to link to a file that resides in a different directory (folder), you need to specify the directory name and the file name. You don’t need to specify the full url of the destination file (to which the link will point to). You only need to use a relative URL (or relative path, more precisely)-it is relative to the file where the link will be placed.

For instance, assume we have two directories created on this server and accessible as: http://www.scriptbuzz.com/xhtml/, and http://www.scriptbuzz.com/ASP/. Further assume we want to link from a file inside the XHTML directory to a file in the ASP directory. To do this, you only need to specify the following link path:

../asp/file_name.asp

Our directory structure for this linking example is illustrated below:

Let’s briefly go over this relative linking path. In this linking path, the “../” instructs the browser the destination file is outside of the current directory (XHTML). Please see this page for a review on Relative URL linking. Next, the ASP specifies the directory name of the destination file. Finally, the file_name.asp is the destination file name inside the ASP directory.

How will the browser determine the final destination file when we only are specifying a relative linking path. From the above partial URL syntax (or relative link path), the browser is smart enough to determine the full URL of the destination document. Specifically, if the browser’s current page is http://www.scriptbuzz.com/xhtml/some_page.asp (this is the file where the link path is inserted, let’s simply refer to this file as the source file), the browser will automatically infer http://www.scriptbuzz.com/ to obtain a full URL (absolute URL): http://www.scriptbuzz.com/ASP/file_name.asp . Notice in our linking path we did not specify domain name or protocol information while the browser inferred this information on its own. The browser will correctly infer the full URL as long as you specify a correct relative path in your source file. If you use an incorrect file path, the browser won’t correctly predict the URL to your destination file. Let’s work with an example to make this point.

Assume the information used in the previous example is still valid except now we omit “../” (resulting in asp/file_name.asp) in the link path (in the previous example our link path was ../asp/file_name.asp). What is our resulting absolute link, as the browser sees it? The resulting absolute link will be http://www.scriptbuzz.com/xhtml/ASP/file_name.asp instead of http://www.scriptbuzz.com/ASP/file_name.asp. Because we did not specify “../” in our second example, the browser is instructed to find the ASP directory inside the XHTML directory. If the ASP directory does not exist inside the XHTML directory, which it does not in this example, we are left with a broken link (meaning the browser won’t be able to access the destination file as it does not exist!). To avoid this problem, make sure your relative link path is correctly pointing to the destination file.

So what is the XHTML syntax for making a link to file outside of the current directory? To make a link, we need four pieces of information: an opening anchor tag, valid relative path to the destination file, clickable text or graphic that will activate the link, and finally, the closing anchor tag. The following shows the complete anchor tag for our original link:

<a href="../asp/file_name.asp">An ASP Page</a>

Linking to a specific section of a web page

In XHTML, you can link to specific parts of a document, in addition to linking to other documents. Linking to specific locations of a web page is known as reference links. Why would we consider linking to a specific part of a web document rather than a document? The former allows you to link to a specific line on a page, which is useful, for instance, when you have a big page that you want the user to navigate by clicking on certain links that are pointing to specific headings (or sections) on that page. In the latter linking approach, your link will point to just top of that huge page, not to individual sections on that page.

So reference links are used when you want the web user to see, at the very top of the browser window, some specific area of a web page. If you use a regular link instead, your destination file may not even show what you intended to show, especially when webpages are long. With reference linking, there is a potential for the web user to get the sense that the linking is not working. How? If your destination page (the file to which you are linking) is short, meaning the content of the page fits in the browser’s window without vertical scroll bars, the browser can’t show the specific area of your reference link as everything is fitting on the screen!

To avoid this problem, our suggestion is that you first make sure that your destination reference area can be shown at the very top of the page. If your reference point area is in the middle of the page, or at the bottom of the page (when you have fully scrolled down on the page, if there are any scroll bars), the reference point link is not suitable in this case, as again the reference point area is not at the top. (You may add more content to the bottom of your reference point area to ensure that the reference point is moved up.)

Remember regardless of the type of link used, when activated, it should immediately do something (i.e., show the destination page or reference point area at the top of page) for the user.

One of the common uses of reference links is to point links to the top of the page. For instance, when the user reaches the bottom of a page and wishes to reach to the top of the page, you may create a reference link to help. At the bottom of the page, you can create a link that reading as “Top”, or “Top of the page”, or a graphic with arrow up and when this link is clicked, it shows the very top of the page. If you did not provide the optional reference link for your page, the user would have to use scroll bars (or Up key from the keyboard) to reach the top. With the reference link approach, use of scrolling is no longer necessary to reach the top.

So how do you create a referece link? In two simple steps. To make a link to a specific location of a web page, follow these steps:

1. make sure the area you want to link to is showing up on top of the page (preferably as the first line). If it is, define a reference point-this is the specific location to which the link is made. Your reference point would be defined on the top of the page.
2. make a link to that reference point. This step creates the clickable link.

For defining the reference point in XHTML, use the name attribute with the anchor tag. Use of the name attribute to define a specific area of a web page is sometimes referred to as a named anchor. Named anchor represents the target link location. The following shows an example of creating a named anchor:

<a name="Top"></a>

Named anchor needs to be placed on the web page where you want the user to go after he/she clicks on the link. In the example above, our named anchor needs to be placed at the top of the page as our target link location is top of the page. Note this does not create a link; it only creates a reference link (or defines link target area). In fact, a named anchor is not even shown on the web page! So it is NOT something that the user will click on.

So how will our link work if the user can’t see it, let alone clicking it? We need to create the actual clickable link that points to our named anchor. If you recall, links are created with the href attribute, inside the anchor tag. Instead of specifying a document (or a website address) in the href attribute, we will use our named anchor. (Note we need the named anchor created first, which we did in the first step, before the link shows its working.)

To instruct the browser you are linking to a reference point and not to a document or website, use the pound sign (#) before the named anchor. So our anchor tag will look something like this:

<a href="#Top">Top of the page</a>

This scripting syntax accomplishes our clickable linking part for step 2. See the below graphic for a summary of what we have done.

This example showed you how to link to a reference point within the same page. Many other times, you want to link to a reference point that is outside of the current web page. As with any links, a link needs to be pointed correctly to the destination source for it to work. If your link does not include the correct path or URL to the destination source, your link won’t work. (Your link will also not work if the destination source named is changed, removed, or becomes unavailable).

Making a link to a section of a file outside of the current file but within the same folder

By default, if you enclose just the anchor name after the pound sign in your anchor tag, the browser searches for the destination link section within the same document. But there are times you want to link a section that is not in the current file. If, for example, you have a glossary section in your website and you want to link to a specific term from many pages, you will need to create a reference link to that term to avoid having multiple copies of the term at multiple places.

For creating reference links outside the current file but within the same folder, you will also need to know an extra piece of information: knowledge of creating links to files within the same folder. Recall (or please see this section for review) if your destination file and the source file are in the same folder, you only need to specify the destination file name in the link path of your anchor tag. To create a reference link to a section outside of the current file, specify the destination file name and then the anchor name. The following shows some examples:

	Code	Description of the code	Location file of the code
Example 1	<a name="xhtml_code"></a>	Defines a reference point named xhtml_code	page1.htm
	<a href="page1.htm#xhtml_code">XHTML Code</a>	Creates a clickable link to our reference point	page2.htm
Example 2	<a name="myTermX"></a>	Defines a reference point named myTermX	glossary.htm
	<a href="glossary.htm#myTermX">Term X</a>	Creates a clickable link to our reference point	page_b.htm

In the first example above, a link is created from page2.htm to a reference point defined in page1.htm. Rememeber the user will see no output of the reference point definition (<a name=”xhtml_code”></a>) as this code does not produce any output to the screen. On the other hand, for page 2, the output for <a href=”page1.htm#xhtml_code”>XHTML Code</a> is simply a clickable link reading as XHTML Code. When this link is activiated, the user’s browser is directed to the specific section designated as the reference point in the page1.htm file.

Making a link to a section of a file outside of the current folder

This type of reference link requires you to know how to make links to files outside of current folder as well as knowledge of making reference point links. Basically, to make such a link, simply include the relative file path (folder name(s) and file name) to the destination file having the reference point. (Access this page if you need help on linking to files outside of current folder.)