XHTML: XML for Client-Side Developers

XHTML XML for Client Side Developers

• HTML 4.01 tweaked to conform to XML standards • HTML returned to its roots of defining structure, not presentation But what is it?

• Consistency • Efficiency • Compatibility • Accessibility Why use it?

• As an XML-based language, XHTML is standardized • Markup is structural, not presentational • Pages follow a logical outline • Results are more predictable across browsers Consistency

• Code is free of presentational hacks • Structure and presentation (and behavior) are no longer integrated • Pages are easier to markup and update • One document to serve them all »Web »Print »Palm » Non-visual media • Consistency in structure speeds troubleshooting Efficiency

• Backward compatible • Forward compatible • Compatible with other XML-based languages, applications and protocols Compatibility

Accessibility • One document to serve them all • Logical structure makes pages easier to follow without visual cues

Learn ‘em, Live ‘em, Love ‘em

Use a DOCTYPE
Avoid deprecated tags
Nest tags correctly
Close all tags
All tags & attributes in lower case
All attributes must have values which are quoted
All special characters must be encoded

Tags best left behind Deprecated Tags <font> <xmp> <isindex> <applet> <listing> <strike> <u> <blink> <s>

<center> <plaintext> <dir> <basefont> <menu> <nextid> Presentational Tags <b> <i> Browser-specific Extensions <embed> <multicol> <layer> <spacer> <marquee> <ilayer> <bgaudio>

Were you raised in a barn? • All opened tags must be closed:

<p>Learning XHTML is ea sy when you know the rules. It also helps to keep in mind the time you will inevitably save by not having to code several versions.</p> • All empty tags must be as well: » Image tags: <img src="/foo/bar.jpg " alt="a picture of a bar" /> » Line breaks: <br /> » Horizontal rules: <hr />

Proper nesting = good pages • Tags opened last should be closed first: NO: <strong>This phrase is <em>very important.</strong></em> YES: <strong>This phrase is <em>very important</em>.</strong> • Obey nesting rules: » <a> cannot contain <a> »

<pre> cannot contain <img> , <object> , <big> , <small> , <sub> or <sup> » <button> cannot contain <input> , <select> , <textarea> , <label> , <button> , <form> , <fieldset>, <iframe> , <isindex> » <form> cannot contain <form> » <label> cannot contain <label>

e.e. cummings loves XHTML NO: <IMG SRC="/foo/BAR.jpg" ALT="A picture" /> NO: <Img Src="/foo/BAR.jpg" Alt="A picture" /> YES: <img src="/foo/BAR.jpg" alt="A picture" /> Note: It is okay to have MiXed CaSE or ALL CAPS in the attribute values.

Values exist to be quoted • All values assigned to tag attributes must be quoted: NO: <img src="/foo/BAR.jpg" alt=description /> YES: <img src="/foo/BAR.jpg" alt="A picture" /> • All attributed must have values: NO: <input type="check box" checked /> YES: <input type="checkbox" checked="checked" /> » Some affected attributes: checked compact declare defer disabled ismap multiple noresize noshade nowrap readonly selected

They’re special, act like it • Encode characters using HTML character entity ( < ) or decimal ( < ) references • Encode characters in both body copy and URLs: No: <a href="default.asp?foo= bob&bar=yes">link</a> Yes: <a href="default.asp?foo= bob&bar=yes">link</a> Yes: <a href="default.asp?foo= bob&bar=yes">link</a>

3 Flavors and then some •XHTML 1.0 » Transitional » Frameset »Strict •XHTML 1.1 •XHTML 2.0

XHTML 1.0 Transitional • Closest match to HTML 4.01 • Easiest way to move into coding XHTML • Tolerates presentational markup • Forgives deprecated elements and attributes • DOCTYPE :

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

XHTML 1.0 Frameset • Exactly like XHTML 1.0 Transitional •Replaces

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

XHTML 1.0 Strict • A boot-camp for your code • No presentational markup • No deprecated elements and attributes • DOCTYPE :

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

XHTML 1.1 • More restrictive • Eliminates all deprecated elements and attributes • lang attribute becomes xml:lang • name attribute removed from <a> and <map> • DOCTYPE :

