XHTML Presented by Kelly(Geun-young) Yim
Learning Objectives List the difference between XHTML and HTML Create a valid, well-formed XHTML document Convert an existing HTML document to XHTML Decide when XHTML is more appropriate than HTML
What is XHTML? XHTML stands for eXtensible HyperText Markup Language Two major puposes XHTML is a stricter standard than HTML XHTML allows for modularisation Overall, XHTML is almost the same as HTML However, XHTML code must be well-formed.
Why XHTML? Most web pages were designed in HTML However, HTML allows all sort of mistakes and bad formatting in its code. XHTML is stricter and easier to parse
An XHTML document must contain a DOCTYPE declaration and four elements XHTML Also, the root html tag of an XHTML document must include an xmlns declaration for the XHTML namespace.
Preferred DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 1-strict.dtd">
XML Prolog Language XHTML Has to be the same
XHTML vs. HTML Incorrect This text is probably bold and underlined, but inside incorrectly nested tags. This text is probably bold and underlined, but inside incorrectly nested tags. Documents must be well-formed Needs to be switched
XHTML vs. HTML Incorrect Here is a list: Here is a list:<ul> Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 Elements must be closed
XHTML vs. HTML Incorrect Welcome to my web page! Welcome to my web page! What if there are no closing tags in HTML / / / Make sure to put a space between
Common empty tags in HTML area base basefont br hr img input link meta param
XHTML vs. HTML This is an example of bad case. This is an example of bad case. Tags must be lowercase h1 Attribute names must be lowercase Important Notice class
XHTML vs. HTML Tables are fun! Tables are fun! </table> Attribute values must be quoted “ ”
XHTML vs. HTML <form> </form> Attributes cannot be minimized =“checked” …/> =“disabled” …/>
A complete list of minimized attributes checked compact declare defer disabled ismap nohref noresize noshade nowrap readonly selected multiple
XHTML vs. HTML <img src="banner.gif" name="mybanner" /> </a> The name attribute is replaced with the id attribute id=“anchor”> id=“mybanner” />
XHTML vs. HTML Home & Garden Home & Garden Ampersands are not supported amp;
XHTML vs. HTML Image alt attributes are mandatory alt="title"
XHTML vs. HTML Scripts and CSS must be escaped <!– document.write ('Hello World!'); //--> <!--.SpecialClass { color: #000000; } --> language="javascript" /*<![CDATA[*/ /*]]>*/ createElementNS type=“text/css” /*<![CDATA[*/ /*]]>*/
XHTML vs. HTML Some elements may not be nested Element Cannot contain… aa pre big, img, object, small, sub, sup button button, fieldset, form, iframe, input, isindex, label, select, textarea labellabel formform
When to convert When you want pages to be easily viewed over a nontraditional Internet-capable device, such as a PDA or Web-enabled telephone. When you plan to work with XML in the future When it is important your site to be current with the most recent W3C standards. When you will need to convert your documents to another format.
Exercise Change this HTML into an XHTML document conforming to the W3C’s strict standard. Validate your page using the validator available at
Convert html to XHTML XHTML page It is important your site to be current with the most recent W3C standards. Welcome to my page. I hope that you enjoy your stay. XHTML is similar to HTML Validator