XHTML Web Page Building Blocks



While Web pages have become increasingly complex, their underlying structure remains remarkably simple. A Web page is made up of text content, references to more complex content, and markup to describe how things should be displayed.


Markup: elements, attributes, and values

Markup information for the document content is included in the document itself. Markup can include formatting instructions or details about relationships between parts. Because the markup is text, the document is universally readable. XHTML has three main types of markup: elements, attributes, and values.


Elements identify document structure and can contain text, other elements, or nothing at all.



Attributes contain information pertaining to an element. In XHTML, attribute values must always be enclosed in quotation marks.


<img src="header.png" width="700" />


Elements can be block-level or inline.



If element X contains element Y, X is the parent element of Y, and Y is the child element of X. For example, <p>I like to be <b>bold</b></p>, the parent element is the paragraph element (p) and the child element is the boldface element (b).


XHTML requires that elements be properly nested, meaning that you cannot terminate a parent element without terminating the children elements.


Correct: <p>I like to be <b>bold</b></p>

Incorrect: <p>I like to be <b>bold</p></b> (need to end the boldface element first)


Web page content

The content is basically anything you can type. There are a few exceptions:



Other non-text elements, such as links, images, Flash animations, sound files, movies, etc. are directives to HTML telling it to do something such as go to another URL or import a file into the page.


File names and URLs

Most Web content lives in a file on disk. A few things to keep in mind about file names:



A URL (uniform resource locator) is an address of some content that the browser should display. Most file-based URLs have three parts: scheme, server name, and path.



Here are some other URL examples:



Absolute URLs specify the entire path to a file, including the scheme, server name, path, and the file name itself. Think of this as a complete street address – no matter where a letter is sent from, the post office will be able to find where to deliver the message. Relative URLs specify how to get to a resource from your current location. An analogy would be `go three blocks and turn right.'


Use absolute URLs when



Use relative URLs when




HTML 4 and XHTML 1.0 use the same elements, attributes, and values – the difference is the syntax.



Advantages of using XHTML:



XHTML versions

There are three versions of XHTML:


  1. Strict: only elements of XHTML are allowed; useful for taking advantage of connecting to databases, working with styles, easily being updated for future systems.
  2. Transitional: some elements that will be deprecated are still allowed; useful when the markup includes deprecated elements.
  3. Frameset: allows frames; this will eventually be phased out.


You can state the version for your Web document by using the DOCTYPE declaration. XHTML validation tools can then determine if your markup is correct for the XHTML version you chose.


Strict XHTML Page Declaration


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">




Transitional XHTML Page Declaration


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


<html xmlns="http://www.w3.org/1999/xhtml">




Frameset XHTML Page Declaration


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"


<html xmlns="http://www.w3.org/1999/xhtml">




Visit the World Wide Web Consortium (W3C) Web site, http://www.w3.org, for more information about DOCTYPE and valid values for DOCTYPE.


Default display of XHTML

Each Web browser has a default method of displaying each kind of XHTML element. These methods may differ slightly, but the basic concepts are maintained. For example, a level-one header (h1) will be larger than a level-three header (h3).


However, the specific formatting for XHTML elements may not be the same between browsers. For example, h1 may be 24pt Times on one browser and 22pt Arial on another. Controlling the display of XHTML elements is done using cascading style sheets (CSS).


Cascading style sheets (CSS)

XHTML provides the basic structure, and CSS defines the appearance of a Web page. A style sheet is made up of one or more rules. Each rule is comprised of a selector, which identifies the parts of the Web page that should be affected, and one or more declarations, which specify the formatting which should be applied.


The simplest selector is the name of an XHTML element, such as h3 or p. More complex rules can apply to an entire class of elements, or even all descendants of an element.


p {

  font-family: "Helvetica", sans-serif;

  font-weight: bold;

  color: #3366cc;



In the above example, there is one selector/rule (p), three declarations (font-family, font-weight, and color), and property values for each declaration (property values appear after the colons).


Note: CSS requires that opening elements (such as p) have closing elements. Singleton elements such as img are not required to explicitly have a closing element (e.g., <img src="file.gif" />).


If more than one style rule applies to a given element, a cascade principle is used to take into account inheritance, specificity, and location to determine which rule applies. Inheritance occurs when a child element takes on properties of its parents. For example, if you want all h1 elements to be blue with a red border, any elements within the h1 element will be blue but will not individually have a red border (because color is inherited, but borders are not). Specificity means that the more specific the selector, the stronger the rule. For example, suppose one rule states that all h1 elements should be blue and a second rule states that all h1 elements whose class attribute is french should be red. Then the second rule will override the first rule for all h1 elements whose class is french. Note that id attributes are even more specific than class attributes. Location is used to break ties between inheritance and specificity. For example, locally defined rules (within the element itself via the style attribute) have higher precedence.


Each CSS property has different rules about what values it can accept:


Predefined values: a finite list of values for a given attribute. For example, the display property can only be set to block, inline, list-item, or none For example, border: none;.


Lengths and percentages: values with a quantity and a unit, with no spaces between them. For example, 10px as in font-size: 24px; pixels (px) are relative to the resolution of the monitor. There are some absolute units, such as inches (in), centimeters (cm), millimeters (mm), and points (pt). In general, these should be used when the size of the output is known (e.g., printed page). Percentage values are relative to some other value. For example, font-size: 80%; means the font for this element is 80% of the parent's font size.


Bare numbers: a number without a unit. For example, line-height: 1.5;.


URLs: the URL of another file, denoted by url(somefile.ext). For example, background: url(mybackgrund.jpg);. URLs are relative to the location of the style sheet and not the location of the XHTML document.


Colors: a color for an element, which can be declared in one of four ways:


  1. Predefined color names (16), such as navy, olive, or red
  2. RGB (red/green/blue) percentages: color: rgb(35%,0%,55%);
  3. RGB hexadecimals: color: #59007f;
  4. Shortened RGB hexadecimals: color: #f34; is equivalent to color: #ff3344;