<!DOCTYPE html PUBLIC "-//W3 C//DTD XHTML 1.1//EN" « "http://www.w3.org/TR/xh tml11/DTD/xhtml11.dtd">

XHTML 2.0 • Still in working draft stage at W3C • In current state… » <br> becomes <line> » <img> becomes <object> » <a> becomes <hlink> • Likely to change before release

MIME Types • According to the spec, all XHTML pages should be delivered as application/xhtml+xml and not text/html • text/html is discouraged for XHTML 1.0 and invalid for XHTML 1.1 • Only Mozilla-based browsers understand application/xhtml+xml • Use "content negotiation" to serve pages via the browser- appropriate MIME type if you want

Creating valid XHTML Pt. 2

<body> <div id="header" > ... your header here ... </div> <div id="pageBody" > <ul id="navigation" > <li><a href="/">link 1</a></li> <li><a href="/">link 2</a></li> <li><a href="/">link 3</a></li> </ul> <div id="content" > <h1> ... Page title ... </h1> <h2> ... Subhead ... </h2> <p> ... paragraph text ... </p> <ul> <li>list item one</li> <li>list item <a href="#">two</a></li> </ul> <h3> ... Section Head ... </h3> <p> ... paragraph text ... </p> </div> </div> <div id="footer" > ... your footer here ... </div> </body> • Page divisions ( <div> ) » Use semantic id names » Avoid using tables for anything apart from tabular data • Document structure – why use bloated markup when semantic will do? » When marking up a document, think structure not presentation. CSS can be used to make it look how you want. »Use <h1> - <h6> for headlines »Use unordered lists for navigational link lists

Side-by-side comparison

<body> <div id="header"> ... your header here ... </div> <div id="pageBody"> <ul id="navigation"> <li><a href="/">link 1</a></li> <li><a href="/">link 2</a></li> <li><a href="/">link 3</a></li> </ul> <div id="content"> <h1> ... Page title ... </h1> <h2> ... Subhead ... </h2> <p> ... paragraph text ... </p> <ul> <li>list item one</li> <li>list item <a href="#">two</a></li> </ul> <h3> ... Section Head ... </h3> <p> ... paragraph text ... </p> </div> </div> <div id="footer"> ... your footer here ... </div> </body> <body> <table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff"> <tr> <td colspan="2" bgcolor="#000000"> ... your header here ... </td> </tr> <tr> <td bgcolor="#fff000"> <a href="/"><font face="verdana, arial, helvetica, sans-serif" size="3"><b>Link 1</b></font></a><br> <a href="/"><font face="verdana, arial, helvetica, sans-serif" size="3"><b>Link 2</b></font></a><br> <a href="/"><font face="verdana, arial, helvetica, sans-serif" size="3"><b>Link 3</b></font></a><br> <a href="/"><font face="verdana, arial, helvetica, sans-serif" size="3"><b>Link 4</b></font></a> </td> <td> <font face="verdana, arial, helvetica, sans-serif" size="5"><b> ... page title ... </b></font><br><br> <font face="verdana, arial, helvetica, sans-serif" size="4"><b> ... Subhead ... </b></font><br><br> <p><font face="verdana, arial, helvetica, sans-serif" size="3"> ... paragraph text ... </font></p> ... Common HTML XHTML

Baby steps or a leap? • Choose what’s right for you » Transitional approach » Hard-line approach

Taking it slow • Migrating into XHTML Transitional • Minimizing

<table> usage • Using CSS for presentation Pros • Somewhat forward-compatible • Gets you used to XML-based markup • Fewer maintenance issues • Restores some structure to the document Cons • Presentation still handled by markup (somewhat) • Harder to migrate into the site of the future

Diving right in • XHTML Transitional or Strict •No

<table> layouts • CSS for presentation • Structure, structure, structure Pros • Forward-compatible •XML-based markup • Faster & easier maintenance & production • Document structure intact • Serve more with less Cons • Sites can look plain in older browsers • Browser support for CSS imperfect

XHTML XML for Client Side Developers

XHTML: XML for Client-Side Developers

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29