XHTML/XHTML Documents
Basic XHTML documents
[edit | edit source]All XHTML documents follow a minimal pattern for document layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
The <!DOCTYPE> tag is the document type definition (described in the previous chapter) that identifies the standard being used.
The <html>...</html> tag pair is the root tag that specifies an XHTML document. It requires two tags: the xmlns is the namespace tag that restates the specific context of the standard, and is normally a URL to the W3 specification. The xml:lang tag specifies the language of the document.
<head>
<title>My Document's title</title>
</head>
The <head> tag pair of the document concerns the meta data of the document. It must contain the title of the document enclosed within the <title tags.
<body>
<p>Hello World!</p>
</body>
The <body> tag pair indicates the main content of the XHTML document. Within this tag, it encloses additional sub-tags to indicate paragraphs and other formatting information that is presented to the user.
XHTML Structure
[edit | edit source]Within the body of the html document, content is broken into a discrete structure. The most common form of separation involves the <p> tag pair, which marks a section of text as a paragraph. A paragraph is a section of text, and may also also include quotes, listings or other components that are contained in nested tags. However, it does not directly contain another paragraph.
Headers of text are identified the numbered series ranging from <h1> through <h6>. They may also be identified by <h> tag pair, in combination with the <section> tag pair; the sections may contain additional headers or paragraphs.
Additional structure to the document can be created using the <div. This tag pair is used to aid layouts within the document, and may contain additional paragraphs or headers within the container.
To separate two parts of the document, the <separator /> is places between two paragraphs or elements.
Other structure tags
[edit | edit source]<address>is used to mark contact information, normally with thehrefattribute.<blockcode>is used to mark a block of code where whitespaced layout is important.<blockquote>is used to identify a large quotation.<pre>is used to identify preformatted text.
Inline text tags
[edit | edit source]A set of text within text may have tags to describe modifiers to the text.
| Element | Description |
|---|---|
| <a [href="(link)" | id="#tag"] > | Defines an anchor for an explicit link or tag location. In XHTML, the href and id attributes can be placed on almost any tag as desired.
|
| <abbr full="#tag"> | Defines an abbreviation. The full attribute references an id within the same document as the abbreviation. |
| <cite cite="(source)"> | Provides a citiation, where the cire attribute references the source material. |
| <code> | Refers to computer code. |
| <dfn> | Refers to a definition |
| <em> | Puts emphasis on the text, such as italics. Less important than <strong>. |
| <kbd> | Refers to user input. |
| <l> | Refers to a line of text. |
| <q> | Refers to quoted text, but does not add quotation marks. May use the cite attribute. |
| <samp> | Refers to sample output from a computer program. |
| <span> | A generic container for use with styling. |
| <strong> | Puts emphasis on the text, such as bolding. More important than <em>. |
| <sub> | Indicates a subscript. |
| <sup> | Indicates a superscript. |
| <var> | Indicates a variable in a computer program. |
Lists
[edit | edit source]| Outer list tag | Innter list tag | Description |
|---|---|---|
| <ol> | <li> | An ordered list. <li> may contain a value attribute.
|
| <ul> | <li> | An unordered list. |
| <dl> | <di> | A definition listing. |
| <dl> or <di> | <dt> | A word being defined. May appear multiple times to indicate separate spellings. |
| <dl> or <di> | <dd> | The definition of a word. May appear multiple times to indicate separate definitions. |
| <nl> | <li> | Entry in a navigation listing. |
| <nl> | <label> | A label for a navigation listing. Labels may appear in other types of lists. |
Hyperlinking
[edit | edit source]Hyperlinks work in XHTML in the same manner as HTML. An href attribute is added to the an anchor element:
<a href="http://www.example.com/">Example</a>
In XHTML 2.0, hyperlinks be placed directly on any element without the need of an anchor tag. As such, elements such as images can be used for a hyperlink.
Image maps
[edit | edit source]A more advanced form of hyperlinking involved navigation maps. This requires an element to use an image, and to include the usemap attribute to reference an id of a navigation map. Within the navigation list, there are two additional attributes to use: shape, and coords. The coordinates are comma-delimited.
| shape | Description | coords |
|---|---|---|
| default | Specifies the entire region. | N/A |
| rect | Specifies a rectangle, with the two corners. | Two X-Y coordinate pairs. |
| circle | Specifes a circle with a given radius. | An X-Y pair, and a radius. |
| poly | Specifies an arbitrary shape. | Multiple X-Y pairs outlining the polygon. |
Within the navigation list, items apparing first within the list take priority if they overlap with another entry in the navigation map. In addition, navigation lists that do not include an href attribute will be inactive.
If ismap="ismap" is used on the image attribute, the image map is treated as a server-side map. The client will automatically append the coordinates to the URL sent to the server on this form of map (or "0,0" if they are unable to do so.)
Tables
[edit | edit source]Tables are created in an XHTML document using the <table> tag pair. A table is a grid of cells that is displayed.
Within a table, the <colgroup> and <col> tags are used to specify a formatting or class to a set of columns. These two tags, which allow the span attribute, will cause a given column of cells to obtain a specific format (such as background colour or style sheet).
The <summary> tag pair is used to provide a summary of the table. This is usually a caption about the table, such as a brief description about the table itself.
The <tbody> tag pair identifies the body of the table. It will enclose the row and cell tags that will be described shortly.
The <tr> tag pair identifies a row within the table. Each pair of this tag will contain the cell definitions, whether they are a header or content cell.
The <td> tag pair identifies a cell within a table. The <th> tag pair identifies a cell within a table, which is treated as a header and given emphasis. Cells may span multiple columns or rows with the colspan or rowspan attribute. Some cells may require uting an abbreviation, which is performed using the abbr attribute.
The <thead> tag pair identifies the table's header.
The <tfoot> tag pair identifies the table's footer.
Stylesheets
[edit | edit source]Style sheets give a description on how to render an XHTML document. Style sheets are not a direct part of the XHTML standard, but are extremely important for determining the layout or display of the document.
They are declared using an empty <style tag, and use the src attribute for the document source and type to specify the type of style sheet (usually "text/css"). An inline style sheet omits the src attribute and contains the affected text within the main element.
External stylesheets may also be included by using <?xml-stylesheet ?> with the href and type showing the source and type of stylesheet.
If desired, a style can be included directly within an HTML element using the style attribute.
Metadata
[edit | edit source]The <head> tag pair contains the initial description of the document. In addition to the basic title, this section of the document contains metadata useful for categorizing the document.
Meta data has the following attributes available:
| Attribute | Description |
|---|---|
| about | An about URL for the page. |
| content | Specifies meta data for the associated content. By default, it uses the content within the tags. |
| datatype | |
| rel | Used with about; specifies relationship. |
| property | Identifies a property with the XHTML document (see below) |
Metadata also provides properties that describe additional information in the document. When the property attribute is set to an entry in the following table, it has the following effect or result:
| Property | Description |
|---|---|
| description | Provides a description of the resource. |
| generator | Identifies software used to write the resource. |
| keywords | Comma separated list of keywords for search engines. |
| reference | |
| robots | Advises robots on behaviour; specific to web crawlers. |
| title | Specifies a title for the resource. |
Meta hyperlinks
[edit | edit source]In the head tag, you can include hyperlinks to provide information about the next and previous documents. This is done using an empty <link tag, with the href and rel attribute.