XHTML Review Anita Philipp Updated Spring 2016
Why use XHTML instead of HTML5? Good question! CS2623: Using XHTML Why use XHTML instead of HTML5? Good question! Some websites are still written in XHTML. You may need to maintain a site using this format. But that is not the controlling consideration. Text is written using XHTML (and an alternative text with the same breadth and depth of information is not currently available). The easiest approach would be to use XHTML for this course as opposed to creating one “humongous” errata sheet outlining the changes on 675 pages of the text. Review this PowerPoint for the XHTML requirements to be used throughout this course. Some of the most notable are Doctype and name spaces Lower case letters Coding of empty elements Use of quotes
XHTML Requirements Must be well-formed Element and attribute names must be in lower case Attribute values must always be quoted No attribute minimization Use Document Type Definitions Encode with Entities Block elements cannot be inside inline elements Use XML namespaces
XHTML Requirements Opening and closing tags HTML: Use of <p> tag <p>This was legal use of this tag in HTML <p>Second paragraph XHTML: Close the <p> tag <p>This is a properly closed XHTML tag</p> <p>With a second paragraph </p>
XHTML Requirements Properly Nested HTML would tolerate code such as: <p>This is<b> bolded text</p></b> XHTML: no overlapping elements <p>This is<b> bolded text</b></p>
XHTML Requirements Empty elements must be written in special form HTML: following would be acceptable <hr> <br> XHTML: empty elements need an end tag: <hr /> <br />
XHTML Requirements XML is case sensitive, must be lowercase In HTML, the following could be used: <A HREF=”first.html” TARGET=MAIN> Link to the first page </A> In XHTML, the same line would appear as follows: <a href=”first.html” target=”main”> Link to the first page </a>
XHTML Requirements Attribute values must be quoted In HTML, the following could be used: <table align=center width=85% border=2 height=200> In XHTML, the same line would appear as follows: <table align="center" width=“85%” border="2" height="200">
XHTML Requirements No attribute minimization In HTML, the following could be used: <FRAME SRC=”frame1.html” NORESIZE> In XHTML, the same line would appear as follows: <frame src=”frame1.html” noresize=”noresize” />
XHTML Requirements Use Document Type Definitions DTDs Defines the legal structure, elements, and attributes that are available for use in a document that complies with the DTD. XHTML can use one of three DTDs Strict Transitional Frameset
XHTML Requirements Strict Transitional Frameset Document will conform exactly to the XHTML 1.0 standard <!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional Used when presentational markup needs to be embedded in the documents <!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Frameset Used when the document needs to use frames <!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Frameset//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML Requirements XHTML documents must meet the following criteria: Validate against one of the three DTDs Root element must be <html> and designate XHTML namespace using xmlns attribute Doctype declaration must be in document
XHTML Requirements 2 Validates against one of the three DTDs <!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Simple XHTML Document</title> </head> <body> <h1>Hello XHTML World</h1> </body> </html> Validates against one of the three DTDs Doctype declaration must be included Root Element must be <html> Must designate XHTML namespace using xmlns attribute
Nesting Inline can’t contain block level <em> <div> em contains div </div> </em> Some block can’t contain other block <h6> h6 here <h1> | h1 here | </h1> h6 here </h6> Errors when Validate code Inconsistent results
Encoding with Entities Short string of characters that represent a single character Avoid confusion with markup < displays < > displays > Character is not on the keyboard © displays © Reference:http://www.htmlhelp.com/reference/html40/entities/
XHTML Element Prohibitions a must not contain other a elements. pre must not contain the img, object, big, small, sub, or sup elements. button must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements. label must not contain other label elements. form must not contain other form elements.
Validate XHTML http://validator.w3.org/detailed.html
Header Field Definitions The http-equiv attribute can be used in place of the name attribute. It helps the browser and server to manage/display pages <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> Content-Type – Media Types "text/html", "image/png", "image/gif", "video/mpeg", "text/css", "audio/basic" Charset: Character Encoding (natural language of intended audience) Charset=iso-8859-1 is Latin 1 – Alphabet for English and similar languages <meta http-equiv="Content-Language" content=“en-us" /> indicates the media type of the entity-body sent to the recipient English – Pages are displayed left to right
Name vs ID HTML fragment identifier: name a, applet, form, frame, iframe, img, map XML Fragment identifiers are id To maintain backward compatibility include both name and id
IDs Particular id can only be associated with one element Can only be used once in a XHTML document As a style sheet selector. As a target anchor for hypertext links. <div id="top"> Top </div> <a href="#top">Top</a> As a reference a particular element from a script. As the name of a declared OBJECT element. For general purpose processing by user agents (e.g. for identifying fields when extracting data into a database, etc.).
Class Assigns one or more class names to an element; the element may be said to belong to these classes. <div class="right" class="center"> A class name may be shared by several element instances. <div class="right" > <p class="right" > The class attribute has several roles in HTML: As a style sheet selector (when an author wishes to assign style information to a set of elements). For general purpose processing by user agents.
You will thank yourself later when page has to be maintained. Comments Overview Comments At the beginning of document Information about page layout Section Comments Code must be divided into logical sections Start comments | End comments for each section of document You will thank yourself later when page has to be maintained.
Required Metatags (for this class) <meta name="author" content="Sam Scriptwriter user15000" /> <meta name="revised" content="9/7/2015" /> <meta name="filename" content="Metatags.htm" /> <meta name="description" content="Class example of metatags" /> <meta name="keywords" content="meta, http-equiv, keywords, charset" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> Replace the values of the content attributes with appropriate data
Document Hierarchy body div h1 p <body> <div> <h1> </h1> <p> </p> </div> </body
Indenting Code Some meta tags and comments have not been included due to space limitations.
The End