What is XHTML?

  1. XHTML Elements

XHTML is an acronym for Extensible HyperText Markup Language. It is a subset of the Standard Generalized Markup Language (SGML) which is a system for organizing and defining parts of a document, like titles, or headings, or paragraphs, or images, through markup, also known as tagging. XHTML is the most widely used language used to create documents on the World Wide Web, and is considered a replacement for HTML, the original web markup language.

While web browsers translate XHTML into a human-readable document, XHTML should not be used to control the appearance of a web page--that's what CSS is for.

This demonstrates the basic structure that all XHTML documents should adhere to. Note that our content is tagged by XHTML elements—those things enclosed by < > symbols.

XHTML Elements

XHTML elements are the building blocks of a XHTML document. The W3C has defined a number of XHTML elements that correspond to common types of information found in documents, such as

  • headings
  • paragraphs
  • quotes
  • blockquotes
  • lists
  • images
  • etc.

Deconstructing an XHTML element

XHTML elements usually enclose information, like text, in order to describe or define that type of information. Some XHTML elements can also do things like insert images or media into a page. Examine the following diagram of the p element:

p element diagrammed

Here are some things to notice:

  1. Each XHTML element has its own name--in this case, P for paragraph. The element name describes the type of information.
  2. Most elements have 2 tags: an opening tag and a closing tag.
  3. Opening tags can contain any number of attributes. Attributes hold additional information about the element or its content
  4. Attributes consist of the attribute name and the attribute value.
  5. If there are 2 tags, as there is here, that element likely encloses PCDATA. PCDATA is just a technical term for any text content that we want to appear on screen.

Terminating Elements

All elements in XHTML have to terminate, or close. Most XHTML elements have two tags, and the second tag is always the closing tag. But some XHTML elements only need one tag. For instance, we use the IMG element to insert an image into our web page:

<img src="myself.jpg" alt="Picture of Me" />

IMG doesn't contain any PCDATA--it just tells the web browser where our image is. IMG is an example of an empty element because it doesn't contain PCDATA. It doesn't need a closing tag, but every tag has to close itself, so IMG self-terminates with the / at the end of the tag.

XHTML Attributes

Any XHTML element can contain any number of attributes, which add information or modify the element. Attributes have names and values. The name of an attribute is pre-defined; in the two previous examples we see a "class" attribute for the p element, and a "src" attribute and an "alt" attribute for the img element.

The value of an attribute may also be pre-defined, but more often than not the value of an attribute will be defined by YOU. In the IMG element the attribute src needs a value that points to the specific image file that you want to display. The value of the attributes class or alt can be whatever you decide it should be--it's completely up to you! We'll deal with the class and alt elements in more detail later on.

In regular HTML there are many attributes which control how an element appears on screen. In XHTML, most of those HTML attributes are deprecated, meaning they are no longer valid for use. Instead, XHTML authors use Cascading Style Sheets (CSS) to control the appearance of elements. We'll be introduced to CSS in this lesson, but won't really start using it until the next lesson.