Markup Review

Guidelines for Creating Documents in this Course

In this course, the documents you create will meet these standards:

You will publish content by defining its structure with valid XHTML.
You will validate your XHTML page before you begin ANY CSS.
You will define the content's presentation with CSS.

Anatomy of an XHTML Document

DOCTYPE

The DOCTYPE goes at the beginning of the document. It tells the browser what the document contains so that it can be correctly interpreted. DOCTYPE is always capitalized and it has no closing backslash.

DOCTYPEs are either strict, transitional or frameset. The designation below, strict, tells the browser that the code is strict XHTML. If you don't declare a DOCTYPE, the browser defaults to Quirks Mode which causes the browser to lose all knowledge of the document object model (DOM) that modern browsers rely on. Ostensibly, the browser falls back to rendering web pages as if it were an older, non-standards-compliant browser. Normally, you do not want this to happen unless you are using code that needs to be backward-compatible and/or uses deprecated tags.

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

Comments

XHTML comments begin with . The browser ignores anything in between and they are not displayed on the page. Use comments to identify and document your work.

Note: Unlike HTML documents, XHTML does not allow -- within a comment as it will be interpreted as a comment closure.

<!--
Author:
Created:
Time:
Copyright © 2007
-->

XML Namespace

Note the attribute xmlns in the HTML tag. This attribute points the browser to the namespace; the collection of XML declarations and attributes so it knows what to do (in case it forgets! ;-)

<html xmlns="http://www.w3.org/1999/xhtml">

Document Head

The HEAD section of the document contains the HEAD and TITLE tags. Make your titles descriptive since they show up in user bookmarks. Search engines look for keywords in your titles and can help boost your rankings.

Language and character sets to be used are also specified in the head through the use of meta tags. Note that META tags are empty elements so they close with a backslash at the end. In the tags below, the language is ISO code for English and the character set is ISO 8859-1. This is a Latin character set used by all English-based languages. Another popular character set is UTF-8 because it allows the use of different character sets (Japanese, Greek, Arabic) within the same document.

Many other types of META tags can be used and the head section can also contain STYLE and JAVASCRIPT tags.

<head>
   <title> title goes here </title>
   <meta http-equiv="Content-type" content="text/html;
   charset=iso-8859-1" />
   <meta http-equiv="Content-Language" content="en-us" />
</head>

Document Body

The BODY of the document contains the content, enclosed in valid XHTML tags. All tags must be closed and nested properly. They must be in lower-case. Attributes must contains values and be quoted. If you use symbols such as less than <; greater than>; copyright ©; or others, use an entity—a short string of characters which represent the value. Make sure it ends with a semi-colon. For example, the less than symbol is represented by < in the markup. Finish your document with the closing BODY and HTML tags.

<body>
 
<!-- All content on the page goes here. -->
 
<p>Here is a paragraph of text.  To be XHTML compliant, 
   it must have an opening and closing tag.  Each tag 
   must be properly closed.
</p>
 
<p>Empty elements, like image tags and  break tags must 
   be closed also.
</p>
 
<p>
   <img src="sample_image.gif" width="50" height="25"
      alt="This is a sample image." />
</p>
 
<p>Nesting is also very important.  Remember,
   <b><i>first opened, last closed</i></b>.
</p>
 
<p>Be careful when nesting lists.</p>
 
<ul>
   <li>When lists are nested, the second list goes 
       <b>inside</b> the first list item.
      <ul>
         <li>Leave the last list element before the 
             nested list unclosed. Close it after the 
             nested list is ended.
         </li>
      </ul>
   </li>
</ul>
 
<p>Use entities for symbols such as copyright: &copy;</p>
 
</body>
</html>

What is a "Valid" Webpage?

XHTML documents must largely adhere to the XML standard, thus, they must be valid XML. So what does that mean? The following rules differ slightly from the XML specification as they apply directly to XHTML documents:

An XHTML document must have one, and only one <html> tag.

This is a basic rule, and one that doesn't likely get violated. Simply stated, don't have more than one <html> tag, and be sure that it surrounds all other tags in the document.

Deprecated elements and attributes are not permitted

