Extending XHTMLCreating New Elements and Attributes

Because XHTML is just an XML application, you can extend it simply by creating new elements and attributes. I'll take a look at an example here, creating a new element, <underlinedredtext> , that will style its contents as underlined red text. Here's how that element might be defined in a DTD:

 <!ELEMENT underlinedredtext (#PCDATA)>

You can also add attributes to an element like thisI will do that here, calling the attribute underlinedredtextattribute :

 <!ELEMENT underlinedredtext (#PCDATA)>  <!ATTLIST underlinedredtext underlinedredtextattribute CDATA #IMPLIED >

This is a new element that I'm adding to XHTML. To include the rest of the XHTML 1.0 Transitional DTD, I'll create a new parameter entity, XHTML1.0TransitionalDTD :

 <!ELEMENT underlinedredtext (#PCDATA)>  <!ATTLIST underlinedredtext underlinedredtextattribute CDATA #IMPLIED >  <!ENTITY % XHTML1.0TransitionalDTD PUBLIC "-//W3C//DTD XHTML 1.0   Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

All that remains is to include a reference to this parameter entity to make sure the entire XHTML 1.0 Transitional DTD is included:

Listing ch17_17.dtd

 <!ELEMENT underlinedredtext (#PCDATA)> <!ATTLIST underlinedredtext underlinedredtextattribute CDATA #IMPLIED > <!ENTITY % XHTML1.0TransitionalDTD PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  %XHTML1.0TransitionalDTD;

The result is a fully functional DTD that supports the new element we've created. It's that easy to extend XHTML. As soon as you know how to work with XML, you can extend XHTML without problem. Here's an XHTML document, ch17_18.html, that uses this new element:

Listing ch17_18.html

 <?xml version="1.0"?> <!DOCTYPE html SYSTEM "ch17_18.dtd"> <html xmlns="ch17_17.dtd" xml:lang="en" lang="en">     <head>         <title>             Extending XHTML         </title>         <link rel="stylesheet" href="ch17_19.css" />     </head>     <body>         <p>             This text uses a new XHTML element for  <underlinedredtext>emphasis</underlinedredtext>.  </p>     </body> </html>

You can tell an XHTML browser how to handle your new element with a CSS stylesheethere's an example, ch17_19.css:

Listing ch17_19.css

 underlinedredtext {text-decoration: underline; color: #FF0000} p (diplay:block}

Unfortunately, no major browser will handle ch17_18.html correctly yet because those browsers do not yet validate XHTML documents by checking the DTD (because ch17_18.html has the extension .html). You could try treating this page as XML, ch17_20.xml, if you use the <?xml-stylesheet?> XML processing instruction to include ch17_19.css instead of <link> :

Listing ch17_20.xml

 <?xml version="1.0"?>  <?xml-stylesheet type="text/css" href="ch17_19.css"?>  <!DOCTYPE html SYSTEM "ch17_17.dtd"> <html xmlns="ch17_17.dtd" xml:lang="en" lang="en">     <head>         <title>         </title>     </head>     <body>         <p>             This text uses a new XHTML element for             <underlinedredtext>emphasis</underlinedredtext>.         </p>     </body> </html>

This used to work in Internet Explorer, but the current version (version 6) has problems with the XHTML DTDs; we'll have to wait a while until a browser appears that allows you to extend XHTML. It's easy enough to extend XHTML, but seeing the results with today's browsers is another story.

This example used only XHTML 1.0; in XHTML 1.1, the story is a little more involved. XHTML 1.1 is module-based, and any DTD that extends XHTML 1.1 must to declare its namespace using the XML parameter entity %XHTML.ns; (this is the same namespace you'll use in the <html> element in documents that use the DTD). You must do this because the XHTML 1.1 Structure module, which is central to XHTML 1.1, uses this parameter internally and needs to know the namespace you're using.

Doing this is easy enough; I'll use a URI as the new DTD's namespace (the namespace need not be a URI, of courseit can be any unique name ):

  <!ENTITY % XHTML1.ns "http://www.starpowder.com/DTDs/ch17_17.dtd" >  <!ELEMENT underlinedredtext (#PCDATA)> <!ATTLIST underlinedredtext underlinedredtextattribute CDATA #IMPLIED > <!ENTITY % XHTML1.1DTD PUBLIC "-//W3C//DTD XHTML 1.1//EN"      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> %XHTML1.1DTD;

In addition, you should make sure that you use the same namespace in the xmlns attribute of the document element of documents that use this DTD, like this:

 <?xml version="1.0"?>  <!DOCTYPE html SYSTEM "http://www.starpowder.com/DTDs/ch17_17.dtd">  <html xmlns="http://www.starpowder.com/DTDs/ch17_17.dtd"   xml:lang="en" lang="en">  <head>         <title>         </title>     </head>     <body>         <p>             This text uses a new XHTML element for             <underlinedredtext>emphasis</underlinedredtext>.         </p>     </body> </html>