Fundamentals of XHTML MP in Mobile Web Development

Mobile Web Development


February 2008

$16.20

Building mobile websites, SMS and MMS messaging, mobile payments, and automated voice call systems with XHTML MP, WCSS, and mobile AJAX

Fundamentals of XHTML MP

Since XHTML MP is based on XHTML, certain syntactical rules must be followed. Making syntactical errors is a good way to learn a programming language, but so that you don't get frustrated with them, here are some rules you must follow with XHTML MP! Remember, HTML is very forgiving in terms of syntax, but make a small syntax error in XHTML MP and the browser may refuse to show your page!

Overall, XHTML elements consist of a start tag—element name and its attributes, element content, and closing tag. The format is like:

<element attribute="value">element content</element>

XHTML Documents Must be Well Formed

Since XHTML is based on XML, all XHTML documents must adhere to thebasic XML syntax and be well formed. The document must also have a DOCTYPE declaration.

Tags Must be Closed!

All open tags must be closed. Even if it is an empty tag like "<br>", it must be used in the self-closed form like "<br />". Note the extra space before the slash. It's not mandatory, but makes things work with some older browsers. If you can validate within your editor, make it a practice to do that. Also cultivate the habit of closing a tag that you start immediately—even before you put in the content. That will ensure you don't miss closing it later on!

Elements Must be Properly Nested

You cannot start a new paragraph until you complete the previous one. You must close tags to ensure correct nesting. Overlapping is not allowed. So the following is not valid in XHTML MP:

<p><b>Pizzas are <i>good</b>.</i></p>

It should be written as:

<p><b>Pizzas are <i>good</i>.</b></p>

Elements and Attributes Must be in Lowercase

XHTML MP is case sensitive. And you must keep all the element tags and all their attributes in lowercase, although values and content can be in any case.

Attribute Values Must be Enclosed within Quotes

HTML allowed skipping the quotation marks around attribute values. This will not work with XHTML MP as all attribute values must be enclosed within quotes—either single or double. So this will not work:

<div align=center>Let things be centered!</div>

It must be written as:

<div align="center">Let things be centered!</div>

Attributes Cannot be Minimized

Consider how you would do a drop down in HTML:

<select>
<option value="none">No toppings</option>
<option value="cheese" selected>Extra Cheese</option>
<option value="olive">Olive</option>
<option value="capsicum">Capsicum</option>
</select>

The same drop down in XHTML is done as:

<select>
<option value="none">No toppings</option>
<option value="cheese" selected="selected">Extra Cheese</option>
<option value="olive">Olive</option>
<option value="capsicum">Capsicum</option>
</select>

The "selected" attribute of the "option" element has only one possible value and, with HTML, you can minimize the attribute and specify only the attribute without its value. This is not allowed in XHTML, so you must specify the attribute as well as its value, enclosed in quotes. Another similar case is the "checked" attribute in check boxes.

XHTML Entities Must be Handled Properly

If you want to use an ampersand in your XHTML code, you must use it as &amp; and not just &.

& is used as a starting character for HTML entities—e.g. &nbsp;, &quot;, &lt;, &gt; etc. Just using & to denote an ampersand confuses the XML parser and breaks it. Similarly, use proper HTML Entities instead of quotation marks, less than/greater than signs, and other such characters. You can refer to http://www.webstandards.org/learn/reference/charts/entities/ for more information on XHTML entities.

Most Common HTML Elements are Supported

The following table lists different modules in HTML and the elements within them that are supported in XHTML MP version 1.2. You can use this as a quick reference to check what's supported.

Module

Element

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

Presentation

b, big, hr, i, small

Style Sheet

style element and style attribute

Hypertext

a

List

dl, dt, dd, ol, ul, li

Basic Forms

form, input, label, select, option, textarea, fieldset, optgroup

Basic Tables

caption, table, td, th, tr

Image

img

Object

object, param

Meta Information

meta

Link

link

Base

base

Legacy

start attribute on ol, value attribute on li

Most of these elements and their attributes work as in HTML. Table support in mobile browsers is flaky, so you should avoid tables or use them minimally. We will discuss specific issues of individual elements as we go further.

XHTML MP Does Not Support Many WML Features

If you have developed WAP applications, you would be interested in finding the differences between WML (Wireless Markup Language—the predecessor of XHTML MP) and XHTML MP; apart from the obvious syntactical differences. You need to understand this also while porting an existing WML-based application to XHTML MP. Most of WML is easily portable to XHTML MP, but some features require workarounds. Some features are not supported at all, so if you need them, you should use WML instead of XHTML MP. WML 1.x will be supported in any mobile device that conforms to XHTML MP standards.

Here is a list of important WML features that are not available in XHTML MP:

  • There is no metaphor of decks and cards. Everything is a page. This means you cannot pre-fetch content in different cards and show a card based on some action. With XHTML MP, you either have to make a new server request for getting new content, or use named anchors and link within the page.
  • You could use the <do> tag in WML to program the left and right softkeys on the mobile device. Programming softkeys is not supported in XHTML MP; the alternative is to use accesskey attribute in the anchor tag (<a>) to specify a key shortcut for a link.
  • WML also supports client-side scripting using WMLScript—a language similar to JavaScript. This is not supported in XHTML MP yet, but will come in near future in the form of ECMA Script Mobile Profile (ECMP).
  • WML also supported client-side variables. This made it easier to process form data, validate them on the client side, and to reuse user-filled data across cards. This is not supported in XHTML MP.
  • With XHTML MP, you have to submit a form with a submit button. WML allowed this on a link. WML also had a format attribute on the input tag—specifying the format in which input should be accepted. You need to use CSS to achieve this with XHTML MP.
  • There are no timers in XHTML MP. This was a useful WML feature making it easier to activate certain things based on a timer. You can achieve a similar effect in XHTML MP using a meta refresh tag.
  • The WML events ontimer, onenterbackward, onenterforward, and onpick are not available in XHTML MP. You can do a workaround for the ontimer event, but if you need others, you have to stick to using WML for development.
  • XHTML MP also does not support the <u> tag, or align attribute on the <p> tag, and some other formatting options. All these effects can be achieved using CSS though.

Summary

In this article, we had a look at the fundamentals of XHTML MP and also at the grammar that must be followed for development with it. Next, we listed different modules in HTML and the elements within them that are supported in XHTML MP version 1.2. We finished the article by listing the important WML features that are not available in XHTML MP.

Books to Consider

comments powered by Disqus
X

An Introduction to 3D Printing

Explore the future of manufacturing and design  - read our guide to 3d printing for free