XHTML

From BC$ MobileTV Wiki
Jump to: navigation, search
eXtensible HyperText Markup Language (XHTML)
eXtensible HyperText Markup Language (commonly abbreviated XHTML), is a web programming language used to define the visual properties of a data shared through the World Wide Web. It was also quickly becoming a de facto standard for the Mobile Web (Mobile Internet). Both Compact HTML (cHTML) developed for i-Mode devices by NTT Docomo in Japan, and the more open source xHTML Mobile profile standards developed by the Open Mobile Alliance are subsets of xHTML 1.0 strict.



Specifications



DOCTYPEs

In order to validate an XHTML document, a Document Type Declaration, or DOCTYPE, may be used. A DOCTYPE declares to the browser which Document Type Definition (DTD) the document conforms to. A Document Type Declaration should be placed before the root element.

These are the most common XHTML Document Type Declarations:



XHTML 1.0

Transitional

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


Strict

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


Frameset

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 


XHTML 1.1

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

XHTML Mobile Profile

XHTML Mobile Profile, also known as XHTML MP or XHTML "Mobile OK" is a strict, mobile browser-safe, minimalist representation of the full HTML family of tags.

 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

MobileOK

MobileOK is the most modern and feature-rich, mobile-compatible XHTML markup (with support for HTML5):

  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">


POWDER
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://www.w3.org/2007/11/powder-profile">
       <link rel="describedby" href="powder.xml" type="application/powder+xml"/>

NOTE: In addition, the work that has gone into Semantic Web, the Mobile Web is high on the W3C's radar this time around. Thus the majority of the work done for MobileOK can be leveraged as well, while HTML5 is being marketed and touted as the one true next-generation for any Mobile Devices looking to offer a serious Mobile Internet experience, with several of the most prominent touch-screen devices already adopting it (i.e. iPhone, Android, Nokia, Blackberry Torch)

Use of XHTML in Mobile Web

EXAMPLES


XHTML 2.0

XHTML 2.0, was in a draft phase from August 2006 to 2008. If an XHTML 2.0 Recommendation is published with the same document type declaration as in the current Working Draft, the declaration will appear as:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> 

[1] NOTE: A placeholder DTD schema exists at the corresponding URI, though it currently only includes the character reference entities from previous recommendations. XHTML 2 contemplates both a version attribute and an xsi:schemalocation attribute on the root HTML element that could possibly serve as a substitute for any DOCTYPE declaration.

NOTE2: Word on the street is that XHTML is dying a slow but steady death while HTML5 will be the one web standard to rule them all.


XHTML + RDFa

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:foaf="http://xmlns.com/foaf/0.1/"
       xmlns:dc="http://purl.org/dc/elements/1.1/" >

NOTE: The good news is that semantic HTML and well-formedness will still at least be enforced in HTML5, while use of microdata will be suggested as a go-between from Microformats and RDFa standardization work that was scheduled to go into XHTML2.


HTML5

HTML5 does not require a doctype, as validation is not DTD-based.



XML NAMESPACEs and Schemas

In addition to the DOCTYPE, all XHTML elements must be in the appropriate XML namespace for the version being used. This is usually accomplished by declaring a default namespace on the root element using xmlns="namespace" as in the example below:

  • For XHTML 1.0, XHTML 1.1 and HTML5
 <html xmlns="http://www.w3.org/1999/xhtml"> 


  • XHTML 2.0 requires both a namespace and an XML Schema instance declaration. These might be declared as
 <html xmlns="http://www.w3.org/2002/06/xhtml2/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

[2]


Future of xHTML .vs. HTML

[3]



Embedding Rich Media



TEMPLATE

The XHTML 1.0 Transitional skeleton

This skeleton allows the use of target="_blank" and iframes.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <!-- metadata -->
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
   <title>Title (required)</title>
   <!-- styling -->
   <link rel="stylesheet" type="text/css" href="default.css" />
 </head>
 <body>
   <div id="canvas">
     <!-- content -->
   </div>
 </body>
 </html>

The XHTML 1.0 Strict skeleton

If you want to open links in a new window, this skeleton needs a little JavaScript. For performance reasons, I've put it at the bottom of the page. I also made it inline to avoid an extra HTTP request.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>   
   <!-- metadata -->
   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
   <title>Title (required)</title>
   <!-- styling -->
   <link rel="stylesheet" type="text/css" href="default.css" />
 </head>
 <body>
   <div id="main">
     <!-- content -->
   </div>
 <!-- scripts -->
 <script type="text/javascript">
 /*<![CDATA*/
 window.onload = (function() { 
	var o = document.getElementsByTagName('a'),i;
	for(i=0; i < o.length; i++) {
		if(o[i].className === 'external') {
		  o[i].target = '_blank';
		}
	}
 });
 /*]]>*/
 </script>
 </body>
 </html>

[4]



Resources


Tutorials


External Links


References

  1. wikipedia:xhtml
  2. wikipedia:xhtml
  3. Valid doctype declarations: www.totalvalidator.com/support/doctypes.html
  4. Domino 2.0 -- My new XHTML page skeleton: https://web.archive.org/web/20110221030201/http://blog.lotusnotes.be/domino/archive/2007-09-05-xhtml-page-skeleton.html


See Also

HTML | HTML5 | XML | RDFa