4. XHTML Introduction

What is XHTML?    (click any heading below to return here)

This course uses XHTML, not HTML, as its page markup language. XHTML reformulates HTML as an XML application. If you already have experience in HTML, then learning XHTML is easy. This lesson notes most of the differences. What is more important, XHTML signifies the separation of content markup from appearance markup.

• XHTML is the newest HTML standard, January 2000
• XHTML is case-sensitive
• It prepares us for XML. It is written in XML
• ...and for new platforms: WebTV, a wireless Web
• XHTML is the standard for these platforms

You will begin markup practice with this lesson, learn important terms that will be needed for the remainder of the course, and be introduced to markup standards.

Style comes into fashion

Although you may already know HTML, you probably don't know style sheets or CSS. We will use XHTML as if CSS were a necessary element in all markup. In other words, we will use XHTML ONLY to classify and code content of pages, not their appearance. We will use CSS for appearance. We will not confuse the two technologies by using one to do the other's work.

Most of the Web pages that we see on the Web happen to be coded in HTML without using CSS. Authors in the past had to achieve attractive looking pages in inventive ways. HTML itself was recast from a content markup syntax into a mixed-up tool for formatting text and styling pages.

A crowded Web

Our course standards depart from imaginative HTML techniques and adhere to current XHTML-CSS standards. For example, there is a series of HTML tags devoted to appearance (<center> <color> <u> <big> <b> <i> <font> etc).

We will not use these tags in XHTML, even if they are temporarily supported by XHTML-compliant browsers. The XHTML standard has identified this legion of tags 'deprecated,' meaning they will not be included in the next round of standards.

Markup basics

Use XHTML to classify the content into structures of headings, paragraphs, lists and hyperlinks without regard to appearance. Pages are now available to sightless users with an add-in for text-to-speech. Text that is bold, italicized, blue, underlined or big has no pertinence to the content. In XHTML, to emphasize some information use <em> for emphasis, or <strong> for stronger emphasis. The <strong> selector connotes what XHTML authors probably meant when they used <b> in the mid 1990s. To be consistent and keep content markup separate from style markup, avoid the XHTML appearance selectors.

What is XHTML content?

• Markup the content of your material
• Markup the structure of your material
• Markup <em> for content emphases, not <b>
• Markup as if for a sightless user who will hear it
• Avoid markup for font and color changes, underlining, bolding, italicizing

Marking up the content means placing your written material into XHTML containers that describe its structure. Headings, paragraphs, quotations, sample code, lists, and so on are the familiar structures we have on our pages. For example:

<h3>What is XHTML content?</h3>
<p>Marking up the content means placing your
written material into XHTML containers that describe its
<em>structure</em>. Headings, paragraphs, quotations,
sample code, lists, and so on are the familiar
<em> structures </em> we have on our pages.
For example:</p>

Users depend on structures to identify how information is organized. You section your content by placing it into structures familiar to readers: headings, paragraphs, quotations, sample code, lists, and so on.

Checkpoint    (answer then click)

You have just read about markup standards for XHTML. Name four of them. Click the check point to confirm your answers.

Basic definitions

• XHTML codes are called tags
• tags consist of elements, attributes, values of attributes, and events
• h1 is an element (or a selector)
• <h1> is an opening tag
• </h1> is a closing tag
• all parts of the tag must be lowercase

We will refer to "elements" as the principle content of XHTML tags. An element such as "a" becomes a tag when it is represented as <a> which we know as the anchor tag. Because tags can contain more than the elements (attributes, values of attributes, and events) it is important to maintain a vocabulary that helps us distinguish these from each other.

Textbooks often cast all elements and attributes in CAPS to make reading easier. Currently, HTML is case insensitive. The XML standard (the future of Web markup) is case sensitive, and selectors and attributes must be lowercase. XML syntax is lowercase, too.

Proper nesting required

<p>This is <strong>proper</strong> nesting so
<em>your browser will render it as you intended</em>.</p>
<p>This is <strong>improper<em> nesting but
</strong>your browser may figure it out anyway</em>.
Still, you could be penalized for improper nesting
on tests and assignments.</p>

Close all tags

These are incorrect: <p> <li> <td>

These are correct: <p> ... </p> <li> ... </li> <td> ... </td>

Empty elements

These are incorrect: <br> <hr> <img ... attributes > <link ... attributes> <input ... attributes>

These are correct: <br /> <hr /> <img ... attributes /> <link ... attributes /> <input ... attributes />

Deprecated HTML

Because we use CSS with XHTML, the following extensions to basic HTML (called Formatting Elements) will not be used in our coding. And they are deprecated from strict XHTML. You will lose points for coding with these elements on tests and assignments, even if they work as you intended. Learn to code with the newest W3C standard, XHTML and CSS.

b basefont big color center font i margin

marquee nobr s small strike tt u wbr

Move your mouse over any element you do not recognize. The result is a tool tip made possible by using the attribute title inside each <li> opening tag. Attributes will be discussed shortly.

XHTML text elements

Tryout    (change the markup then click the button)

XHTML text elements are used to mark the content or structure of text. Paragraphs are marked as paragraphs inside a <p> </p> container. Authors decide whether their material is a paragraph, when phrases or words should be emphasized in a <em> </em> container, or strongly emphasized in a <strong> </strong> container, when material is being quoted <q>, cited <cite>, and so on. For this course, XHTML markup material is done without regard to appearance. Our aim is to classify the content.

Use this small window to markup words you want to emphasize for readers. Insert the tags described above.