XHTML Mobile Profile and CSS Reference: Elements and Attributes

Elements and Attributes

After the prolog and any comments, every XHTML-MP document contains a root element (<html>) that in turn contains the head (<head>) and body (<body>) of the document itself. The body is a collection of elements and their attributes, plus the contents of those elements (such as text, images, URLs, and so on).

Semantic and Presentation Elements

XHTML and CSS are designed to separate content from its presentation. In this way, you can use the same content on diverse devices, including mobile phones with a variety of font and other presentation capabilities, personal computers, and even devices for the hearing or visually impaired.

Most XHTML-MP elements are semantic elements, that is, they convey meaning about their content rather than information on how it should be displayed. For example, the <em> element contains content that should be emphasized: it's up to the browser to figure out how to render the emphasis, with a different typeface, a louder voice, or in another way.

Openwave Mobile Browser supports four XHTML-MP elements that are widely used on the web to display content in specific ways, rather than to add semantic information. These are the <b>, <i>, <big>, and <small> elements. It's best to avoid these presentation elements. For example, if you mean to emphasize text, use the <em> element and trust the browsers in your marketplace to present the content in a way that indicates emphasis; if you want to display italics, use the CSS font-style property in style sheets designed for the phones in your marketplace.

Common Attributes

Many XHTML-MP elements have five attributes in common: class, id, title, lang, and style. Because these attributes are used in mostly the same way by their elements, they are described together in Table 1-1.

Table 1-1. Common Attributes

Attribute	Description
`class`	Labels the instance of the element as part of a class of elements, which can be operated on as a class by a CSS style sheet selector. For more information, see Class Selectors.
`id`	Labels the instance of the element with a unique identity in the document. A style sheet selector can refer to the element. A XHTML-MP element can refer to the element for other purposes, such as identifying the target anchor of a link. IDs must follow the rules for XML IDs: They must be unique in the document. They can contain only letters, numbers, and the underscore, colon, period, and hyphen symbols: `_` `:` `.` `-` They must start with a letter or the underscore symbol. They may not contain spaces.
`style`	Specifies style properties. See Using the style Attribute to Apply Styles to Individual Elements. Also see the notes on how to use style sheets throughout this reference.
`title`	Labels the instance of the element with a title. Openwave Mobile Browser does not use the title attribute, except in two cases: For links, sets the primary softkey label when the link is selected. For more information, see `<a>`. For elements in a form, sets the primary softkey label when the form element is selected. For more information, see `<form>`, `<input>`, `<label>`, and `<textarea>`.
`xml:lang`	Declares the human language used in the element. Openwave Mobile Browser does not use this attribute.

<a>

The <a> ("anchor") element creates a hyperlink (or "link"), the target of a link, or both. A link can be to a document or to a specific location (a "target anchor") in the same or different document.

Openwave Mobile Browser displays links with underlined text.

You can use style sheets to change how links are displayed before and after the user has visited them. For more information, see Link Pseudo-Class Selectors.

Empty (particularly in the case of targets) or any combination of text and the following elements: <br>, <span>, <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>, <q>, <i>, <b>, <big>, <small>, <img>, <object>, <input>, <select>, <textarea>, <label>. Anchors can't contain additional anchors.

Attributes

