Erik Thau-Knudsen's website  > Software > Writing for the Sony Ericsson cHTML web browser > Structure : HTML  | Contact | Back  |   
T610

Erik's notes on Writing for the Sony Ericsson cHTML web browser

Structure : HTML

Sony Ericsson prescribes that web pages for the T610 mobile phone should be in XHTML Strict (i.e., XHTML 1.0 Strict). Things are different in reality. An analysis of the accepted MIME types proves that HTML is accepted as well as XHTML. To the cHTML browser these are different types. HTML is interpreted as HTML, whereas XHTML is interpreted as a variety of XML. The advantage about this is the X, the eXtensibility. You may add more tags to your XHTML file than the specifications outline, as long as they are accustomed by an appropriate stylesheet. Otherwise, the contents of the tag will be rendered as inline elements. The main thing about the HTML/XHTML issue is that documents in both languages must be well-formed, complying with the specifications of the given SGML.

The outset of this aid is the XHTML 1.0 Strict and 1.0 specifications as well as the XHTML 1.1 Recommendations by the World Wide Web Consortium. I also pay my respect to the future, as indicated in the XHTML™ 2.0 : W3C Working Draft 22 July 2004.

Some tags are missing, because I have not tested them yet or their test results have not been finally interpreted.

Wireless Markup Language (WML) was invented for handheld devices. The cHTML browser of Sony Ericsson cellular phones can parse WML correctly. I have chosen XHTML instead, because it appears to be the technology of the future.

Tags and declarations

<?xml ... ?>
This is not at true tag, but the XML declaration. It is not required for the browser to work, and neither does it inflict with its functionality. However, I recommend to add it to the very top of the document for future development of interoperable text. Proposed form:
<?xml version="1.0" encoding="iso-8859-1"?>
The cHTML browser also tolerates encoding in US-ASCII. More about the xml declaration: XHTML 1.0: The Extensible HyperText Markup Language (Second Edition) : C.9. Character Encoding by the World Wide Web Consortium.
<a>
The <a> tag is allowed. It is reproduced by default in blue colour, and with blue underlining. Images will have a blue border. Only the href property is used. References to anchors - inline or external - do not work.
<address>
The <address> tag is allowed. The browser renders the text with italics as is the case in browsers like Opera, Mozilla, Netscape, Internet Explorer and Safari.
<b>
The bold typeface phrase element <b> is allowed. The browser renders the text with a bold typeface. This tag should be avoided, as the working draft for XHTML 2.0 does not include it. Use <strong> instead.
<body>
The <body> tag is compulsory. Styling with the style property is allowed; keep it inline, just in case. It also applies the settings of the deprecated bgcolor property. It can be nested into the <noframes> tag to present data otherwise unavailable to frames enabled WWW browsers.
<br />
The line break tag <br /> is allowed. It must be properly closed.
<caption>
The table caption tag <caption> is allowed. The browser displays the text above the table.
<cite>
The <cite> tag is allowed. By default, the browser does not render this phrase element in the output. Use the <cite> tag with stylesheets.
<div>
The division tag <div> is allowed. All text within the <div> tag is rendered with the minimum font size, including <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
<!DOCTYPE ...>

The Document Type Declaration is allowed. I have not tested whether it can be omitted. Keep it in your document, just in case.

According to Sony Ericsson's specifications for the T610 browser, the only allowed HTML version is XHTML 1.0 Strict. The Document Type Declaration is thus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

You may even upgrade to the most recent XHTML 1.1 definition:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

My discovery: You may also write XHTML 1.0 Basic or XHTML 1.0 Transitional in the Document Type Declaration (DTD). Even XHTML 1.0 Frameset is allowed (for sites with frames) and keep them in these formats with the below exceptions in mind, though. Apparently, the point is not what DTD you use but how you write the rest of the document. Needless to say, everything within the <html> tag should be in XHTML Strict. Just one single slash forgotten in the <br /> tag will render the whole document illegible. The Sony Ericsson T610 phone doesn't leave room for the error correction features that a screen based browser like Microsoft Internet Explorer has.

