HTML, (X)HTML, and XHTML

The World Wide Web Consortium "W3" is the organization that coordinates the development of standards for the web and promotes universal guidelines for web development.

HyperText MarkUp Language (HTML) is the language of the web. HTML uses tags such as <p> and </p> to structure text into headings, paragraphs, listing, and links. Although it's possible to build a simple page with no knowledge of HTML, most web developers combine their skills with web development tools such as Dreamweaver HTML coding. It's much like learning to use a calculator. Without the foundations of addition, subtraction, multiplication, and division, you aren't likely to be successful with advanced math on a calculator.

One of the duties of W3 is to work with developers and software companies on new versions of web software so everything is compatible. They work with people who are developing coding languages (i.e., XML), authoring tools (i.e., Dreamweaver), and browsers (i.e., Internet Explorer, Safari).

Over the years HTML was evolved. Many people learned to code using HTML Version 3.2. This version involved using individual tags for everything and led to lots of problems with updating and coordinating pages. In the late 1999s, HTML 4 and CSS became the norm. This allowed a single, easy to edit style sheet to control the "look and feel" of a website.

Next, a new language (XML) was developed to provide a more stable platform for coding. XML was used to rewrite HTML into a new coding language called XHTML. Although XHTML looks a lot like HTML, some of the syntax is slightly different. Today, most people use a combination of HTML and the more strict XHTML. Many people use the words transitional HTML or (X)HTML to describe this combination. This website will use both words, HTML and (X)HTML, to refer to this type of transitional HTML.

Beyond the Basics

As your web development skills grow, you'll be ready to expand the technologies you use to create websites. You started with basic (X)HTML skills. Then, you add Cascading Style Sheets (CSS) to control the style and layout of your web document. DOM (Document Object Model) provides a document content model for HTML documents. JavaScript allows you to write additional scripts to make your pages more dynamic. Together these are technologies that control how the web page is displayed in the browser window.

The next part of this page is for people who already known HTML and want to understand the differences between HTML and XHTML. If you're a beginner, you can skip it.

Compare XHTML vs HTML

X)HTML bridges the gap between HTML and XML. XHTML is written in XML and much of XHTML is identical to HTML Version 4.01. However note the exceptions below:

• Correctly Nested Elements - simply close the markup elements in the order in which you opened them - IF one element is within another, the end tag of the inner element must appear before the end tag of the outer element.
  
• End Tags - any HTML tag that contains other tags or content has a corresponding end tag with HTML, you may leave out the end tags if their presence can be inferred by the processing agent
  
• Handling Empty Elements - every tag must have a corresponding end tag, even those that aren't allowed to contain other tags or content (examples: <br>, <hr> )
  XHTML alternative - include a slash before the closing brace of the tag to indicate its ending, if the tag has attributes the slash comes after all the attributes
  (examples: <br /> and <img src="kumquat.gif" /> and <hr />)
  
• Case Sensitivity - XHTML is case sensitive for all tags and attribute names
  Uppercase tags or attributes are NOT valid XHTML tags or attributes
  
• Quoted Attribute Values - XHTML requires that every attribute value - even numeric ones - be enclosed in double quotes
  (example: <font size="+2" color="white">)
  
• Explicit Attribute Values - every attribute must have a value - those without values must use their own names

Tips for XHTML

If you've used HTML in the past, you need to change your thinking. Here's what you need to do (Adapted from XHTML Explained):

• Use CSS whenever possible.
• Use the following start tag:
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  
• Use the following declaration:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• Use the following metatag in the head:
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
• Stop using the following deprecated tags: FONT, WIDTH & HEIGHT in tables, BORDER
• Start using ALT tags for images
• Remember:
  • everything should be lowercase: <p>
  • close all tags: <br/>
  • nest tags: <p><b></b></p>
  • use quotes in attributes: height="3"
  • indicate values: <hr noshade="noshade"/>
  • use id attribute for links: <a href="#section"></a> <p id="section" name="section"></p>
  • use alt text in all image tags: <img src="frog.gif" alt="cute green frog" />

Here is a "minimal" XHTML document with the XML version, document type, and namespace indicated:

<?xml version="1.0" encoding="UTF-8"?>
<!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>Title goes here</title>
</head>
<body>
<p>Contents go here</p>
</body>
</html>

Try It!
If you're already familiar with HTML, then try converting the SAMPLE DOCUMENT from HTML to XHTML.
Check your answer.

Rewrite the code and validate it to make sure that if follows strict XHTML rules. Use this DOCTYPE description:

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

Go to the W3C HTML Validation Service at http://validator.w3.org/ and conduct a validation on your revised page.

Complete the XHTML Tutorial at W3Schools.

Learn More

HyperText Markup Language (HTML) Home Page from W3C for an overview.

XHTML Explained and from HTMLSource.

XHTML: the Clean Code Solution by Peter Wiggin. Consider why serious coders should convert to using XHTML.

---