`class`, `xml:lang`, `style`	See Common Attributes.
`accesskey`	A device keypad key (0-9, *, or #) that the user can press as a shortcut to selecting the link and pressing the primary softkey. It's best to assign access keys to links and other elements in the same order as they appear in a document. For example, if you set a series of links in an ordered list (`<ol>`), make sure the access keys you assign to the links match the numbers that decorate the items in the list. You can also set access keys for Openwave Mobile Browser 6.2 with the CSS `-wap-accesskey` property, as described in `-wap-accesskey`. If there is a conflict, the access key is set by the CSS property.
`id`	Required for target anchors. Sets the ID of the target. See Common Attributes for information about IDs and the rules for their contents. The `id` attribute in XHTML takes the place of the `name` attribute, familiar to writers of HTML.
`charset`	Identifies the character encoding of the document referenced by the `href` element. Openwave Mobile Browser does not use this attribute.
`href`	Required when the element is a link. When the element is a link, identifies the target of the link. This can be an absolute or relative URL for a document, or for a target anchor in the same or different document.
`hreflang`	The natural language of the document referenced by the `href` element. Openwave Mobile Browser does not use this attribute.
`rel`	Defines a link relationship from the current document to the document referenced by the `href` element. Openwave Mobile Browser does not use this attribute.
`rev`	Defines a link relationship from the document referenced by the href element to the current document. Openwave Mobile Browser does not use this attribute.
`tabindex`	Sets the element's position in the "tabbing" order in the document, that is, the order in which the input focus shifts from element to element when the user presses the key on the device that is mapped to the "tab" function. Although the browser supports this attribute, no existing devices have assigned a key to tab, so in effect, `tabindex` is not used.
`title`	If the anchor is a link, sets the primary softkey label when the link is selected.a
`type`	The MIME type of the document referenced by the `href` element. Openwave Mobile Browser does not use this attribute.

Notes

When the <a> element specifies a target, the id attribute is required. Target anchors are usually empty:

<a id="target-01" />

A link to a target anchor references the anchor's ID, with a pound symbol ( # ) prepended to it, for example:

<a href="#targetid">Link to a target in the same document.</a>
 
<a href="http://www.example.com/#targetid>
    Link to a target in another document.
</a>

(If you included a <base> element, relative links can resolve to another document. See <base> for more information on how that element can change how relative URLs are resolved.)

When the <a> element specifies a link, the href attribute is required.

What the browser does when the user activates a link (by selecting it and pressing the primary softkey) depends on the nature of the href value:

If the <a> element's href attribute is a URL, the browser opens the document specified by the URL.

<a href="http://www.example.com/document.html">Link</a>

If the <a> element's href attribute is the ID of a target anchor, the browser opens the document that contains the anchor (unless the target is in the current document) and scrolls to the location of the target.

<a href="http://www.example.com/document.html#target-01">Link</a>

If the <a> element's href attribute is the URL for a Java Archive Description (JAD) file, the browser starts the process of downloading the Java object. For example:

<a href="http://www.example.com/game.jad>Download Game</a>

If the <a> element's href attribute is an email address in the form of a "mailto" URL, the browser asks the phone's email application to initiate an email message.

You can use the following syntax in mailto URLs to embed message headers or bodies:

mailtoURL	`="mailto:" [to] [headers]`
to	`=#mailbox`
headers	`="?" header * ("&" header)`
header	`=hname "=" hvalue`
hname	`=*urlc`
hvalue	`Legacy HTML`

For the specification of #mailbox, see RFC822 (http://www.w3.org/Protocols/rfc822/Overview.html). It consists of zero or more comma-separated email addresses, possibly including "phrase" and "comment" components. You must encode all URL reserved characters in "to" (parentheses, commas, and the percent sign, which commonly occur in the "mailbox" syntax).

Email sent to an ordinary email address:

<a href="mailto:developer@openwave.com">Email Openwave</a>

Email for a mail response system that requires the name of the file in the subject:

<a href="mailto:info@openwave.com?subject=%20Browser">...</a>

Email for a mail response system that requires a "subscribe" request in the body:

<a href="mailto:info@openwave.com?body=Subscribe%20%20Browser">...</a>

A message to a single user that includes a CC to another recipient:

<a href="mailto:developer@openwave.com?cc=info@openwave.com &body=hello">...</a>

A message that contains a web page in the body and that the user must address before sending:

<a href="mailto:?body=http://developer.openwave.com">...</a>

A message with an empty "to" address, specifying only a domain:

<a href="mailto:@openwave.com?body=www.openwave.com">...</a>

If the <a> element's href attribute is a telephone number using the "tel" or WTAI URL scheme, the browser instructs the phone to place a telephone call. (Be sure to check which schemes the phones in your marketplace support.)

The "tel" scheme is specified in RFC2806 (http://www.ietf.org/rfc/rfc2806.txt). It supports both normal voice telephone calls as well as connections to voice mailboxes and other voice messaging systems that can be operated with DTMF tones.

The WAP Wireless Telephony Application Interface (WTAI) is specified in the document with that name (available from the Open Mobile Alliance at http://www.wapforum.org).

To place a voice call with "tel" (hyphens optional):

<a href="tel:+1-1-650-480-8000">Call Openwave</a>

To use "tel" to call a number, wait for a moment, and then emit two DTMF tones for the numbers 1 and 2:

<a href="tel:+1-1-650-480-8000;postd=pp12">...</a>

To place a call with WTAI:

<a href="wtai://wp/mc;16504808000">Call Openwave</a>

Example

The following two examples show how documents can contain relative links to each other.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"
      "http://www.openwave.com/dtd/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <title>Anchor 1</title>
    </head>
    <body>
      <p>This is document 1.</p>
      <p>
        <a href="a-02.html" accesskey="1" title="Go to 2">
          Go to Document 2.
        </a>
      </p>
    </body>
</html>
 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"
      "http://www.openwave.com/dtd/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <title>Anchor 2</title>
    </head>
    <body>
      <p>This is document 2.</p>
      <p>
        <a href="a-01.html" accesskey="1" title="Go to 1">
          Go to Document 1.
        </a>
      </p>
    </body>
</html>

This example includes a link to a target anchor in the same document.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"
      "http://www.openwave.com/dtd/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <title>Anchor 3</title>
    </head>
    <body>
      <p><a href="#section-03" title="Sect 3">Go to Section 3.</a></p>
 
      <p>...</p>
 
      <h1>
        <a id="section-03"/>
        Section 3
      </h1>
 
      <p>...</p>
 
    </body>
</html>

<abbr>

The <abbr> ("abbreviation") element is a semantic, inline element that contains an abbreviation.

Openwave Mobile Browser displays abbreviations in regular body text, that is, with no boldface, italics, and so on.

Empty or any combination of text and the following elements: <br>, <span>, <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>, <q>, <i>, <b>, <big>, <small>, <a>, <img>, <object>, <input>, <select>, <textarea>, <label>.

Attributes

class, id, style, title, xml:lang

`class`, `id`, `style`, `title`, `xml:lang`	See Common Attributes.
`action`	Required. The URL where the browser sends the form data when the user presses the submit button.
`enctype`	The MIME type used to encode the content of the form. For more information about MIME types in forms, see section 17.13.4 of the W3C "HTML 4.01 Specification" (`http://www.w3.org/TR/html4/interact/forms.html#h-17.13.4`).
`method`	`get \| post` The HTTP method for passing the form data to the web server. The default method is `get`.

`class`, `id`, `style`, `title`, `xml:lang`	See Common Attributes.
`alt`	Required. Alternative text displayed if the image can't be displayed (for example, because the file can't be found or the device doesn't support the file's image format). In some cases, you can use images "drawn" with text characters instead of alternative text. For example, use (`alt="->"`) for a right-pointing arrow ( `->` ).
`height`	The image height, in pixels. The browser scales the image to match the height you set.
`localsrc`	A WML extension to XHTML-MP for displaying one of the hundreds of Openwave icons and WAP pictograms included with Openwave Mobile Browser on the phone. You can reference icons by name or number. For example, `<img localsrc="78" alt="bird" src="" />` is the same as `<img localsrc="bird" alt="bird" src="" />`. When inserting an icon with the `localsrc` attribute, you can use the `src` attribute to specify the URL of an alternative icon, or you can use a null value (`src=""`). See Appendix A, Openwave Mobile Browser Icons, and Appendix B, WAP Pictograms, for a table of available icons and their names and numbers, along with the details on their syntax.
`longdesc`	A URL for a document that contains a long description of the image. Openwave Mobile Browser does not use this attribute.
`src`	Required. The URL of the image to insert. Although this attribute is required, you can give it a null value (`src=""`).
`width`	The image width in pixels. The browser scales the image to match the width you set.

`class`, `id`, `xml:lang`, `style`	See Common Attributes.
`accesskey`	A device keypad key (0-9, *, or #) that the user can press as a shortcut to selecting the input element and pressing the primary softkey. If the input element is a text field, pressing its access key places an insertion point at the end of any text in the field and puts the user in text-entry mode. If the element is a radio button, pressing the access key is a shortcut for selecting that button. If the element is a checkbox, pressing the access key is a shortcut for checking or unchecking it. If the element is a Submit or Reset button, pressing its access key is a shortcut for pressing that button (for example, pressing the Submit button's access key submits the form). You can also set access keys for Openwave Mobile Browser 6.2 with the CSS `-wap-accesskey` property, as described in `-wap-accesskey`. If there is a conflict, the access key is set by the CSS property.
`checked`	`checked` Specifies that an option button or a checkbox is checked when the form first loads, or when the user presses the form's Reset button. If this attribute isn't used for a group of option buttons, none of them is checked.
`disabled`	`disabled` Prevents the user from selecting the input element to enter text, select the option, and so on. This attribute is an XHTML extension to XHTML-MP.
`emptyok`	true \| false The default is `true`. Specifies whether the user can leave the field blank (`true`) or not (`false`). This attribute is a WML extension to XHTML-MP. See `-wap-input-required` for details on using that CSS property to require users to enter information in a form. In case of a conflict, the CSS property takes precedence.
`maxlength`	Use with `type="text"` and `type="password"` to set the maximum number of characters the user can enter in the field.
`name`	The name portion of the name-value pair for the input element (the name-value pair is sent to the web server when the user presses the Submit button). To create a group of radio or checkbox buttons, give them the same `name` attribute. The browser prevents users from selecting more than one radio button in a group. Users can check more than one checkbox in a group.
`readonly`	readonly Prevents the user from entering text. This attribute is a WML extension to XHTML-MP.
`size`	Use with `type="text"` and `type="password"` to set the width of the field, in characters.
`src`	Use with `type="submit"` and `type="reset"` to set the URL of an image to use as the label for the button, instead of text. If the image can't be displayed, the browser displays the text set by the `value` element. If neither is available, the browser displays the default text for the button ("Submit" or "Reset").
`tabindex`	The element's position in the "tabbing" order in the document, that is, the order in which the input focus shifts from element to element when the user presses the key on the device that is mapped to the "tab" function. Although the browser supports this attribute, no existing devices have assigned a key to tab, so in effect, `tabindex` is not used.
`title`	The primary softkey label when the element is selected. For text and password fields, use "Edit" or a similar title to describe the effect of pressing the softkey. For radio buttons and checkboxes, use a title that reflects the value when the button is checked. For Submit or Reset buttons, use "Submit," "Reset," or another title that describes the effect of pressing the button.
`type`	`checkbox \| hidden \| password \| radio \| reset \| submit \| text` The type of input element. If you don't specify the type, the default is `text`.
`value`	For `type="checkbox"` and `type="radio"`, specifies the value portion of the name-value pair sent to the server if the option is selected when the user submits the form. For `type="submit"` and `type="reset"`, specifies text to display in the button in place of the default text (that is, "Submit" and "Reset," which are displayed if you don't include a `value` or `src` argument). For `type="hidden"`, `type="password"`, and `type="text"`, specifies the default value of the control. The default value is displayed as text in a text field and as asterisks in a password field.

Elements and Attributes

Semantic and Presentation Elements

Common Attributes

<a>

Contents

Attributes

Notes

Example

<abbr>

Contents

Attributes

Example

<acronym>

Contents

Attributes

Example

<address>

Contents

Attributes

Example

<b>

Contents

Attributes

Example

<base>

Contents

Attributes

Example

<big>

Contents

Attributes

Example

<blockquote>

Contents

Attributes

Notes

Example

<body>

Contents

Attributes

Example

<br>

Contents

Attributes

Example

<caption>

Contents

Attributes

Example

<cite>

Contents

Attributes

Example

<code>

Contents

Attributes

Example

<dd>

Contents

Attributes

<dfn>

Contents

Attributes

Example

<div>

Contents

Attributes

Example

<dl>

Contents

Attributes

Example

<dt>

Contents

Attributes

<em>

Contents

Attributes

Example

<fieldset>