How to Create XHTML MP Templates that Work on Every Mobile Platform

The following is an excerpt from my book, Programming the Mobile Web.

---

XHTML MP is based on the W3C’s XHTML Basic, and they are almost the same. The W3C has an online mobile validator at http://validator.w3.org/mobile; it accepts XHTML Basic and MP as valid markup.

XHTML Mobile Profile is a subset of XHTML. It is XML-based, so we need to follow the strict rules. If you have never worked with XHTML 1.0 or 1.1 for the Web, let’s analyze the differences compared with working with HTML:

• The file must have a root element (html tag).
• Every tag name and tag attribute must be in lowercase.
• Every attribute value must be enclosed in quotes.
• Every tag must be closed. This may seem obvious, but it is not; tags like <img>, <input>, and <br> don’t need to be closed in HTML, but they do need to be closed in XHTML. The general rule is to use self-closed tags, like <br />.
• The tags need to be closed in reverse order. If you open a paragraph and then a link, you must close the link before closing the paragraph.
• XHTML entities must be well formed. A mandatory space should be  ; and an ampersand character should be &.
• All attributes must have a value. For example, <option selected> is invalid; you must use <option selected="selected">.
• The DOCTYPE declaration is mandatory, and the XML opening tag is optional. In fact, for mobile browsers we should not insert the XML opening tag.

Warning: I assume you have some basic experience with HTML, CSS and Javascript; if not, you will find a lot of resources on the Web and excellent books from O’Reilly Media to help you get started.

Available Tags

We have finally arrived at the level of code. XHTML MP, as a subset of XHTML derived from HTML, will look familiar to most web developers.

The tags available in both XHTML Mobile Profile 1.2 and XHTML Basic 1.1 (the two standards are almost at the same level) are listed in Table 5-6. Some features, like scripting support, were added in XHTML MP 1.1 and others, like object support, in the last standard (1.2).

Tag types	Tags available
Structure	body, head, html, title
Text	abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
Links	a
Presentation	b, big, hr, i, small
Stylesheet	style
Lists	dl, dt, dd, ol, ul, li
Forms	form, input, label, select, option, textarea, fieldset, optgroup
Basic tables	caption, table, td, th, tr
Other	img, object, param, meta, link, base, script, noscript

If we compare previous versions of XHTML MP and Basic, the differences are bigger. The last XHTML Basic standard (1.1) added almost every addition in XHTML MP 1.2, and now the two are almost equal.

Warning: XHTML Mobile Profile 1.2 is the last standard from the OMA. The first draft was presented in 2004 and the approved version was released in 2008. That is why there are still some low- and mid-end devices on the market that don’t comply with this version. Remember that it takes some time for browser developers to comply with new standards, and more time for manufacturers to get devices using the new standards to the market.

We can still use a tag that is not supported in our declared DOCTYPE. It will not validate against the DTD, but most mobile browsers will simply ignore the tag without any error visible to the user.

Official Noncompatible Features

Every WAP 2.0 browser on the market today should understand and render the tags listed in Table 5-6. However, in XHTML MP (and Basic), there are also several tags, techniques, and technologies that are officially not supported. We will still test them in every browser, though, because as we’ve seen there are many full HTML browsers on the market, and others that will understand some noncompatible features. All of the following are officially unsupported:

• Nested tables (table inside other tables)
• Full table tags: thead, tbody, rowspan, and colspan attributes
• Full form tags: input type=“image”, input type=“file”
• Editing: ins, del
• Image maps
• Frames
• Iframes
• Deprecated formatting tags: e.g., font, dir, menu, strike, u, and center

We will check all browsers for compatibility with those features, as well as the following:

• Adobe Flash
• Microsoft Silverlight
• The XMLHttpRequest object (Ajax)
• SVG
• The canvas tag
• Other embedded objects: Windows Media, QuickTime, Java applets
• Multimedia tags: audio and video
• Opening links in new tabs or windows

We will also verify which URL schemas are available for each browser.

Creating Our First Compatible Template

Let’s create a very simple markup template that will be compatible with all devices. I really recommend that you use the source code view if you are using a visual web tool, like Adobe Dreamweaver or Microsoft Expression Web. You should feel comfortable with nonintrusive, semantic HTML code for mobile web development.

Our template will look like this:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
	"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>First Template</title>
</head>

<body>
	<h1>First Template</h1>
	<h2>Programming the Mobile Web</h2>
	<p>Welcome to the first template of this book</p>
	<p>It <strong>should work</strong> in every mobile browser in the market</p>
	<ol>
 	<li><a href="http://m.yahoo.com" accesskey="1">Yahoo!</a></li>
 	<li><a href="http://m.google.com" accesskey="2">Google</a></li>
 	<li><a href="http://m.bing.com" accesskey="3">Bing</a></li>
	</ol>
	<p><img src="images/copyright.gif" width="150" height="50"
 	alt="(C) mobilexweb.com" /></p>
</body>
</html>

Here are some comments on this code, which produces the results shown in Figure 5-8:

• We are using the XHTML MP DOCTYPE.
• We are using standard header tags for titles: h1 ... h6, not p or div tags.
• We are using the paragraph tag (p) to enclose text.
• We are using an ordered list to show a link menu. The option numbers match the accesskey attributes of the anchor (a) tags.
• We provide a width, height, and alternate text for all images.

Figure 5-8. The same template without CSS in the webOS, Android, Safari, BlackBerry, Nokia S60, Windows Mobile, Nokia S40 (low-end device), Motorola, and NetFront (Sony Ericsson device) browsers.

As these images prove, this code works on every platform. I know what you’re thinking: “Hey, this is an awful experience for the iPhone.” If you’re tempted to throw away this book right now, wait! Give me a chance. Using this exact code, we will create a great iPhone (or other smartphone) experience in the following pages. Well, OK, there may be some little changes to the code, but not so many. Our goal will be to keep our document template as simple as this one, even for very complex HTML 5 web apps.