176 HOW: HTML, the Building Blocks of Life Itself: Code Wars
tags it’s optional. That inconsistency has led to sloppy markup, which in turn has caused browser problems, especially when other web standards (such as CSS) begin to interact with your HTML. So it’s a good idea to close most HTML tags whether it’s strictly required or not. (In XHTML, the successor to HTML, all tags must be closed.)
CODE WARS
As five minutes of web browsing will show you, HTML has been twisted every which way to enable web designers to create documents that are not so logical in their construction nor so restricted in their presentation. Cascading Style Sheets (CSS) and JavaScript are additional technologies that enable designers and developers to create attractive, accessible, dynamic web documents.
In theory, web designers should let HTML be HTML, using it merely as a structured container for content, while relying on CSS to format pages. In practice, web designers had to design pages long before CSS was invented, so most of us developed methods for using HTML as a design tool. Even after CSS was invented (1996), the first reliably CSS-capable browser did not hit the market until 2000. As of this writing, support for CSS is still tragically far from complete in many popular browsers. More about that— including solutions—in Chapter 10, “Style Sheets for Designers.”
Table Talk
As a result of the Thousand Year March toward CSS compliance and while waiting for better browsers, designers still use HTML for tasks it performs reliably, if grudgingly, such as creating visual layouts by manipulating HTML tables:
<!-- Begin menu bar. -->
<table border=”0” cellpadding=”0” cellspacing=”0” align=”center”> <tr>
<td>
<a href=”reading.html”><img src=”reading.gif” width=”20” height=”20” border=”0” alt=”Reading”></a>
</td>
Taking Your Talent to the Web |
177 |
<td>
<a href=”writing.html”><img src=”writing.gif” width=”20” height=”20” border=”0” alt=”Writing”></a>
</td>
<td>
<a href=”arithmetic.html”><img src=”arithmetic.gif” width=”20” height=”20” border=”0” alt=”Arithmetic”></a>
</td>
</tr>
</table>
<!-- End menu bar. -->
The previous code, in conjunction with the appropriate <img> images (reading.gif, writing.gif, arithmetic.gif), will result in a clickable navigational menu in visual web browsers such as IE, Netscape Navigator, Opera, and iCab. The table is used not to present tabular data (such as the contents of a spreadsheet) but rather to hold images in place. Setting the border to “0” disguises the tabular structure to facilitate pure visual purposes. Typing the width and height for each image helps the browser more quickly calculate how the data is supposed to lay out on the page. The <ALT> attribute in each image tag makes the content accessible to users of audio browsers and nontraditional browsers such as Palm Pilots, as well as for those who surf with images turned off.
XHTML Marks the Spot
We keep emphasizing that HTML is logical and orderly. Let us return for a moment to the question of closing tags after they are opened. This practice may seem redundant, but there is a logic to it. Refer again to the preceding example. Say that your paragraph is followed by an image. If you don’t close your paragraph </p> before starting the image <IMG> tag, the browser has to guess whether you intend the image to be part of the paragraph or to follow it. Depending on what the browser guesses, your image might be preceded by a carriage return, or it might not be. If you’re using a style sheet that includes leading (line-height in CSS parlance), the browser might attempt to impose that leading on your image—or it may not. These are merely the visual complications that can arise from something as simple as an unclosed tag. The structural ramifications can be more serious.
178 HOW: HTML, the Building Blocks of Life Itself: Code Wars
HTML recommends that you close most tags, but it does not force you to do so, and it does not uniformly recommend tag closure. Images <IMG>, line breaks <br>, and list items <li>, for instance, are never closed in HTML. Most older browsers will accept and attempt to display all kinds of shoddy markup, including markup with unclosed tags that should be closed. And some browsers choke on optionally unclosed tags when, according to the rules of HTML, they should simply process the markup without qualms. For instance, Netscape’s 4.0 browser refuses to display web pages with unclosed table rows, even though the rules of HTML 4 state that table rows need not be closed.
This inconsistency in HTML (and browsers) has resulted in sloppy markup on a surprising number of professional sites. Living in filth promotes diseases in human beings; slinging dirty markup can have equally dire effects on the health of the Web, particularly as the medium attempts to move forward.
For this reason, among others, in 2000 the W3C stopped evolving HTML and came up with a new standard called XHTML. Don’t sweat it. For a web designer’s purposes, XHTML is essentially HTML that forces you to close your tags—including those (such as <img>, <br>, and <li>) that never required such closure before.
We don’t want to confuse you with yet another acronym, but the reason XHTML works this way is because XHTML only looks like HTML. It is actually the offspring of XML, which is the standard toward which the Web is evolving. (Technically, XML is a meta-language. That is, it is a set of rules for creating languages. HTML is a markup language based on the SGML meta-language. XHTML is a reformulation of HTML using XML as the metalanguage. You don’t really need to know this, but it’s great at parties, particularly when you’re trying to make someone stop talking to you.)
Minding Your <p>’s and q’s
Instead of trying to grasp the mind-numbing sentences above, you can think of XML as a much smarter—and necessarily more complex— adaptation of the idea behind HTML; as Homo sapiens to HTML’s CroMagnon, if you will; as a structured meta-language for containing data, if you must. In XML, you construct your own tags. Not only that, an XML tag