Semantic Markup

The difference in philosophy between coding for appearance and coding for proper semantics can be subtle, so here is a code example to help illustrate. This is considered presentational markup:

 <br><br> <b><font size="2">Our Family</font></b> <br><br> <font size="1">Pictured are Matt and Jeremy. As usual, Matt is making a funny face. We don't have many photos where he isn't.</font> 

Whereas this is semantic:

 <div >  <h3>Our Family</h3>  <p>Pictured are Matt and Jeremy. As usual, Matt is making a funny  face. We don't have many photos where he isn't.</p> </div> 

In the first example, all tags were chosen strictly for formatting purposes. The <br> tags were used to force line breaks, the <b> tags were used to make the text bold, and the <font> tags set the text size.

Note

What's the difference between a <p> tag and a p element, anyway? In some senses they refer to the same thing, but there's a subtle distinction. A tag is simply the actual HTML delimiter; <p>, <div>, and </body> are all tags. An element is made up of a pair of opening and closing tags, which presumably contain content of some sorta notable exception being the <br /> tag which opens and closes itself, without content.

Basically, an element is a specific piece of structure, while a tag is just the syntax that helps you create the structure.

In the second example, absolutely no concern was given to the way the page looks; attention was focused on how well the h3 and p elements describe the function of each piece of content within the page. The p element contains an actual paragraph of text, and the H3 describes a header that may be considered third level within the rest of the page.

The key is that in the second case, it doesn't matter what the elements look like, because we will override them with CSS. They were chosen because they best describe the content. This is what defines HTML semantics: elements that are chosen for their purpose and not their appearance.

There are genuine benefits to formatting a document semantically, which we'll discuss just a little bit later in this chapter. For now, keep in mind that a major design goal when building with CSS is to start out with a valid, well-structured, and semantic HTML document, and then apply style on top of that solid foundation.