| Criterion | HTML 4.0 | XHTML 1.0 |
|---|---|---|
| Is an XML | No | Yes |
| Requires element termination | Limited | Yes |
| Requires lower case tags | No | Yes |
| Requires quoted attribute values | Recommended | Yes |
| Nesting rules apply (well-formedness) | Yes | Yes |
| Requires special character encoding | Yes | Yes |
<!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>
<title>Page Title</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
</head>
<body>
<!-- page content goes here -->
</body>
</html>idsids should be
ids provide hooks for
Dividing a page:
The code:
…
<body>
<div id="header">
<!-- main navigation & such -->
</div>
<div id="content">
<!-- main content -->
</div>
<div id="upFront">
<!-- bubbled up content -->
</div>
<div id="footer">
<!-- copyright & footer navigation -->
</div>
</body>
…Further divisions:
The code:
…
<div id="content">
<div id="mainBlock">
<!-- focal information about WOW -->
</div>
<div class="sectionBlock">
<!-- community links -->
</div>
<div class="sectionBlock">
<!-- education links -->
</div>
<div class="sectionBlock">
<!-- certification links -->
</div>
</div>
…The code:
…
<div id="upFront">
<div>
<!-- quick links -->
</div>
<div>
<!-- WOW highlights -->
</div>
</div>
…
- Heading 1 (1)
- Heading 2 (1.1)
- Heading 3 (1.1.1)
- Heading 3 (1.1.2)
- Heading 2 (1.2)
- Heading 3 (1.2.1)
- Heading 4 (1.2.1.1)
- Heading 2 (1.3)
<h1> = most important headline<h6> = least important headline<ol> = ordered lists<ul> = unordered lists
<ul id="mainNav">
<li><a href="/">Home</a></li>
<li><a href="/community/">Community</a></li>
<li><a href="/education/">Education</a></li>
<li><a href="/certification/">Certification</a></li>
<li><a href="/join/">Join WOW</a></li>
<li><a href="/about/">About Us</a></li>
</ul><dl> = definition lists
<dl>
<dt>semantic</dt>
<dd>of or relating to meaning in language</dd>
</dl><em> = emphasis<strong> = strong emphasis<abbr> = abbreviation
I like to study <abbr title="eXtensible HyperText
Markup Language">XHTML</abbr>.<acronym> = acronym
Once I finish marking up a document, I begin applying
presentational style with <acronym title="Cascading Style
Sheets">CSS</acronym>.<dfn> = unfamiliar term
Good markup has that certain <dfn lang="fr"
title="I don’t know what">je ne sais quoi</dfn>.<q> = inline quote<blockquote> = block quote (contains <p>s, etc.)<cite> = a citation<del> = deleted text<ins> = inserted text<kbd> = keyboard
Fill out the form and click <kbd>Enter</kbd>.<var> = variable<form id="form_login" action="action.php">
<fieldset>
<legend>Log In Here</legend>
<label for="email">Email Address</label>
<input type="text" id="email" name="email" maxlength="255" />
<label for="pw">Password</label>
<input type="password" id="pw" name="pw" maxlength="8" />
<input type="submit" name="submit" value="Log In »" />
</fieldset>
</form><form id="form_contact" action="action.php">
<fieldset>
<legend>Contact Form</legend>
<fieldset>
<legend>Your Info</legend>
<label for="name">Name</label>
<input type="text" id="name" name="name" maxlength="255" />
<label for="email">Email Address</label>
<input type="text" id="email" name="email" maxlength="255" />
</fieldset>
<label for="cmnts">Your Comments</label>
<textarea id="cmnts" name="cmnts" rows="4" cols="20"></textarea>
<fieldset>
<legend>Want to subscribe to our newsletter?</legend>
<label><input type="radio" name="sub" value="Y" /> Yes</label>
<label><input type="radio" name="sub" value="N" /> No</label>
</fieldset>
<input type="submit" name="submit" value="Send It »" />
</fieldset>
</form>…
<fieldset>
<legend>Choose a time period</legend>
<label><input type="radio" name="time"
value="yr" /> Whole Year</label>
<dl>
<dt>
<label><input type="radio" name="time" value="mnth" />
Month</label>
</dt>
<dd>
<label for="mnth">Month</label>
<select id="mnth" name="mnth">
<option value="01">January</option>
…
</select>
</dd>
…
</dl>
</fieldset>
…<fieldset>
<legend>How often do you visit these restaurants?</legend>
<table summary="A matrix of restaurants and corresponding
radio input fields to denote how often they are visited">
<thead>
<tr>
<th scope="col">Restaurant</th>
<th scope="col">Never</th>
<th scope="col">Often</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Bob’s Fish Shack</th>
<td><input type="radio" name="bobs" value="never" /></td>
<td><input type="radio" name="bobs" value="often" /></td>
</tr>
…
</tbody>
</table>
</fieldset>alt & longdesc attributestitle attributeaccesskey attributetabindex attributelang attributecite attributealt, longdesc & titlealt = alternate text contentlongdesc = alternate content for complex, data-oriented images
title = advisory information about an element
<a>: could tell user what to expect when they follow it<img>: provides additional information about the image<abbr>/<acronym>: tells what the abbreviation/acronym means<dfn>: defines the termaccesskey & tabindexaccesskey
<ul id="mainNav">
<li><a href="/" title="Go home" accesskey="1">Home</a></li>
…
</ul>accesskey & tabindextabindex
<ul id="mainNav">
<li><a href="/" title="Go home" accesskey="1"
tabindex="1">Home</a></li>
…
</ul><a href="/" id="logo" title="Go home" tabindex="10000">Home</a>lang & citelang
Good markup has that certain <dfn lang="fr"
title="I don’t know what">je ne sais quoi</dfn>.cite
<blockquote cite="http://www.mycom.com/tolkien/twotowers.html">
<p>They went in single file, running like hounds on a strong
scent, and an eager light was in their eyes. Nearly due west the
broad swath of the marching Orcs tramped its ugly slot; the sweet
grass of Rohan had been bruised and blackened as they passed.</p>
</blockquote>requiredrequired="required"<!ATTLIST input
%attrs;
%focus;
type %InputType; "text"
name CDATA #REQUIRED
value CDATA #IMPLIED
checked (checked) #IMPLIED
disabled (disabled) #IMPLIED
limit CDATA #IMPLIED
range CDATA #IMPLIED
readonly (readonly) #IMPLIED
required (required) #IMPLIED
size CDATA #IMPLIED
maxlength %Number; #IMPLIED
src %URI; #IMPLIED
alt CDATA #IMPLIED
usemap %URI; #IMPLIED
onselect %Script; #IMPLIED
onchange %Script; #IMPLIED
accept %ContentTypes; #IMPLIED
>validateforvalidatefor=""<!ENTITY % VSchema
"(name | email | address | postcode |
phone | alphanumeric)"
>
<!ATTLIST input
…
required (required) #IMPLIED
validatefor %VSchema; #IMPLIED
…
>matchid)match=""<!ATTLIST input
…
required (required) #IMPLIED
validatefor %VSchema; #IMPLIED
match IDREF #IMPLIED
…
>…
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname"
required="required" validatefor="name" />
<label for="email">Email</label>
<input type="text" id="email" name="email"
required="required" validatefor="email" />
<label for="pw1">Password</label>
<input type="password" id="pw1" name="pw1"
required="required" validatefor="alphanumeric" match="pw2" />
<label for="pw2">Password Confirm</label>
<input type="password" id="pw2" name="pw2"
required="required" validatefor="alphanumeric" match="pw1" />
<label for="add1">Street Address</label>
<input type="text" id="add1" name="add1"
required="required" validatefor="address" />
<label for="add2">Apartment/Suite</label>
<input type="text" id="add2" name="add2"
validatefor="address" />
…function validateForm() {
// collect elements
var x = this.elements;
for (var i=0;i<x.length;i++) {
// our validation code goes here
}
}
function setValidation() {
var f = document.getElementsByTagName('form');
for (var i=0;i<f.length;i++) {
f[i].onsubmit = validateForm;
}
}
window.onload = function() {
setValidation();
};function validateForm() {
// instantiate object
var vObj = new formValidator();
// collect elements
var x = this.elements;
for (var i=0;i<x.length;i++) {
// required text fields
if (x[i].getAttribute('required') &&
(x[i].getAttribute('type')=='text') &&
vObj.isEmpty(x[i].value)) {
// perform any actions you want here and then
return false;
}
}
}
function formValidator() {
// set up object methods
this.isEmpty = isEmpty;
}
function isEmpty(val) { // check to see if input is whitespace only or empty
if (val.match(/^\s+$/) || val == "") {
return true;
} else {
return false;
}
}