Creating website: Emphasis, Lists

Emphasis

When working with almost any kind of content, some parts of that content will need to be emphasized
more than others. For instance, many times when marking up a document, you need to make
words bold or italic. Back in the old days before web developers realized the importance of havingsemantically rich and meaningful HTML documents, this was most commonly done using the <b> and
<i> elements. Wrap a word or phrase in the <b> element, and it would render as bold in the browser
window. That seems simple enough, right? But let’s analyze this for a minute.
What does “bolding” some part of a sentence really mean? It doesn’t mean “make it bigger”—that’s
just how it ends up looking. What it means is “make it stand out.” The key concept, of course, is that
when you think of making something bold, all you really want to change is its presentation, or how it
looks. Well, as you and I know, thanks to being the enlightened semantic web developer that you are,
markup should be about what the content means and not what it looks like.
In modern HTML and XHTML, you typically replace all occurrences of the <b> element with the
<strong> element, which simply means “strong emphasis.” Similarly, you replace all occurrences of
the <i> element with the <em> element, meaning simply “emphasis.” When you enclose words or
phrases inside the <em> element, the browser automatically defaults to italicizing the text. Similarly,
the browser defaults to bolding words or phrases inside the <strong> element.
Be sure to use the <em> and <strong> tags only when you mean to emphasize text. If you’re looking
to achieve italic or bold on text without meaning to emphasize it, say a book title, stylize the text
appropriately using CSS (discussed in future chapters). Don’t put <em> or <strong> tags around
text just because you want it to be italicized or bold. Be sure to keep your markup meaningful and
accurate.
Lists
Lists are another common item in publishing. Using XHTML, you have three different kinds of lists:
ordered, unordered, and definition lists. Ordered lists are meant to itemize sequential items and so are
prefixed by numbers, in order, by default, whereas items in an unordered list are meant to itemize
things that don’t imply a sequence, so they’re prefixed by bullets by default. Definition lists are meant
to hold glossary terms or other title and description items in a list, so they’re not prefixed by anything
at all by default.
The elements you use to define these lists are <ol> for ordered lists, <ul> for unordered lists, and
<dl> for definition lists. In each case, the only children these elements are allowed to have are the
appropriate list items. So, let’s start building a list.
Unordered and ordered lists
For this example, let’s mark up a grocery list:
Milk
Eggs
Butter
Flour
Sugar
Chocolate Chips
Here, an unordered list makes perfect sense because the order you buy these items in really makes no
difference. If this were not a shopping list but, say, a list of directions for making chocolate brownies,
then perhaps the order you add these items to your mixing bowl would matter, and an ordered list
would be more appropriate. But let’s stick with your shopping example and add the <ul> element to your list:

<ul>
Milk
Eggs
Butter
Flour
Sugar
Chocolate Chips
</ul>
So, you have all the items in your list inside the appropriate element. Next, each item of an unordered
(or ordered) list must be contained within a list item element, defined with <li>. Let’s insert the <li>
elements into your unordered list:
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
<li>Flour</li>
<li>Sugar</li>
<li>Chocolate Chips</li>
</ul>
Now your list is complete. If you were to look at this in a browser, it would look something like Fig 4-3