Introduction to Web Design - 3. XHTML Basics

XHTML documents are plain-text (or plain ASCII) documents that consist of both tags and content. There are several WYSIWYG editors for implementing XHTML documents, webpages and entire websites. However, it is a good idea to be able to handle basic XHTML on your own using a simple text editor such as Notepad or Notepad++. XHTML is primarily a means of describing how parts or elements of a document should be laid out. It is implemented through the use of tags, just like HTML. Tags are code enclosed in angle brackets (<…>). For the most part, tags appear in pairs of opening tags and closing tags. Closing tags have the same name as the opening tag preceded by a forward slash. For example, the beginning of a large heading uses the <h1> opening tag and </h1> closing tag. XHTML documents are enclosed in a root element, the <html> tag. Within the <html> tag you have two primary sub-sections: the <head> section and the <body> section. The <head> section contains page information that is not displayed in the document such as meta information to be used by search engines and the page title. The <body> section is the part of the XHTML document that appears in the browser pane. Unlike HTML, XHTML uses stricter rules. This creates cleaner code and more efficient (and browser-friendly) websites. Here are the rules to XHTML:

  • XHTML documents must have a <!DOCTYPE html> tag; This is the only tag or content located above the <html> tag and is the only tag that does not follow the XHTML rules for closing tags and using lowercase syntax.
  • XHTML documents must have one root; The whole document must be within <html> tags and is located right below the <!DOCTYPE html> declaration tag. Additionally, the <html> tag is required to have the xmlns attribute declared (<html xmlns="http://www.w3.org/1999/xhtml">).
  • XHTML documents must contain <html> tags, <head> tags, <body> tags and <title> tags.
  • XHTML tag elements must always close; Either like <h1>…</h1> (a pair of tags with content between) or <br /> (a self-closing tag).
  • XHTML tag elements must always be lowercase.
  • XHTML tag elements must always be nested properly; If you open a <h1> tag and an <em> tag, you must close them in reverse order (</em> then </h1>).
  • XHTML attribute elements must always be lowercase.
  • XHTML attribute element values must always be within quotation marks (<a href="#">…</a>)
  • XHTML attribute elements cannot be shortened (<option selected>…</option>); The attribute name and value must both be present (<option selected="selected">…</option>)

3.1 - Creating Your First XHTML Document

To create a very simple XHTML document, do the following:

  1. Start Notepad.
    NOTE: On PCs with Windows XP, Notepad can be found by going to the Start Menu and rollover All Programs >> Accessories >> Notepad. You can use Microsoft Word or Wordpad, but you must save the document as a Text file. Otherwise, those programs will add their own formatting that will prevent the webpage from displaying properly.
  2. At the very top of the document, type in the <!DOCTYPE html> tag like below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    NOTE: The <!DOCTYPE html> tag is used to tell the browser what set of standards and rules to use when processing the webpage. XHTML (1.0) comes in three flavors; Strict, Transitional and Frameset. Strict mode means the browser will display the page based on XHTML rules and will not honor depreciated tags and attributes. Transitional will, however, offer some forgiveness and display any depreciated tags and attributes, but will not accept framesets. Frameset is a version of Transitional that allows Framesets. XHTML(1.1) only offers a Strict mode. HTML5 only offers one Strict flavor and simplifies the declaration too.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"    >     (XHTML 1.0 Strict)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"    >     (XHTML 1.0 Transitional)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"    >     (XHTML 1.0 Frameset)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"    >     (XHTML 1.1)
    <!DOCTYPE html> (HTML5)
  3. On the next line, type the opening <html> tag: <html xmlns="http://www.w3.org/1999/xhtml">
    NOTE: The xmlns attribute is required. There is only one value allowed for this attribute, http://www.w3.org/1999/xhtml. Despite there only being one possible option for an attribute, you are still required to have it. This is a prime example of the differences between HTML and XHTML. HTML allowed the browser to assume certain conditions. XHTML does not allow any assumptions. While this may be a pain when coding, should a second value become the default, your webpage will know to use the old value and therefore display as intended.
  4. Hit the Enter key a few times and then enter the closing </html> tag: </html>
  5. Between the opening and closing <html> tags, add tags for the head and body sections of the html document: <head>

    </head>
    <body>

    </body>
    NOTE: The <head> section of the document is where you set the page title, meta data and preload stylesheets and scripts. Good programming technique is to create both the beginning and ending tags before filling in the content. This reduces errors involving unclosed tags. Additionally, if you create your tags before, then create the nested tags within the already completed set, your tags will be properly nested as well.
  6. In the head section, you can specify a title for the webpage: <title>My First Webpage</title>
    NOTE: The <title> tag is a requirement and must be placed within the <head> tags. The content within the <title> tags is the text that displays across the top of the browser window.
  7. The content of the webpage goes into the body section of the webpage: <h1>XHTML made easy</h1>
    This is not as hard as I thought it would be.
    I might really like this.     Your file should now look like this: <!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">
    <head>
    <title>Title of document</title>
    </head>
    <body>
    <h1>XHTML made easy</h1>
    This is not as hard as I thought it would be.
    I might really like this.
    </body>
    </html>
  8. Save the document with the name first.htm. You have now created a complete webpage.
  9. Your computer should open the file with your default browser when you double-click it.

When opened, you will see that the content within the <title> tags is showing at the top of your browser window. You might also notice that the <h1> tags have made their content much larger and created an extra line break between it and the next sentence. To create a line break yourself, you would have to include the <br /> tag which moves the content to the very next line. To produce the blank line between content, you would actually need to place two <br />; The first to move the content to the very next line and the second to move it down to the second line, thus creating the blank, or skipped line. You should also be aware that your file would appear exactly the same in a browser if it looked like this:

<!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"><head><title>Title of document</title></head>
<body><h1>XHTML made easy</h1>This is not as hard as I thought it would be.I might really like this.</body></html>
NOTE: The previous version is much easier for a person to read, decipher and see what the parts of the page are. It is also much easier to find the opening and closing tags.

3.2 Headings and Horizontal Rule

The <h1> is actually one of six "Heading" tags that you have access to in XHTML. If you consider a paper or book, the headings of different sections and subsections stand out but get progressively smaller the deeper into the sub-categories you go. The Heading tags work the same way, starting with the <h1> tag as the largest size, and ending with the <h6> tag as the smallest. All six work the same way and do the same thing with the exception that they decrease in the size. They all still leave that extra line break below them. The <hr /> creates a "Horizontal Rule" across the screen. You should note that the tag is a self-closing tag that contains the backslash within itself. The <hr /> no longer allows any formatting attributes, but does accept the class attribute which allows you to apply formatting via a linked CSS stylesheet.

References

  1. Bos, Bert, XML Introduction (accessed August, 2002) http://www.w3.org/XML/1999/XML-in-10-points
  2. Dietel, H. M., Dietel, P. J. & Neito, T. R. (2001) Internet & World Wide Web: How to Program. 2nd Edition. Prentice Hall, NJ.
  3. Flynn, P. XML FAQ (accessed August, 2002) http://www.ucc.ie/xml/#acro
  4. Richmond, A. The Web Developers Virtual Library Introduction to XHTML (accessed August, 2002) http://www.wdvl.com/Authoring/Languages/XML/XHTML/
  5. Veen, J. (2001) The Art and Science of Web Design. New Riders: Indianapolis, IN.
  6. HTML and XHTML Information www.w3c.org/markup

Introduction to Web Design by Cynthia J. Martincic :: Credits