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=””><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:, required (phrase elements such as em or strong: 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=””><font size=”-1”><b>More</b></font></a><font size=”-1”><br></font> </td> <td width=”120”> <a href=””><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 […]

HTML Web Forms

As previously mentioned, there are two main methods by which you can interact with an online application running within your browser: click a link or submit a form. Clicking a link can request a page from the Web server, and if the application developer included data in a query string, clicking the link also sends […]

Submit Buttons and Reset Buttons

Submit buttons have been used copiously throughout this chapter, so there’s no need for an example that demonstrates how they work. However, there are a couple of points to note. First, what happens if you need more than one submit button in a form? In this case you will have to set the name and value attributes of the […]

HTML Form Fields Controls and PHP

With an understanding of the process under your belt, you’re ready to look at the most common HTML form field controls you can use to collect information in a form, and see how you can use PHP to get at this information afterward. By the way, you can use the terms form field, control, and form element interchangeably; they […]

List Boxes

List boxes or drop-down list boxes are controls that typically display several items in a list. Sometimes they have an arrow next to them that enable the user to scroll down to additional items. They work a little different in HTML because they’re created with two elements: <select> and <option>. Essentially, they provide the same functionality as the […]