Expertise in (X)HTML: a Non-Chess Digression

By David Snitkof

W3C: World Wide Web Consortium Logo
The World Wide Web Consortium is responsible for the maintenance of web standards such as the XHTML 1.0 Specification.
(link to source)

When conducting research in the area of expertise, one thing quickly becomes apparent. Almost every experiment is in the domain of chess. While chess is probably better suited to this than is any other domain, the near-absence of other objects of study causes much of the discussion to be framed in terms of chess. This deficiency led me to wonder how one might discuss expertise effects in a completely unrelated domain.

While working on this very project, the answer hit me. I was sitting with Victor and showing him that I would create a simple web page to redirect users from the WebCT Group Presentations area to the project’s location on my own server. While I was writing the code from scratch in WebCT’s online editor, Victor said, "Do you know how you can tell you’re becoming an expert?" I was confused at first, but looking at my code, I realized what he meant. Rather than coding sequentially, I created a template and then filled in the slots. I started by typing the code that must be included in all HTML pages:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Once I had created the skeleton, I then filled in the code for the redirect, as well as to make some words appear on the screen. The final result was as follows:

<html>
<head>
<title></title>
<meta http-equiv="refresh" content="0;http://www.snitkof.com/cg156" />
</head>
<body>
You will be redirected.<br /><br />
If you are not redirected, <a href="http://www.snitkof.com/cg156">click here.</a>
</body>
</html>

Fufilling the Conditions

I now realize that, in doing this, I was fulfilling several of the conditions for expertise.

  1. I noticed meaningful features and patterns of information by setting up the template and placing the right code in the right places.
  2. I exhibited content knowledge that was organized in a way that reflected deep understanding of the subject matter.
  3. My knowledge was not reduced to isolated facts or propositions but instead reflected contexts of applicability.

I now knew theoretically what I knew practically all along. I was an XHTML expert!

HTML Semantic Structure

As the entire class has now had the experience of creating a web site, I thought it would be interesting to discuss the semantic structure of HTML and explain an "expert’s approach" using template theory as a guide, since that concept seems most applicable here.

All html documents must have-at a minimum-the first block of code written above. This provides the structure for the document, a head and a body. Within the head, there must be a title tag. Most designers include a DOCTYPE declaration even before the first <html> tag. This tells browsers what specific version of the language you are attempting to use. Here is an example of the XHTML 1.0 Transitional DOCTYPE:

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

Apart from some fancy tricks and perhaps some JavaScript functions, the head of the document will only contain the title (which is required) and a link to a style sheet. This brings us to another point, that style should be separate from semantics. The <FONT> tag was officially abandoned in 1999 in favor of external style sheets. Template theory provides a core and slots, but it does not provide for information which is semantically unrelated to the variable in the slot. What matters is that your sentence is part of a paragraph under the second sub-heading and that it is a label for a text input box below, not that you decided to make it red, bold, and 22pt.

The HTML Tag as a Template

Now that we have that out of the way, we can get to the true, most basic template in a web page, the individual tag itself. A tag is composed of an element and several optional or required attributes. The element is analogous to the core of a template, and the attributes are like slots. The basic structure is:

<element attribute="value" attribute2="value2">child node</element>

Let’s analyze an example:

<a href="http://google.com">click for google</a>

In this case, the "a" is the element name an serves as a constant core for the template. "a" stands for "anchor" and is the element that creates hyperlinks. "href" is one attribute, the value of which specifies the destination location for the link. After the child node, the element must be closed with the </a> tag to indicate that the link is finished. This code, when processed by a browser, will display the words "click for google" which, when clicked, will transport the user to google.com.

The template is extensible, and more slots can be filled. For instance, one can add a "target" attribute. If the value is "_blank", the link will open in a new window.

<a href="http://google.com" target="_blank">click for google</a>

Node-Based Representation and the Document Object Model

As stated above, the "click for google" text is referred to as the "child node of the <a> tag". This node-based representation of a web page is known as the Document Object Model (DOM). Experts think of web pages in this way, giving a distinct semantic structure to the information. In some browsers, such as Mozilla, there is a tool for displaying and examing the DOM of any web site!

In conclusion, as an individual progresses from novice to expert in HTML, he or she will begin to develop a template-based representation of web documents, formalized in the Document Object Model.

Valid XHTML 1.0! Valid CSS! Level Double-A conformance icon, 
          W3C-WAI Web Content Accessibility Guidelines 1.0 Bobby 508 Compliant! © Copyright Victor Long, Chandra Singh, and David Snitkof 2005
All Rights Reserved