XHTML: Basics - beginners Extensible Hypertext Markup Language tutorials

Previous

XHTML: Basics plus Next

All XHTML documents must declare a Document Type Definition (DTD). There are 3 choices: Strict, Transitional and Frameset. The first two are demonstrated below.

Each XHTML document should also define a character encoding set. Demonstrated here are 2 choices: 'iso-8859-1' for Western European languages and 'utf-8' Unicode worldwide for truly global coverage of language character sets.

1.

Simple basic page template: a 'Transitional' XHTML template.

Declare a Document Type Definition (DTD): 'XHTML 1.0 Transitional'.

Defining a suitable character set: 'iso-8859-1' (Western Europe).

2.

Simple basic page template: a 'Strict' XHTML template.

Declare a Document Type Definition (DTD): 'XHTML 1.0 Strict'.

Defining the character set: 'utf-8' (Unicode, worldwide).

Both the above templates include meta 'description' and 'keywords' content which can be incorporated into a search engine optimization (SEO) strategy.

3.

Headings and paragraphs. Use of basic XHTML elements including headings <h1></h1> to <h6></h6> and paragraphs <p></p>.

Closing the non-empty: <h1></h1> elements.

Quoting attributes: single ' or double quotes " are acceptable but be consistent and do not create mismatched pairs.

4.

List types. Further use of basic XHTML elements.

Example of nesting elements in an unordered list: <ul> with <li>.

Examples of more list types and nesting lists within lists.

Ordered list <ol> with <li> and a definition list <dl> with <dt> and <dd>.

This short introduction page to XHTML cannot possibly give you examples of the use of all the elements and their attributes. What this page does do however is give you an idea of how the elements are used and the format of the syntax for their use.

For the full set of elements available in XHTML 1.0 see the XHTML 1.0 element and attribute reference.

5.

Building a table. The use of tables for layout purposes has fallen out of favour (favor) but they have a legitimate and traditional use in display and layout of data.

Example of using a simple table to display data.

Use of <table>, <caption>, <tr>, <th>, <td>, together with the attributes 'cellspacing', 'cellpadding', 'rowspan', 'colspan'.

6.

Closing empty elements.

Example using the horizontal rule <hr /> and the forced line break <br />.

Empty means: does not contain content but may have attributes.

7.

Working with images. Use of the <img /> empty element.

Setting a placeholder for an image: defines the size of the image within the page before the image has loaded. This allows the page to format correctly around the loading image thereby any text surrounding the image loads to its correct position on the page and is not forced into a new position to make space for a loading image. A courtesy to a visitor if they are reading the text while waiting for the image to load.

Use of the 'alt' and 'title' attributes to create a text description if the image fails to load and tooltip text when the mouse cursor hovers over the image.

View a table of special characters for (X)HTML code markup.

These values must be used for displaying special characters when writing XHTML (HTML) code markup. Example of special characters include: & " < > © ® ½.

For example if I wish to place in a web page the words: 'lost & found' which includes the use of the special character '&' then I will need to write that character with its equivalent numeric entity value: &#38; in the source code of the document.

Table includes entities 34, 38, 60, 62 and entity references for ISO 8859-1 characters: 160 to 255 inclusive. Selection of other special characters from utf-8.

8.

Summary. A web page that incorporates all of the above in one demonstration page.

Build on the above and learn how to link to other web pages and resources. How to interact and receive feedback from your visitors with forms.

Go to XHTML: Basics plus.