XHTML | HTML to XHTML

Beginning XHTML

This tutorial introduces XHTML. It does not assume current knowledge of HTML. If you are an experienced user of HTML, and want to merely learn the differences between HTML and XHTML, then you may want to visit the HTML to XHTML discussion.

Introduction

XHTML stands for Extensible Hypertext Markup Language. It is a set of tags used to structure a document, usually for display on the World Wide Web. The standard for XHTML is maintained by the World Wide Web Consortium, or W3C for short.

XHTML is the latest generation of HTML (Hypertext Markup Language). HTML is also used to mark up documents for display on the Internet, but as time passed, more and more HTML tags and attributes were geared towards page formatting and presentation. This left HTML documents cluttered with often hundreds of tags such as font which are difficult to maintain.

Not only that, browser software were implementing custom tags for formatting, so a page marked up using those tags would look sharp on one browser, but not so good on another. This led to web authors having to do some pretty heavy scripting to be able to maintain a consistent appearance of their pages across the more popular browsers.

XHTML reverses this trend, focusing once again on document structure. Cascading Style Sheets (CSS) were introduced as the new method to customize formatting and placement of document elements. This results in smaller, more readable html files. From a webmaster's point of view, it is also much easier to maintain a website's look and feel using CSS instead of having to update numerous HTML formatting tags and attributes.

This tutorial will only cover tags included in the XHTML 1.0 Strict specification, building a page that conveys information on our solar system. This specification deprecates (no longer uses) many of the old formatting tags and attributes used in HTML. While there is an XHTML specification that is more forgiving (XHTML 1.0 Transitional), it is a good idea at the start to begin working with the Strict specification. For one, it will position your pages for future standards. With the absence of the formatting tags and attributes, to customize a page's appearance, one must use CSS. To me, this is a good thing. CSS is quite adequate in formatting presentation, in a much more powerful and flexible way than the old methods of HTML presentation tags and attributes.

Tags used to create forms and events (such as mouse-related events) will be covered in a later tutorial.

The main page we will be building will be a page on the solar system. It will look rather plain without any additional formatting, but applying styles as covered in the forthcoming CSS tutorial will result in a more stylish presentation.

If you don't intend to learn CSS, then this tutorial is probably not for you, since what you will learn here without using CSS will result in some pretty bland web pages. However, there are many WYSIWYG (What you see is what you get) web page editors that will create not only the HTML or XHTML, but the CSS stylesheets as well. This tutorial is for those who eventually want to learn the nuts and bolts behind building a web page, and it is best to understand the underlying markup first before proceeding onward.

Getting Started

You will need at least a text editor and a browser to work with XHTML. I would also recommend as you are learning to have a reference handy as you work. There are many books on XHTML/HTML, but at least for me, an online reference has been sufficient, such as the Web Design Group's HTML Reference. Whichever reference you choose, be sure to use one that is not too dated (must be at least for HTML 4.0) and indicates strict vs. non-strict elements and attributes.

Pick a browser that supports most W3C standards. I'd say pick one that supports all the standards, but as far as I know, there isn't one that supports them all yet. A comparison table of several popular browsers can be found here.

I personally use Mozilla 1.7 for everyday use, but also test my pages using Internet Explorer 6.02. However, Netscape and Opera, both of which I've used in the past, have also shown decent support of the W3C standards. Mozilla, Internet Explorer, and Netscape are free downloads. Opera, which is arguably the best browser on the market, is not free, unless you wish to run an adware (not popups, at least) version. I really liked Opera, and would probably use it as my browser of choice, except I hate adware and I just can't justify spending forty dollars to buy a browser. But if you have money to burn, or don't mind the banner ads, I'd recommend giving Opera a try.

To create image maps, you will at least need software that displays x and y coordinates of an image. In this tutorial, I will provide the coordinates needed for the image map we will be using, but for your own pages, you will need some kind of software. Most graphics editors will do this, such as Adobe Photoshop and Paint Shop Pro, but MapEdit is an inexpensive alternative if all you want to do is create image maps.

Next chapter - A Basic XHTML Page

Beginning XHTML

Table of Contents

Introduction

Getting Started