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 the content surrounding it:

<p>Yannatos starts 41st year conducting Harvard-Radcliffe Orchestra <a
title=”Harvard Gazette: &quot;Illuminating the beauty of life&quot;”
href=”http://www.news.harvard.edu/gazette/2004/10.21/23-yannatos.html”>More</a></p>

Here, you can see that we’ve included the More link within the paragraph—as we’ll show you later in the chapter, we could easily use CSS to move the anchor down to the next line. So, while keeping the anchor inside the paragraph is intentional, you may opt to take a different approach.

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 a header displaying the title of the featured story. However, you wouldn’t know it was a header from the markup:

<b>’Illuminating the beauty of life’</b>

Rather than using markup to describe how the element should look to sighted users on desktop browsers, why not use a header element?

<h4>Reversing Saddam’s ecocide of Iraqi marshes</h4>

Here we’ve used an h4, which would be appropriate if there are three levels of headers above this one in the document’s hierarchy. Now, any user agent reading this page will recognize the text as a header, and render it in the most effective way it can.