Instructor: Charles Moen CSCI/CINF 4230 XHTML Quick Start Instructor: Charles Moen
XHTML A stricter version of HTML HTML 4.01 with stricter syntax rules XHTML Quick Start (W3Schools, Schultz) XHTML A stricter version of HTML HTML 4.01 with stricter syntax rules A server-side technology
XHTML Quick Start (W3Schools, Schultz) XHTML Syntax Rules All tag names and attribute names must be lower case Elements must always be closed Elements must be properly nested All attribute values must be surrounded with quotes All attributes must have a value The DOCTYPE is required Some elements are mandatory Some elements are deprecated
End tags always have a slash XHTML Quick Start (W3Schools, Schultz) Closing Elements Elements are defined by start tags and end tags that turn on and turn off a specification. End tags always have a slash An HTML element: <h1>This is a level 1 head</h1> Tag name A start tag should be followed by an end tag Start tag End tag
Closing Elements Some elements do not require two tags XHTML Quick Start (W3Schools, Schultz) Closing Elements Some elements do not require two tags <br /> <hr /> Backslash is always required. A space before the backslash is not required, but can be included for compatibility with older browsers.
Nesting Elements HTML elements can be nested XHTML Quick Start (W3Schools, Schultz) Nesting Elements HTML elements can be nested The nested element must be closed before the enclosing element is closed An example of an em element correctly nested within an h1 element: <h1>This is a <em>level 1 head</em></h1> The em tags are used to emphasize part of the text COMMON ERROR Here is an example of incorrect nesting: <h1>This is a <em>level 1 head</h1></em> These end tags are misplaced!
Attribute Values All attribute values must be surrounded with quotes XHTML Quick Start (W3Schools, Schultz) Attribute Values All attribute values must be surrounded with quotes <img src="images/UHCLicon.gif" alt="UHCL" height="85" width="65"/> Attribute Attribute name Assignment operator Value within quotation marks All attributes must have a value Attribute minimization was allowed with certain HTML attributes, such as “selected,” “checked,” and “disabled.” In XHTML, minimization is not allowed. <select name="cheese"> <option selected="selected">Cheddar</option> <option>Swiss</option> <option>Mozzarella</option> </select>
XHTML Quick Start (W3Schools, Schultz, W3C) DOCTYPE For your homework, use the “strict” XHTML 1.0 DOCTYPE, unless your page uses frames (see below) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> For your homework pages that use frames, use the “frameset” XHTML 1.0 DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Mandatory Elements XHTML Quick Start (W3C) For example, the “html,” “head,” “title,” and “body” elements are all required. For your homework, you can use the following template that I copied from the W3C Web site <!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>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <p>… Your HTML content here …</p> </body> </html>
XHTML Quick Start (W3Schools, Schultz) Deprecated Elements All elements or attributes that are used for changing the presentation or appearance should not be used CSS should be used for defining the presentation, while XHTML should be used only for defining structure Examples of tags that you should not use: center b font strike u
References Ding, Wei, “XHTML” UHCL lecture slides, 2008. Schultz, David and Craig Cook, Beginning HTML with CSS and XHTML: Modern Guide and Reference. Apress, 2007. W3C. (2007). “Recommended list of DTDs”, [Online]. Available: http://www.w3.org/QA/2002/04/valid-dtd-list.html W3Schools Online Web Tutorials. "Learn XHTML". [Online]. Available: http://www.w3schools.com/xhtml/default.asp