XHTML Structuring 2: Case Study: W3school's Structured Markup

In any case, do not skip this section. Reading this chapter will enhance your skills, slim down your web pages, and give you a clearer understanding of the differences between markup and design. The concepts in this chapter are easy to learn but can greatly improve the performance of websites, as well as the convenience of designing, creating, and updating websites.

In this section, you will learn how to write logical and concise markup that enables you to reduce bandwidth traffic by about 50%, while reducing server load and stress and shortening the website loading time. By removing those elements that perform poorly and correcting those bad habits that bring no benefit, we can achieve the aforementioned goals.

These bad habits are torturing many sites on the network, especially those that mix CSS code with mainly table-based layouts. This approach is clumsy and uneconomical, even for designers who are very experienced in other fields. At the same time, the chance of encountering this problem is equal, whether it is on sites that handwrite code or on sites created using visible editing tools, such as Dreamweaver and GoLive.

This section will present these common errors so that you can identify and prevent them, and learn how to correct them. We elaborate on the unique identifier attribute (id) and show how it allows you to write extremely compact XHTML code, whether you are creating a mixed layout or a pure CSS layout.

Do all elements need to be structured?

As we mentioned in the previous section, every element can be structured, and CSS can make an ordered or unordered list display as a complete navigation bar, complete with reversed button effects. The content of the document can be marked with ordinary elements, which indicate their semantic roles in website design through specific structured attributes.

We created the first Chinese test version of CodeW3C.com in the year 2006, and we used CSS for layout from the beginning, and XHTML to structure the document. Every element within is structured, from titles to lists, even to paragraphs. You can see the reversed effect of the homepage button and the secondary menu button on each page of CodeW3C. Below is the XHTML code for these two components:

<div id="header"><h1><a href="/">codew3c online tutorial</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML Tutorial">HTML Tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML Tutorial">XML Tutorial</a></li>
<li id="b"><a href="/b.asp" title="Browser Script">Browser Script</a></li>
<li id="s"><a href="/s.asp" title="Server Script">Server Script</a></li>
<li id="d"><a href="/d.asp" title="dot net Tutorial">dot net Tutorial</a></li>
<li id="m"><a href="/m.asp" title="Multimedia Tutorial">Multimedia Tutorial</a></li>
<li id="w"><a href="/w.asp" title="Website Manual">Website Manual</a></li>
</ul>
</div>

div, id, and other helpers

When used correctly, div can be a good helper for structured markup, while id is a surprisingly useful tool that allows you to write extremely compact XHTML, skillfully use CSS, and add complex and sophisticated behavior to the site through the standard Document Object Model (DOM).

W3C defines the div in its latest XHTML2 draft's XHTML structure model as follows:

The div element, in conjunction with the id, class, and role attributes, provides a general mechanism for adding additional structure to a document. This element does not define the style of the content. Therefore, creators can use this element in conjunction with style sheets, xml:lang, and attributes to make XHTML adapt to their own needs and tastes.

div is an abbreviation for division. Division means division, area, grouping. For example, when you combine a series of links together, it forms a division of the document.

Universal Mechanism for Determining Structure

All HTML writers are familiar with common elements such as paragraphs and headings, but some may not be as familiar with div. We can find the key to understanding the div element in W3C's description, 'a universal mechanism for adding structure.'

On the homepage of this site, we encapsulate the tutorial directory list within a div because the tutorial directory is not part of any element of the main text. Among them, the h2 element marks the title of each tutorial, while the ul list element marks the detailed list of each tutorial. But in a more specific sense, this tutorial directory plays a structured role, that is, a secondary navigation component. To emphasize this role, we use the id 'navsecond' to mark this div.

<div id="navsecond">
<h2>HTML tutorial</h2>
<ul>
<li><a href="/html/index.asp" title="HTML tutorial">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML tutorial">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS tutorial">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP tutorial">TCP/IP</a></li>
</ul>
<h2>XML tutorial</h2>
<ul>
<li><a href="/xml/index.asp" title="XML tutorial">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL language">XSL</a></li>
... ...
... ...
</div>

You can use any name. 'Gladys' and 'orangebox' are completely in line with the naming rules of XHTML. However, semantic or meta-structural naming is the best (i.e., naming that can explain the function of the elements within).

When the client decides to use blue, you might think it's very silly to name a part of the site 'orangebox' (orange box). In the following situation, you might feel even dumber when, only six months before the final delivery, you start adjusting the stylesheet and can't remember what 'Gladys' (Gladys, a female name) represents, whether it's the navigation area, sidebar, or search box.

Therefore, marking id as 'menu', 'content', or 'searchform' will help you remember. Furthermore, markup is not the same as design, a well-structured page can be formatted into any shape you want. The result of this is that whether you use pure CSS layout or a mixed layout, you will completely change the habit of thinking and creating with presentation markup.

id vs. class