The Strict XHTML DOCTYPE removed presentational elements such as <center> and , as well as several attributes pertaining to valid elements such as <li type="..."> and <img border="...">. Note that many attributes are still valid for XHTML 1.0, but are slated for deprecation in newer versions of the XHTML specification.

Every element must have a closing tag.

This requirement is inherently satisfied for all HTML double-ended tags, such as ..., or <code>...</code>, so that shouldn't be a tricky one to comply with.

However, pay particular attention to the HTML single-ended, or empty, tags such as the break tag and and the horizontal rule tag, where the tag does not contain any content. In these cases, you must include an embedded closing tag in the empty tag. For example, in XHTML, the above tags would be written as   and <hr />.

Note: The space is required between the element name and the closing / in empty elements.

'First-Open-Last-End' (FOLE)

Another guideline which an XHTML document needs to meet is the order of the closing elements. Basically, you are required to preserve the symmetry of element nesting. The first opening element is the last closing element.

For example, the following nested elements must be written in the following order:

<code>here is some text</code>

Conversely, the following markup is not correctly nested:

<code>here is some text</code>

Naming Conventions

XHTML identifiers, such as classes and IDs, must conform to the following restrictions:

begin with an alphabetic character (a..z), or underscore (_).
After that, names may include numbers or hyphens (-), but all other special characters are not allowed.
Spaces are not allowed in names—names must be one contiguous word or phrase without spaces. For example, second string is an invalid class or ID name. However, you could use second_string or secondString so each word in the phrase is more distinct.

Case Sensitivity

This rule is ostensibly a naming convention rule, but it is being listed separately for emphasis.

Unlike HTML, all element names in XHTML markup must be lowercase. For example,  is not valid, and must be written as  instead.
Further, all class and ID names are case-sensitive. For example class names firstClass, Firstclass and firstclass are regarded as different names by the browser.

Pay particular attention to this rule, as this is a common source of issues with style sheets.

Validating Your Webpages

What is Validation?

Validation is the process of checking a webpage to ensure that it is valid. Why is validation so important? For standards-compliant webpages to render properly, the webpages must comply with the standards. If a markup document has errors, the style sheet might not be applied to the document, and the web page will not be rendered as intended. This is a critical step in verifying and testing web pages, and should always be done whenever a new web page is created, or modifications are made to the web page, regardless of how minor the changes.

When performing validation, you must validate the markup and the style sheet(s), CSS, for the document. The proper sequence of validation is to validate the markup first, using an HTML validator. Once all the HTML markup issues are resolved, you can then proceed by validating the style sheet(s). Do not validate the CSS until all issues are corrected in the markup, since the CSS validator assumes that the markup is error-free, and errors in the markup may be mis-reported as errors in the style sheet.

You will be expected to validate your webpages before submitting them for review. Please do this diligently. We will be validating your webpages as the first step in grading your homework, and validation errors will garner a heavy penalty!

How Does One Validate a Webpage?

There are several ways to validate a web page, and they are generally very simple, and free of charge. First, there are several online services which will allow you to enter the URL for a webpage, allow you to upload a webpage that is on your hard drive, or even copy and paste the entire webpage into the validator. The W3C offers an online service to validate markup and validate style sheet(s) .

Many web editors, such as Dreamweaver and BBEDIT, have built-in tools which allow you to validate your code directly from the editor, for the utmost in convenience.

Finally, browser extensions (aka add-ons) and favelets (aka bookmarklets) allow the developer to validate a webpage directly from the browser. The Web Developer Toolbar (available for Mozilla browsers ) is a feature-rich debugging and development tool which makes webpage validation very easy, among its many other features. For this course, you are expected to install Firefox on your computer, and install the Web Developer Toolbar

References:

Visit the Web Design Group to find a list of entity values.
For a complete list of XHTML elements, see W3School's XHTML 1.0 Reference .
This table lists factors that ensure that the browser will render your webpage in Standard mode
Detailed explanation of Quirks Mode vs. Standard Mode
For more info on DOCTYPE's, see Fix Your Site with the Right DOCTYPE

XHTML Strict Standards

XHTML Documents