Rather than thinking of HTML elements as ways to style your text, think of them as ways to describe what the text means and use cascading style sheets to style their appearance.
For instance, a list by nature groups similar elements together in a way that several paragraphs don’t. An H1 element shows more importance than the same words marked up with a large font size, and an <em> (emphasized) or a <strong> tag adds additional meaning to a word where a <b> (bold) tag simply changes the font but doesn’t add to the word’s perceived importance.
In this exercise, you will learn to use HTML elements to enhance the meaning of the text and cascading style sheets to modify the appearance of the elements.
Note
USE the CH4 sample site. This site is located in the DocumentsMicrosoft PressExpression Web SBSSample Sites folder.
OPEN the CH4 site and display the contact page.
In the Design pane, scroll to the table of employee contact data.
Select the top row of the table (the row that contains the words Name, Email, and Phone). In the Code pane, edit each of those table cell tags by replacing the <td> and </td> tags with <th> and </th>.
Notice how the Design view of the text that is contained in the cells changes slightly. This change occurred because you replaced a nondescript table cell with a Table Head cell. This tag indicates to search engines and non-visual browsers that this bit of data is different and is a heading for the columns below it.
Open the about_me page from the about_me folder. In the Design pane, click in the word Benefits, which is being used as a title for your list of benefits, and then click Bold.
Notice that the page code now has the addition of a <strong> tag. This is much better than the old way: a <b> (bold) tag. Bold describes the look of the text, but Strong does more to describe its meaning.
Repeat step 3 for the word Instructions.
Click in the final list name, Definitions. This time, instead of using the Bold button to wrap the word in a <strong> tag, click the Italic button.
Notice that instead of the <i> tag for italic, the word is wrapped in an <em> tag, which means emphasized. The idea is that emphasized means something; italic only describes a font style.
The value of this shift from presentational markup (font tags, italic tags, bold tags, and so on) to semantic markup is clear. The old way simply applied a visual appearance to the text; the new way does something to lend a bit of description, which assists search engines and non-visual browsers to understand a level of meaning that font tag markup can’t supply.