XHTML Structuring 1: Refactoring Websites with XHTML

One of the reasons we titled this section 'XHTML: Simple Rules, Easy Guidelines' is that the rules and guidelines discussed in this section are simple and easy. Another reason is that a simple and easy WEB design book, like the new free goods in supermarkets, although common, can effectively attract people's attention. Such things can stimulate interest and encourage people to try.

I truly hope that the content of this section can spark your interest and encourage you to try. Why do I say that? Because once you master the simple and easy concepts contained in this chapter, you will rethink the way web pages work and begin to change the methods of building them. However, I do not want you to merely rewrite the code. I hope you can think and work in a genuinely different way.

On the other hand, refactoring is the true meaning of XHTML.

In this chapter, we will explore the mechanisms and meanings of structured markup. If you are integrating web standards into your development project, you might find some familiarity in this chapter. However, even those who are veterans in this field can discover unexpected gains from this chapter.

Summary of XHTML Rules

Converting traditional HTML to XHTML 1.0 is quick and painless, as long as you follow some simple rules and guidelines. Whether you have used HTML before or not, it will not hinder you from using XHTML.

  • Use appropriate document type declarations and namespaces.
  • Use the meta element to declare the content type of your document.
  • Write all elements and attributes in lowercase letters.
  • Enclose all attribute values in quotes.
  • Assign values to all attributes.
  • Close all tags.
  • Close empty tags using spaces and slashes.
  • Do not write double underscores in comments.
  • Ensure that the less than and ampersand symbols are represented as < and & respectively.

Unicode and other character sets

The default character set for XML, XHTML, and HTML 4.0 documents is Unicode, a standard defined by the Unicode Consortium. Unicode is a comprehensive character set that provides a specific unique number for each character, regardless of platform, program, and language. Unicode is also the closest thing we have to a universal alphabet, although it is not an alphabet but a set of number mapping schemes.

Although Unicode is the default character set for web documents, developers can still freely choose other character sets that are more suitable for them. For example, websites in the United States and Western Europe often use ISO-8859-1 (Latin-1) encoding, while the national standard of the People's Republic of China is gb2312.

Mark the document for semantics rather than for style

Remember: please use CSS to the maximum extent for layout. In the world of web standards, XHTML markup is irrelevant to presentation, it is only related to document structure.

Well-structured documents can convey as much semantics as possible to browsers, whether they are on a handheld computer or a fashionable desktop graphics browser. Well-structured documents can convey visual semantics to users, even in old browsers or in modern browsers where the user has disabled CSS.

Not every site can immediately abandon HTML table layouts. The inventor of CSS, W3C, did not convert its official website into a CSS layout until November 2002. However, even the stubborn purists who only adhere to standards do not always completely separate presentation from structure, at least it was not possible in XHTML 1. But now, we can take a significant step towards this ideal by separating presentation from structure (or data from design), so even mixed traditional layouts can benefit from it.

Here are some tips to help you think in a more structured way:

Color within the outline

In grammar school, most of us were forced to write articles using the standard outline format. Now, as designers, we can be so free from the constraints of the outline and boldly dive into the free field of unique personal expression (perhaps our brochures and business sites are not so unique and personalized). But at least we will no longer be troubled by the outline.

In fact, according to HTML, we should structure the content into an organized hierarchy. During the period when browsers did not support CSS, we could not deliver a layout for sale while doing this. However, today, while implementing our design without any compromise, we have the ability to deliver documents with good intrinsic structure.

When you are marking text for web use or when you are converting an existing text document into a web page, please think about these entries of the traditional outline.

<h1>My theme</h1>
<p>Introductional text</p>
<h2>Supplementary viewpoints</h2>
<p>Related text</p>

At the same time, avoid using deprecated HTML elements like <font>, or non-semantic elements like <br />, to simulate non-existent logical structures.

For example, don't do it like this:

<font size="7">My theme</font><br />
Introductional text<br /><br />
<font size="6">Supplementary viewpoints</font><br />
Related text<br />

Use elements based on their meaning, not their appearance

Some of us have fallen into a bad habit, using h1 when we only need a large text, or using li when we need a bullet point at the beginning. As we discussed in the previous chapter, browsers have always been accustomed to imposing design properties on HTML elements. We have all been accustomed to thinking that h1 means large text, li means bullet points, or blockquote means text indentation. Most of us are still writing HTML in a chaotic way, simulating presentation effects with structured elements.

Similarly, if a designer wants all the titles to use the same size, she will set all the titles to h1, even though this does not make any sense in terms of structured semantics.

This is the main title, when I organize the text in an outline format.
This is not the main title, but I hope it uses the same font as the title above, but I don't know how to use CSS.
This is not a title at all. But I very much hope that the text in the page uses the same font, to achieve the one I want.
If I understand CSS, I can achieve this design without disrupting the document structure.

We must put our little tricks aside and start using them based on the semantics of the elements, rather than their appearance. In fact, h1 can be any shape you want. With CSS, h1 can be a non-bold, small Roman font, while p text can be bold and large, and li can also have no bullet points (you can also use small cat and dog or company logo PNG, GIF, or JPEG images instead) etc.

Starting today, we will use CSS to determine the appearance of elements. We can even change their appearance based on their position in the page or the site. CSS can completely separate the presentation from the structure and allow you to format any element in the style you like.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

Why do you do this? The purpose of doing this is to retain the structure of the document in text browsers, wireless devices, and HTML formatted emails while achieving a branded look and feel in graphic browsers.

We do not want to go into more technical details about CSS in the chapter on XHTML. We just want to show that document structure and visual expression are two completely different things, and that structured elements should be used to transform text, not to impose display effects.

Use structured elements, not meaningless garbage

Because we have forgotten or do not even know the purpose of HTML and XHTML, which is to convey structured meaning, many HTML争论者 such as this to insert lists using tags:

Item 1<br />
Item 2<br />
Item 3<br />

Consider using ordered or unordered lists instead:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

"But 'li' gives me a bullet, and I don't need a bullet!" you might say. According to the previous chapter, CSS does not make any assumptions about the expected appearance of elements. It waits for you to tell it what you expect the appearance of the elements to be. Closing the bullet is the most basic ability of CSS. It has the ability to make lists look just like ordinary text, as well as to make them look like graphic navigation bars with full reverse effects.

So, please use list elements to mark lists. Similarly, use 'strong' instead of 'b', 'em' instead of 'i', and so on. By default in most desktop browsers, 'strong' displays the same as 'b', and 'em' and 'i' are the same, while you can also create the expected visual effects without breaking the document structure.

Although CSS does not make any assumptions about the display of any element, browsers make many assumptions, and we have not encountered a browser that displays 'strong' as anything other than bold text (unless it is directed to do so by a CSS rule created by a designer). If you are worried that a browser you are not familiar with may not display 'strong' as bold text, you can write a CSS rule like this:

strong {
	font-weight: bold;
	font-style: normal;
	{}

Visual Elements and Structure

Web standards not only require us to use what technology, but also to comply with the way we use these technologies. Using XHTML to write markup and using CSS to handle part or all of the layout does not necessarily make the site more accessible and lighter, nor does it save how much bandwidth. Just like the technologies we used in the early days, XHTML and CSS can also be misused and overused. Long-winded XHTML and long-winded HTML will waste users' bandwidth and time. Long-winded excessive CSS cannot completely replace the presentation of HTML code; this is just a bad thing being replaced by another bad thing.