Fundamentals of XHTML MP in Mobile Web Development

Exclusive offer: get 50% off this eBook here
Mobile Web Development

Mobile Web Development — Save 50%

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

$26.99    $13.50
by Nirav Mehta | April 2008 | MySQL Open Source PHP

XHTML Mobile Profile (XHTML MP) is the standard language for mobile web development. XHTML MP is an XHTML variant. It offers richer presentation and is very similar to HTML. XHTML MP is built on top of XHTML Basic. In this article by Nirav Mehta, we will have a look at the fundamentals of XHTML MP and the grammar which must be followed for development in it.

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.

Mobile Web Development Building mobile websites, SMS and MMS messaging, mobile payments, and automated voice call systems with XHTML MP, WCSS, and mobile AJAX
Published: February 2008
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Nirav Mehta

Nirav Mehta is renowned for his entrepreneurial ventures, his breakthrough ideas, and his contribution to open source. Nirav leads a software development company – Magnet Technologies – from India that specializes in Rich Internet Applications, Web, and Mobile. Nirav believes in simplifying the most complicated ideas and presenting them in lucid language.

Over the last ten years, Nirav has written and spoken on a variety of topics. He has also been instrumental in localization efforts in India and training programmers to be effective developers.

He has set up a website completely dedicated to the book. You can find more information on it here: cmsbook.info

Books From Packt

Mobile Web Development
Mobile Web Development

Building Powerful and Robust Websites with Drupal 6
Building Powerful and Robust Websites with Drupal 6

Building Websites with Joomla! v1.0
Building Websites with Joomla! v1.0

AJAX and PHP: Building Responsive Web Applications
AJAX and PHP: Building Responsive Web Applications

Learning the Yahoo! User Interface library
Learning the Yahoo! User Interface library

Drupal 5 Themes
Drupal 5 Themes

Learning Drupal 6 Module Development
Learning Drupal 6 Module Development

Moodle E-Learning Course Development
Moodle E-Learning Course Development


 

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software