Practical
HTML, CSS and XHTML

Topics on This Page

What is HTML?
What is CSS?
Our Changing World
Common Browsers
Structure vs. Format
A Period of Transition
What is XHTML?

What is HTML?

HTML (HyperText Markup Language) is the language that is used for producing web pages.

Here's an example of some HTML code. It describes a headline and a paragraph of text. Things like headlines and paragraphs are called elements and are indicated by means of tags. Tags have the format <name> where name is the name of the tag. Tags can include attributes such as the align="center" in the <h1> tag of this example.

<h1 align="center"> Jackie Smith Arrested </h1>
<p>
  35-year-old Jackie Smith was arrested after a mechanic reported
  to police that 18 packages of marijuana were packed in the engine
  compartment of the car which she had brought to the mechanic for
  an oil change.  According to police, Smith later said that she
  didn't realize that the mechanic would have to raise the hood to
  change the oil.
</p>

When the browser formats this code for display, it will look something like this:

What is CSS?

CSS (Cascading Style Sheets) is a separate style language that works in conjunction with HTML to describe the formatting of various elements in the document. HTML contains tags that define the structure. CSS gives formatting properties to the tags. Here's an example of some CSS code that will make the headlines appear as red and the paragraphs as blue:

h1 { color: red; }
p  { color: blue; }

Our Changing World

When Mosaic, the first web browser, was introduced, it provided a whole new capability to computer users. Documents could now be placed on the internet, and users could display these pages. HTML code was used to format these documents.

This early version of HTML was very limited compared to the HTML that's supported by more recent browsers. Computers have become much more powerful, and most people can connect to the internet with much faster connections than were available when Mosaic arrived. In turn, browsers have gotten more and more powerful, and have added more and more cabilities to the HTML language.

The growth of HTML has been largely unplanned and uncoordinated. Each time a browser manufacturer brought out a new version of a browser, new features would be added. Each different browser version, therefore, understands a somewhat different version of HTML than do all other browser versions. When a new tag is introduced, browsers that don't recognize that tag simply ignore it.

An organization named the W3C is responsible for defining an HTML Standard. The W3C has not traditionally introduced new features into HTML itself. Instead, it reviews the various features that have been introduced by browser manufactures and adopts the features that seem most useful into the standard. The standard therefore tends to trail behind the HTML that is supported by actual browsers.

Common Browsers

The most common browser in use today is Microsoft's Internet Explorer, which is often referred to as to as MSIE or simply as IE (I'll use both abbreviations at times). At the time of this writing, IE 5.5 is the most recent version of IE (IE 6 is available as a beta). In the United States, somewhere around 80% of the users of the internet are using IE 5 or IE 5.5. Another 10% or so are using IE 4. Fortunately, there are very few differences in the level of HTML and CSS support among these versions. If your web pages can be displayed well in IE 4 and newer, you'll be providing for around 85-90% of your American visitors.

The next most common browser in use today is Netscape. You'll sometimes see Netscape refered to as NN (Netscape Navigator) or as NC (Netscape Communicator), but I'll spell out Netscape whenever I talk about it. Somewhere around 5-10% of American users are using Netscape 4, so if your pages display well in Netscape 4 as well as IE, you'll be providing for around 95% of your American visitors. Many of the Netscape users are running under Unix or Linux, for which IE is not yet available. Others simply prefer Netscape to IE, or have been using Netscape for a long time and don't want to bother to change.

Netscape 6 is the long-awaited successor to Netscape 4. At the time of this writing, it has not been available for very long, and the early version that is available has a number of problems that are preventing widespread use of it. If AOL is able to fix these problems, Netscape 6 might well become widely-used. It's strength is that of supporting nearly all of the HTML and CSS standards, being one of the first browsers to do so.

About half of the remaining users are still using version 3 browsers: IE 3 and Netscape 3. These browsers don't support many of the newer features of HTML and CSS (Netscape 3 doesn't support CSS at all). Many people using these browsers are doing so because they have older computers that can't handle the much larger newer versions. Many public institutions such as libraries and schools are using these simply because they don't have money available to upgrade to newer equipment. A much smaller segment still uses even older browsers. (If your target audience is an International rather than a United States audience, you'll proably encounter a larger percentage of users with older browsers.)

There are a myriad of other browsers and "user agents" available. Opera is an up-and-coming browser that might eventually become quite widely used. Opera 5 supports HTML 4.0 and CSS very well — in many ways better than either IE or Netscape — and it's available for some platforms that neither IE nor Netscape supports, such as the Amiga. WebTV is a browser used for displaying web pages on a television. Lynx is a text-only browser that is very fast but which doesn't display graphics. There are aural browsers that read the web page content aloud — primarily intended for blind users, these will probably become more widespread as they become available for use in automobiles. There are even browsers for hand-held computers and for cell phones.

Structure vs. Format

As HTML evolved, web page designers demanded more and more features to help control the format of displayed documents as opposed to defining the structure of documents. For example, the <center> tag and the align="center" attribute were added to allow content to be centered on a page. The <font> tag was added to let the designer change the color, size and font face of text.

As time went on, it was recognized that including such formatting within the HTML markup had many disadvantages. The formatting information doesn't apply to certain user agents (what does an aural browser care about centering or color of text?). The formatting information causes accessibility problems — for example, people with vision problems need to be able to override text size and perhaps color. Different formatting information may be needed when a page is printed rather than displayed on a screen — for example, you might want to be able to specify where page breaks occur.

CSS was introduced in an attempt to separate formatting information from structural information. It provides much richer formatting information, and can make a web page look far nicer than can be done with HTML alone. At the same time, it provides methods to provide different formatting information for different situations, such as when the page is printed. It also provides facilities by which a user can inject formatting information of his/her own, so that a person with vision disabilities can display the page in larger text.

A Period of Transition

The most recent HTML standard is HTML 4.0. This standard came into being shortly after IE 4 was released, and it includes a number of features that were introduced in IE 4. Netscape 4 was released several months before IE 4, and it does not support many of these newer features.

HTML 4.0 was released as a 2-part standard.

• Transitional HTML 4.0 includes all the formatting features that had gained widespread use. Most of the formatting features are deprecated, which simply means that their use is discouraged in favor of CSS, but they are still available for use if you want or need to support older browsers.

• Strict HTML 4.0 has the deprecated features removed. We'll all eventually want to switch to the strict variety, but this won't be practical for most of us as long as so many users continue to use older browsers, and until the newest browsers provide better support for CSS.

While it's not practical for most of us to use strict HTML, it makes sense to begin this transition. When it's possible to do something in a way that is allowed under strict, and if doing so doesn't cause problems in the browsers that you want to support, it's better to choose the strict method.

What is XHTML?

XHTML (eXtensible HTML) is a newer language that will someday supplant HTML. The first version of XHTML (XHTML 1.0) has all of the features of HTML, and, like HTML, comes in transitional and strict varieties.

The main reason for XHTML's existence is to make the language easier for computers to work with. The trend is towards making smaller devices such as cell phones able to access the internet. XHTML's design makes it possible for computers to read and display pages with much smaller browsers.

In the past, most browsers have been very forgiving of sloppy HTML coding. XHTML browsers will be much less forgiving, and it's becoming far more important to code correctly. XHTML is much more rigorous than HTML, and places a few more restrictions on what you can and cannot do.

At this point in time, there's no really strong reason to use XHTML rather than HTML. But it does make a lot of sense to code your HTML following XHTML coding rules as much as possible so that you'll be able to convert to XHTML easily if you ever need to.