Home » Web Design

web design xhtml introduction

Every conversation about web design starts with html, the basic language of the internet.  HTML is needed in order to display any form of content, making it the building block of the web. HTML enables a visitor to a website to show data to the user's screen and organize information.

HTML now has a number of related buzz words  -  XML, XHTML and DHTML. XHTML combines HTML and XML into a single format (HTML 4.0 and XML 1.0). Like XML, XHTML can be extended with proprietary tags. Also like XML, XHTML must be coded more rigorously than HTML. Over the years, HTML coders have become sloppy, because Internet Explorer and Netscape had many variations in HTML coding. With XHTML, coders must conform to the rules.

XHTML is HTML using an XML syntax to provide stricter rules and more organization. DHTML is a combination of JavaScript, CSS, DOM, and HTML to provide dynamic web page effects.

Unlike HTML, XHTML takes on the strict syntax of XML. This comes packaged with a few simple rules:

  • XHTML tags have to be properly closed in the order they are declared
  • tags and attributes are case sensitive, so they have to be in lower case
  • All attributes must have a value
  • Proper HTML entities and character values must be used

Another advantage of using XHTML is that it separates the content from the styling and this is where is starts getting interesting. HTML used to be  cluttered with font and styling tags, while XHTML bravely eliminates these. Using a combination of CSS and XHTML, one can create a great looking page with properly optimizated content and great graphics to go along with it.

XHTML comes in three flavors

  • Transitional - Loose set of XHTML often used for HTML to XHTML transitioning
  • Frameset - Identical to Transitional, but allows the use of frames
  • Strict - Firm foundation for XML syntax eliminating the use of all deprecated tags and attributes such as the <font> tag.

The latter is the preferred format of webpages. The standard has been set in the year 2000! Here is an example of a properly formed page:

<!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">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Title</title>
    </head>
    <body>
    <h1>Your major heading here</h1>
    <p>
      This is a regular text paragraph.
    </p>
    <ul>
      <li>
        First bullet of a bullet list.
      </li>
      <li>
        This is the <em>second</em> bullet.
      </li>
    </ul>
    </body>
</html>

Every tag here is properly closed and formatted properly. Writing proper xhtml will allow you to create better pages by complete separation of content and styling. The styling is where CSS comes into play!

»