id attribute is not new to XHTML; class attribute or div element are also the same. They can all be traced back to the HTML era. The id attribute assigns a unique name to an element. Each name can only be used once on the assigned page. (For example, if your page contains a div with an id of 'content', then no other div or other elements can use this name. Conversely, the class attribute can be used repeatedly on a page (for example, five paragraphs on a page can use class names such as 'small' or 'footnote'). The following tags will help clarify the difference between id and class:

<div id="searchform">Search form components go here. This
section of the page is unique.</div>
<div class="blogentry">
   <h2>Today's blog post</h2>
   <p>Blog content goes here.</p>
   <p>Here is another paragraph of blog content.</p>
   <p>Just as there can be many paragraphs on a page, so too
   there may be many entries in a blog. A blog page could use
   multiple instances of the class "blogentry" (or any other
   class).</p>
</div>
<div class="blogentry">
   <h2>Yesterday's blog post</h2>
   <p>In fact, here we are inside another div of class
   "blogentry."</p>
   <p>They reproduce like rabbits.</p>
   <p>If there are ten blog posts on this page, there might
   be ten divs of class "blogentry" as well.</p>
</div>

In this example, the div named searchform is used to enclose the page area containing the search form, while the div with class="blogentry" is used to enclose each article entry in the blog. There is only one search form on the page, so we choose to mark this unique component with the id. However, the blog has many (article) entries, so the class attribute is applied in this case. Similarly, news sites usually have multiple divs, and the class of these divs can be named "newsitem" or something else.

However, not all sites need divs. Blog sites can simply use h1, H2, and h2 headings and <p> paragraphs, just like news sites. We are showing the div with the class of blogentry here, not to encourage you to fill your site with divs, but only to show you this principle: use the same class multiple times in the same HTML document, but use only one id.

Sticky Note Theory

It should be helpful to think of the id attribute as a sticky note. I would stick a note on the refrigerator to remind myself to buy milk, and another on the phone to remind me to call a customer who has been late in payment. There is also one on the ledger folder to remind me that I must pay the bill before the 15th of this month.

IDs also mark special areas within documents, so that you can be reminded which area requires special handling. In this regard, the id attribute is similar to sticky notes. To achieve the so-called special handling, you need to write several rules using this special id in the style sheet or add a few lines of code in the JavaScript file. For example, if there are some specific rules in your CSS file, these rules only apply to elements within the div with the id of searchform.

When an id attribute is used as a magnetic thing (magnet) in a series of specific CSS rules, it is called a CSS selector. There are manyCreating Selectorsmethods, but id is easy to use and has many uses.

The Power of id

The id attribute is incredibly powerful. It has the following capabilities:

  • As a CSS selector, enabling us to create compact, minimized XHTML.
  • As the target anchor of hyperlinks, replacing the outdated name attribute.
  • As a method to locate specific elements from scripts based on the DOM.
  • As the name of an object element.
  • As a tool for general purpose processing (in W3C's example, 'used as a domain identification tool when extracting data from HTML pages to databases, or converting HTML documents to other formats, etc.').

Rules for id

The id value must start with a letter or underscore; it cannot start with a number. Although W3C validation will not catch this error, an XML parser will. At the same time, if you use id with JavaScript in a form, the id name and value must be a valid JavaScript variable. Spaces and hyphens, especially hyphens, are not allowed. Moreover, using an underscore in class or id names is not a good idea, due to the restrictions in CSS2.0 (and some browsers).

Semantic Markup and Accessibility

Now, we have discussed the widely used XHTML elements (especially div and id), let's take a look at an example related to the homepage of this site. First, let's review the menu located at the header position:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML Tutorial">HTML Tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML Tutorial">XML Tutorial</a></li>
<li id="b"><a href="/b.asp" title="Browser Script">Browser Script</a></li>
<li id="s"><a href="/s.asp" title="Server Script">Server Script</a></li>
<li id="d"><a href="/d.asp" title="dot net Tutorial">dot net Tutorial</a></li>
<li id="m"><a href="/m.asp" title="Multimedia Tutorial">Multimedia Tutorial</a></li>
<li id="w"><a href="/w.asp" title="Website Manual">Website Manual</a></li>
</ul>
</div>

We have seven links, each assigned an id corresponding to the respective content: for example, an id named 'h' corresponds to the HTML tutorial, and so on. These links are encapsulated within a list element named 'menu', with the id 'menu' indicating the function of this list - a menu list. The outer 'div' named 'navfirst' is used to label this section within the page, distinguishing it from elements such as main content, sidebar, and footer.

The 'div' and 'ul' elements provide real structure, indicating the function of the content within them (navigation bar) and their position in the document (header position on the page). In contrast, traditional table layouts cannot provide any semantic information about the data and can easily consume three times the bandwidth.

Please note that these tags do not contain 'img' tags, so they do not involve properties such as width, height, background, or border, etc. They do not use table cells either, which means they do not involve a series of related properties. They are very clean and compact, while providing all the information necessary to understand them.

By collaborating with CSS, these tags provide website visitors with a reliable and fast-loading layout. At the same time, they offer the possibility of creating a more flexible and diverse appearance for visitors. Even in environments without CSS, our well-structured tags can still provide all the content without any confusion.

Acute-eyed readers may have noticed that the text contained within the 'a' element is not displayed by the browser. This is due to the perfect collaboration between structured markup and CSS, which allows us to define a triggering mechanism with just a few lines of CSS rules. When users access the site with a graphical browser, they see beautiful navigation buttons, and when they use a plain text reader, they can still access the entire text. Thus, the content is the same for all users.

And, since the markup does not include images and table cells, this navigation component can be referenced by any page within the site without changing the structure, while giving it different visual effects. In short, by modularizing the code, we have improved the reusability of the code.