Paragraphs

After the news story’s headline, a paragraph-long excerpt follows it—but, again, the markup belies the content’s intent: <br>Yannatos starts 41st year conducting Harvard-Radcliffe Orchestra <a href=”http://www.news.harvard.edu/gazette/2004/10.21/23-yannatos.html”><font size=”-1”><b>More</b></font></a><font size=”-1”><br></font> If this is a paragraph, then we should mark it up as such, and not just rely on break elements (<br>) to visually set it apart from […]

Keeping Your Markup Well Formed

“Well-formed” is essentially a new name for an old rule. It simply means that your elements must be nested properly. Consider this example: <p>Here’s <em>my <strong>opening</em></strong> paragraph!</p> Here, the em is opened first, and the strong opened second. However, markup follows a “first opened, last closed” rule. Since the em is opened before the strong, […]

Avoid Divitis and Classitis

When abandoning tables for more lightweight markup, it’s not uncommon for beginning developers to rely heavily on class attributes to replace their beloved font elements. So, we might have dealt with a navigation bar table that looked like this: <!– outer table –> <table bgcolor=”#000000” border=”0” cellspacing=”0” cellpadding=”0”> <tbody> <tr> <td> <!– inner table –> […]

Close Every Element

When you opened an element in HTML, you weren’t always required to supply the corresponding closing element. In fact, the HTML 4.01 specification differentiates between elements whose ending elements are optional (such as the paragraph element: www.w3.org/TR/REC-html40/struct/text.html#h-9.3.1), required (phrase elements such as em or strong: www.w3.org/TR/REC-html40/struct/ text.html#h-9.2.1), and, in some cases, outright forbidden (the good […]

Abstracting Style from Structure

Many standards advocates tout “the separation of style from structure” as the primary benefit of adopting CSS in your site’s design—and we agree, with a slight qualification. As you’ll see in the coming pages, there never is a true divorce between your markup and your style sheets. Change the structure of the former, and dozens […]

CSS Headers

Let’s look at the markup for one of the news items in the right-hand column of the Harvard Web site: <b>’Illuminating the beauty of life’</b> <br>Yannatos starts 41st year conducting Harvard-Radcliffe Orchestra <a href=”http://www.news.harvard.edu/gazette/2004/10.21/23-yannatos.html”><font size=”-1”><b>More</b></font></a><font size=”-1”><br></font> </td> <td width=”120”> <a href=”http://www.news.harvard.edu/gazette/2004/10.21/23-yannatos.html”><img src=”images/041029a.jpg” alt=”James Yannatos” border=”0” height=”120” width=”120”></a><br><br> In this news item, the content leads with […]

Lowercase Elements and Attributes

The HTML specification never mandated a particular letter case for our pages’ markup elements. As a result, developers have become accustomed to writing elements and their attributes in any case at all: <P CLASS=Warning>Alert!</P> In XHTML, all elements and their attributes must be written in lowercase. This is because XML is quite case-sensitive. For example, […]

Every Attribute Requires a Value

Additionally, there were attributes in HTML that previously didn’t require a value: <input type=”checkbox” checked> <dl compact> Both checked and compact are examples of “minimized” attributes. Because they didn’t require a value; it was simply enough to declare the attribute and then carry on. However, XHTML mandates that a value must be supplied for all […]