HTML, (X)HTML, XHTML, and HTML5

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.

On the horizon is a new version of HTML known as HTML5. The developers are working on s single markup language that can be written in either HTML or XHTML syntax. This new version contains many new syntax features to deal with Web 2.0 type interactive applications as well as multimedia features. In 2010, the draft version was available. The W3C Recommendations should be available in 2012 with full implementation over the next decade. Explore the latest information at W3C. Read a comparison of HTML4 and HTML5.

HTML5

Currently in development, HTML5 is a major revision of the HTML standard for structuring and presenting content on the Web. Some people advocate that developers begin or already should be using HTML5 coding, even while it is not complete / is not finalized and changes are continuing to be made. Others say that it is totally irresponsible to advocate its use or begin using it. Many parts of the coding specification are stable and may be implemented in products. To learn more about HTML5, visit some of these sites:

What Is HTML5 and Why We Should All Care from Focus
Provides an introductory overview.

Dive into HTML5 by Mark Pilgrim
Author elaborates on a hand-picked selection of features from the HTML5 specification and other fine standards; organized by topics and addresses many aspects of the new language in great detail.

HTML5 Doctor
Created by seven web developers, the site publishes articles about HTML5, its semantics, and how to use it right now.

HTML5.org
Includes an experimental validator.

HTML5 Rocks
Includes step by step tutorials and much more.

HTML5 Tag Reference from W3Schools, a website for developers

HTML5 from The World Wide Web Consortium (W3C)

The Wildertness Downtown, an interactive film by Chris Milk, was built in HTML5 and proviedes a glimpse of the future of HTML. The animation and other elements are done with coding rather than a tool such as Adobe Flash. You may also have to provide a diiferent address. For fun, view the Page Source (Selection in your browser that will show the HTML coding for the webpage, look for selection from the View tab). You must use the Google Chrome browser for this to work. This is one reason it will be a while before we use HTML5 full-time. Currently, not all browsers support the multimedia elements.

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/DTD/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.

---