<em>
The emphasis phrase element <em> is allowed. The <em> tag renders the text in italics.
<fieldset>
The <fieldset> tag is allowed. By default, the cHTML browser will not produce a border surrounding the field.
<form>
The form tag <form> is allowed. The form field is rendered in logical brackets <>. In the cHTML browser, scroll down to the field and click Select to fill in the field. Avoid using client side applications like JavaScript to process forms. Use server side applications instead, such as PhP or CGS.
<frameset>
The browser ignores the <frameset> tag, i.e., it cannot show frames. See the explanation about the <noframes> tag.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
The <h1>, <h2>, and <h3> tags are allowed. They are rendered with corresponding sizes. The small header tags <h4>, <h5>, <h6> are by default rendered with normal font size, but they preserve their boldness.
<head>
Of course, the document must be DOM compliant, and the <head> tag is inevitable.
<hr />
The horisontal ruler tag <hr /> is allowed. It is rendered as a horisontal line with a margin of about 20 px to the right and the left of it. It cannot be subject to any style modifications. Keep it simple, and don't forget to close it properly. The XHTML Basic recommendation does not include this tag, but a T610 mobile phone will display it anyway.
<html>
The HTML tag <html> is allowed and compulsory. You might extend it with a few properties, but it is not required for the T610. Proposed full sounding:
<html xmlns="http://www.w3.org/1999/xhtml=" xml:lang="en=">
As mentioned elsewhere, everything within the <html> tag must be in XHTML. Keep it in XHTML 1.0 Strict or XHTML 1.1, just to be sure. The language value "en" for English of the language property xml:lang="en" should be replaced with the ISO value of the language of your document.
<i>
The italics phrase element <i> is allowed. The browser renders the text in italics. This tag should be avoided, as the working draft for XHTML 2.0 does not include it. Use <em> instead.
<img />
The image tag <img /> is allowed. The tag must be properly closed. The <img /> tag properties width and height are not read. Instead, the browser will try to reproduce the image in its original size. If this size exceed the screen definition of the Sony Ericsson T610 mobile phone, which is 255 px by 255 px, then the image will be shrunk to fit the screen. For instance, if you have an image 400 px wide and 40 px high, the browser will shrink it to fit 255 pixels width, rendering the height to 26 px.
Chess Windsurfing Ice

The XHTML 1.0 recommendations prescribe the alt attribute in <img /> tags in the courtesy of text browsers. The T610 browser can manage without the alt attribute. The browser will still render the image. If you add the alt attribute to the <img /> tag, it must contain only one word. If the attribute contains two or more words, the browser will only reproduce a box containing the value of the alt attribute.

<legend>
The <legend> tag, which is a title field of the <fieldset> tag, is rendered in the cHTML browser as inline text before the rest of the fieldset contents, i.e., the <legend> tag is not defined in the cHTML browser. It can be difficult to achieve any distinctive effects using CSS on the <legend> tag. What works is in the stylesheet to define fieldset {display: block;}. At least it will insert a carriage return before.
<link />
All <link /> tags are allowed. There are certain problems with references to external stylesheets. Confer below. Other <link /> tags will not be accessed. Close the tag properly!
<meta />
All <meta /> tags are allowed. The browser will not access them, apparently. Close the tag properly!
However, I recommend to include tags for text encoding and natural language. Preference should be given to the ISO-8859-1 encoding, alternatively US-ASCII, both of which are known to work. This also goes for HTML documents in Cyrillics. I. e., write
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<noframes>
The <noframes> tag in framed based sites used to have a warning of the sort Sorry, your browser does not show frames. Please upgrade to a recent browser.. Time has come to replace this message with a proper navigation menu, using normal tags like <ol> or <p>. My page Practice and examples ... will give you some ideas of how to use the /index.html page in a frame based site.
<ol>
The ordered list tag <ol> is allowed. The output is a numbered list. It is unclear whether it is allowed to make nested lists, i. e., of the type <ol><li>text<ol><li>more text</li></ol></li> </ol>
<p>
The paragraph <p> tag is allowed. It is rendered with normal text. There is no margin between two adjacent paragraphs in the Sony Ericsson cXHTML browser.
<q>
The quotation tag <q> is allowed. It is rendered with normal text, i.e., there are no quotation marks. Using stylesheets to obtain quotation mark features will not help. What you can do with CSS instead is to attribute other distinctive features to the quotation tag <q> , such as an underline, and define it only for the handheld devices.

