Structural Markup using XHTML

What is XHTML?

XHTML is the current generation of the Hypertext Markup Language (HTML). It is a hybrid between HTML and XML.

An XHTML file uses XHTML tags to 'markup' the contents of that file. The tags are used to define the structure of the document. Tags are not used to define the way in which a document is to be presented. They simply indicate the structural elements, such as headings, paragraphs, lists, images, hyperlinks, page divisions etc. etc. etc.

Attributes

Tags have what are called attributes. These may be used to associate settings with the particular tag. The attributes that may be used with a particular tag are defined as part of the standard. An excellent reference resource is of course: W3Schools and their XHTML tag list.

W3C XHTML Standards

The W3C XHTML specifications, including the draft XHTML 2.0 specs, and be viewed here: W3C on Markup

The Rules of XHTML

In order for the markup that you produce to conform with the W3C XHTML standards you must adhere to a few simple rules:

All XHTML elements must be closed
This means that you must use a closing tag. However some old HTML tags such as <img> (image), <br> (break), <hr> (horizontal line), do not have closing tags. In these cases the tags do not 'embrace' any page content. They must each provide their own XHTML end indicator and they do this with a space and a forward slash e.g. <img src="imagesource.gif" />, or <br />, or <hr />.
XHTML elements must be properly nested
Web pages consist of elements nested inside one another, rather like russian nesting dolls. In HTML it was possible to leave out certain end tags or to markup elements in an overlapping manner, and still have pages render acceptably from a browser. This is no longer valid in XHTML.
XHTML documents must be well-formed
A well-formed XHTML web page will conform with the following basic structure: 
<html>
<head>
</head>
<body>

</body>
</html>
Tag names must be in lowercase
XML is case sensitive. Stick to lower case for all your tags.

XHTML Syntax

There are just a few more rules that should be adhered to for clean XHTML:

Attribute names must be in lower case
Like the tags themselves, their attributes must also be in lower case.
Attribute values must be quoted
Always wrap attribute values in double quotes.
Attribute minimization is forbidden
This is a reference to the practice of leaving stuff out (minimisation). In XHTML you must be explicit. E.g. 
<input checked>

is incorrect whereas the following is correct XHTML:

<input checked="checked">
The id attribute replaces the name attribute
In HTML the 'name' attribute was used to uniquely identify elements. This attribute has been deprecated in favour of the id attribute.
The XHTML DTD defines mandatory elements
All XHTML documents must have a DOCTYPE declaration. The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.

The <!DOCTYPE>

The doctype declaration that you will see at the very start of every XHTML web page is a mandatory element. It is not an XHTML element and does not need a closing tag.

The document type declaration defines the document type. It is used to reference one of 3 document type definitions:

  1. Strict
  2. Transitional
  3. Frameset

Cascading Style Sheets

Cascading Style Sheets provide us with a presentation language. CSS is not concerned with the structure (that is the XHTML), but is primarily concerned with presentation.

CSS has its own language and syntax. It uses a number of style rules that may be applied to elements in a document.

CSS Syntax

selector{
	property: value;
	}

CSS style rules are defined using this convention.

The 'selector' may be a type selector wherein it is simply the name of an XHTML element such as 'h1'.

It may be a class selector that may be used by multiple page elements belonging to the same class, as defined by their class attribute.

It may be an id selector that applies rules to a unique element in a document.

In addition CSS uses contextual selectors and multiple selectors which we will look at more closely in due course.