Breadcrumbs

Too Easy XHTML - Even More Tags [4]

In Part 3 we looked at some basic XHTML tags that are essential in web design. In Part 4, we are going to look at extended tags to further enhance your capabilities including defining images, links, and headers. We will also look at entities and learn their importance in a properly structured web page.

XHTML Entities

Various symbols and characters have a special meaning in XHTML, and if you want to properly print them to the screen, you have to use character entities. A character entity represents a character or symbol defined by the entity's name or number.

An entity has three parts - an ampersand (&), an entity name or number, and finally ending with a semicolon (;). Entity names are case sensitive, so make sure that you use the proper name/number.

Code: XHTML

&

The above entity will return the common ampersand. There are many XHTML entities. For the most browser compatibility you'll want to use the entity's number over its name. Not all web browsers have proper entity name support, so it's best to be on the safe side.

Failing to use the entity of the actual symbol can lead to browser errors and is invalid XHTML. Make sure to use entities for symbols and validate your page with the W3C for reassurance.

Defining Links

Links make the web go 'round. In order for your visitors to navigate around your website or to other ones, you're going to need to define links (commonly known as hyperlinks). Defining links are done using XHTML's anchor (<a>) tag:

Code: XHTML

<a href="http://www.lowter.com">link text</a>

Anchor tags use the href attribute to define where the link will direct the user. The element content, held within the <a> tags, is the text that will be displayed. When a user clicks on the text it will direct their page to http://www.lowter.com (external link) .

Image Tag

A picture's worth a thousand words. Web graphics are good for spicing up your web page and improving its presentation. Images are defined in XHTML using the <img> tag:

Code: XHTML

<img src="logo.gif" alt="Lowter.com" />

When using XHTML Strict, all image tags must have two attributes - src and alt. The src attribute sets the location of the image file. The alt attribute sets the text to be displayed if the image fails to load. Also make note that your image tags self close.

Designers often have varying opinions about what to place for alt values. Alt values are extremely important in web page accessibility, along with visitors browsing in a text-based browser. If the image doesn't load the alt text will be displayed, or when the page is read by a screen reader. It is up to you in deciding how you will translate an image's importance to words.

Header Tags

XHTML comes equip with six header tags to define important text. Header tags are useful when styling with CSS, but are more organizational when used without styling.

Code: XHTML

<h1>First Header</h1>
<h2>Second Header</h2>
<h3>Third Header</h3>
<h4>Fourth Header</h4>
<h5>Fifth Header</h5>
<h6>Sixth Header</h6>

Each header tag is displayed a different size, so you can differ a header's importance. Each header gets smaller going from <h1> as the largest, to <h6> as the smallest. Headers are useful when you are defining sections of a larger page, enabling visitors and search engines to easily scan and find what they're looking for.

Setting the Base URL

XHTML enables you to set the base URL for all images and links in your document:

Code: XHTML

<base href="http://www.lowter.com/images/" />

The self-closing <base> tag has one attribute, href, which you set as the base URL for the page. Now if there was logo.png in the images directory I can use an image tag to define it:

Code: XHTML

<img src="logo.png" alt="Lowter" />

If I had excluded the <base> tag, I would use (depending on the document's location):

Code: XHTML

<img src="http://www.lowter.com/images/logo.png" alt="Lowter" />

The advantage of the <base> tag comes when you have a larger document with many links and images and you have less to remember, making your job slightly easier.

Page Anchors

Anchor tags have one last use, page anchors. Page anchors set links to a certain area on a web page. You simply declare a page anchor using the id attribute:

Code: XHTML

<a id="area1">Section 1</a>

Then we could go tohttp://www.lowter.com/index.php#area1 (external link) and the page would scroll down to where the anchor lies in the page. Using the hash/pound symbol you go to the location of the page anchor.

Some older browsers don't support the id attribute of anchor tags, and prefer the use of the name attribute. If you feel the need to support older browsers then you can use both attributes:

Code: XHTML

<a id="area1" name="area1">Section 1</a>

This ensures that your page anchor will work in older and newer browsers and still validates as XHTML Strict.

Summary

In Part 4 you've learned how to define links and image in your XHTML document. You've also looked at XHTML header tags and setting the base URL for links and image. In Part 5 we will look at making various types of list in XHTML.