Example: Underlining the quotation in the T610 browser, but using quotation marks («, »; and ' , ' for quotations within quotations) for other visual browsers

In the <head> section of your web document, write the following:

<style type="text/css">
/*<![CDATA[*/
q { quotes: '\00AB' '\00BB' '\2018' '\2019'; }
@media handheld {
    q {text-decoration: underline; }
   }
/*]]>*/
</style>

<script>
The <script> tag is allowed. The browser will not access the script.
In other words, all your fancy JavaScripts are like chunks of useless code to the T610. Instead, it will write two slashes // or bits of the code. Try to use stylesheets to hide the contents of the <script> tag. See my chapter about Function.
<strong>
The phrase element <strong> emphasizes text. The text is rendered with bold typeface.
<style>
The <style> tag is allowed. There are certain problems with its use, so avoid too many fancy features. In general, styling with the <style> tag is better than with external stylesheets.
<table>
The table tag <table> is allowed. Tables are rendered with a 1-2 px spacing between the cells. This is also valid, if you slice an image and use a table to structure the slices for navigation purposes. I.e., there will appear lines between the slices.

Table properties: The width property is not compulsory. If width is set to anything but width="100%", you will lose precious screen space. According to the XHTML 1.0 recommendations, any table must have a summary. Do note that the T610 browser in most cases displays the table summary when you scroll so that the the top of the table hits the upper edge of the screen. Use the summary to add more information in conjunction with the <th> and <caption> tags. Allowed, but ignored properties: cellspacing="" cellpadding="" border="" frame="" rules="".

Number of columns: Be careful about the number of columns. If your table has only one column, then that column will by default take up 50% of the available screen width and be centered, leaving 25% of screen width on both sides as margins. If it has two columns with a wide content (many characters or wide), those columns will be displayed at the same time. If there are more columns, only two table columns are visible at a time, unless the fields are very small (small images or short words). You can still acess the last cells by using the telephone's joystick. Thus use tables when you need to convey information that is impossible to convey otherways.

Nested tables: Also, do not nest tables into other tables. You may risk - in the best case - unpleasantly narrow columns. In the worst case, the whole document may not be visible at all. Example of bad table drawing:

<table summary="My information"><tr><td><table summary="My nested table"><tr><td>My text</td></tr></table></td></tr></table>.

Rule of a thumb: use tables the same way as you would want to use tables if writing a book. Do not resort to tables as a mere means of structuring a web page.

Even when keeping all this correct coding in mind, you may still face that the table collapses into text parts, i.e., will not keep its block structure, for reasons not yet understood.

<tbody>
The table body tag <tbody> is allowed. In normal XHTML, its chief effect is to distinguish table parts from the <thead> and <tbottom> tag. Since the World Wide Web Consortium has not included it into the XHTML Basic standard, there is no reason to include it here.
<td>
The table field tag <td> is allowed. As a rule, there is room for two table fields (i. e., columns) at a time on the screen, unless the fields contain only very short words. The field tag <td> does not support the colspan="" or rowspan="" properties. Using any of them will make the page illlegible. I am much indebted to Mr. Tom Rush of New Zealand who wrote med about this discovery on 2005-02-23. See also my remarks to the <table> tag.
<th>
The table heading field tag <th> is allowed. The text within the field is rendered with a bold typeface. As is the case with table field tag <td>, the table heading field tag <th> does not support the colspan="" or rowspan="" properties.
<thead>
The table head tag <thead> is allowed. The XHTML Basic 1.0 definition disrecommends it. I recommend using it (provided, of course, that it makes sense in the table) for the sake of keeping close to the forthcoming XHTML 2.0 Recommendation, which is expected to unite the XHTML of screen media (such as desktop PCs and powerbooks) as well as of handheld media. The table head tag <thead> is intended to add structure to the table, and, by the way, can also be subject to stylesheet manipulation in the Sony Ericsson browsers. Info: XHTML™ 2.0 : W3C Working Draft 22 July 2004: XHTML Tables Module.
<title>
The <title> tag is allowed and used. The browser displays it in the top line of the mobile phone window. Keep the title short, about 23 characters; the T610 browser will hide the rest of long document titles.
<tr>
The table row <tr> tag is allowed and is a compulsory part of a table.

Erik Thau-Knudsen, 2005-03-29