XHTML formatting codes, or tags, surround the material to be formatted and are enclosed inside angled brackets ("<" and ">") to identify them as markup instructions. On the basis of these markup tags the browser displays the page in the specified layout and style. Each Web page is described by its own separate XHTML document containing whatever tags are necessary to structure and style the page according to the design envisioned by the page author.
Various types of XHTML tags are used for different layout and styling purposes. The list below is one way to categorize tags according to their primary usages.
This tutorial is organized around these tag types.
Web pages can be very simple or very complex depending on the amount of information they contain and the fasion in which the information is organized and presented. The code below is a complete XHTML document that displays just a single formatted line of text. Although this is about as simple as a Web page can get, it does demonstrate how XHTML is used to identify the code as an XHTML document, to structure the information to display inside the browser window, and to style the text for presentation. Portions of this document shown in bold are XHTML tags that control the browser display. The single line of regular text is the information content that is displayed in the browser window.
The lines of code,
describe the text that appears in the browser window. Formatting is applied by surrounding the text with tags (in this case with <span>...</span> tags) containing styling information. Here the text is styled in Times New Roman font face at 14-point size and in the color blue. The browser uses this styling information in the tag to render the text on screen.
The XML Language Family
The World Wide Web Consortium (W3C) (http://www.w3c.org) is a voluntary organization responsible for setting HTML standards. Recent efforts have focused on defining a new XML (eXtensible Markup Language) language for use as a universal markup language, replacing older languages and with standards for creating future languages for special markup needs. For instance, version of XML have been designed for generating Web graphics (VML - Vector Markup Language), for displaying mathematical equations (MathML - Mathematical Markup Language), for authoring interactive audio/video presentations (SMIL - Synchronized Multimedia Integration Language), for digital signature recognition (InkML - Ink Markup Language), and others. XHTML itself is a subset of the XML language.
XML is a highly structured language with precise rules for its use. These rules are encompassed within a Document Type Definition (DTD), that is, a set of coding criteria against which Web pages can be validated for conformity to XML standards.
A problem is that not all Web browsers can recognize XML; plus, there are millions of current Web pages written under older HTML standards. So, as a transition between conventional HTML coding and future XML coding, the W3C developed XHTML standards. These standards enforce the newer coding practices of XML, while recognizing the older coding practices of HTML.
Coding a DTD Reference
In order to designate a Web document as conforming to XML coding standards, a Document Type Definition is coded at the beginning of the document. The previous example contains the following opening lines.
The first line indicates that this document is based on XML version 1.0 (the current version) standards. The second line, continuing through the third line, points to the Document Type Definition for the particular standard being validated against. This line indicates the "transitional" standard, one permitting conventional HTML as well as newer XML coding to appear on the page. The fourth line specifies the standard's "namespace," that is, the location of the W3C standards from which the DTD is drawn.
All Web pages should include these opening lines of code in order for the browser to validate the document against these standards. This tutorial assumes these opening lines, although they are not coded in all the examples so as not to detract from the coding topic at hand. All of the code shown in these tutorials conforms to XHTML standards; however, older, "deprecated" HTML code that is being phased out is shown for comparison. There are many existing Web pages coded in the older fashion, and you need to recognize that coding as well as create pages using the newer coding.
XHTML Tag Keywords
XHTML tags are special keywords surrounded by "<" and ">" angle brackets. These tag "names" indicate the purpose of the tag and direct the browser to treat the enclosed content in a specified fashion. In the above example page the <html> tag surrounds all the content on the page and indicates that this is an HTML document that the browser should treat as such. That is, the browser should look for XHTML tags and use the enclosed markup specifications to style the information surrounded by the tags. Likewise, <body> tags enclose all page content that is displayed inside the browser window. Finally, <span> tags encompass a string of text to which styling attributes are applied. In conformance with XHTML standards all keywords are typed in lower-case characters.
Container Tags. Most XHTML tags are coded as pairs of opening and closing tags, called container tags. The opening tag is the keyword itself appearing inside < and > symbols; the closing tag is in the same format with the keyword preceded by a forward slash (/). This pair of container tags encloses the information to which the formatting applies. Thus, the pair of container tags <html>...</html> encloses the entire HTML document to indicate that everything in between is coded in HTML.
Non-Container (Empty) Tags. Certain other tags are not container tags; that is, they do not "surround" information to be formatted but are coded as single, stand-alone tags. These empty tags are coded in a special way to conform to XHTML standards. They must include a forward-slash (/) character immediately before the closing angle bracket. For example, the single tag to display a horizontal line across the page is coded as <hr/>.
As the various tags are introduced in this tutorial you will quickly learn how to code container tags and empty tags and the variations they permit.
XHTML tags can contain attributes that provide additional formatting specifications beyond those implied by the tag name itself. For instance, <span> ...</span> container tags can be used to set type faces, font sizes, and other style characteristic for the enclosed text. These settings are given by the style attribute coded inside the opening tag:
Attributes are keywords and associated quoted values in the format attribute="value". In the above example, the keyword style defines an attribute of the <span> tag and has a set of associated quoted values pertaining to a type face, size, and color that are applied by the tag. In most cases, attributes are style settings for the particular tag.
The main task in learning XHTML is learning the tags and their attributes which apply browser formatting to whatever page content they enclose. The general practice in this tutorial is to present only those tags and attributes that are essential to the discussion at hand. Additional tags and attributes are introduced as you proceed through the tutorial. It is worth noting that the examples shown in this tutorial are fairly simple illustrations of tags and attributes. The intent is to emphasize the XHTML code rather than to produce elaborate page displays. In this way you can focus on the code without being distracted by a great amount of information content. Understand, however, that you can produce quite elaborate page displays by combining the basic set of tags presented here.