XHTML Tags Types

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.

• Document Layout Tags. These tags are used to structure the XHTML document. They organize the information content on a page so that text and graphical elements appear where you want them to appear. These are the tags you use to design the overall physical and visual relationships between page elements.



• Text Formatting Tags. These tags are used to apply font faces, styles, sizes, and colors to the text appearing on the page. They package and decorate the text content of the page.



• List Formatting Tags. Certain tags are used to organize text information into lists. List structures include bulleted lists, numbered lists, and others.



• Graphic Formatting Tags. These tags are used to position, size, and style drawings and pictures that appear on the page.



• Linking Tags. Web pages are "hypertext" documents, meaning there are linkages between them. With the click of a mouse you can jump from one page to another, or from one page to a particular location on another page, immediately. It is not necessary to traverse the pages sequentially. Therefore, certain tags are used to set up these linkages between pages and between different sections of a single page.



• Table Tags. Web pages provide information to visitors. They present data. Often times data need to be organized in tabular form, into rows and columns, for better presentation, readability, and understanding. Table tags permit you to arrange data into tables; they also can be used as structuring devices for laying out the entire content of Web pages.



• Frame Tags. Web pages can also be organized into frames, or into separate windows each containing a different Web page that is accessible at the same time. Frame tags permit this structural option for laying out information on a page.



• Form Tags. Forms are data collection devices. They are used to collect information from visitors in order to capture data for processing or to solicit visitor preferences about content displays. Forms are the mechanisms through which visitors interact with your Web page. A number of different form tags permit various means of interaction.



• Multimedia Tags. Modern Web pages provide a multimedia experience, presenting audio and video information and entertaiment as well as text and graphic images. Certain tags are used to link to and play audio and video files through special media players that can be embedded on the Web page.

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.

Tag Attributes

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.