Semantic and presentational HTML

The approach we are taking in this chapter and in the first part of the book overall is to only use HTML elements and attributes that are covered by all three standards. In practice, this means we will not use any HTML4 attributes that disappeared in HTML5 and will not use any HTML5 elements or attributes that did not exist in HTML4.

On the other hand, we do not want to discourage the use of new things, so we will list HTML5-specific elements in a separate list. We will also use the new elements in the second section of the book where we introduce a cool CSS/JavaScript framework.

One could easily pide HTML elements into two groups. The first group consists of elements that refer to parts of a document: headers, paragraphs, tables, forms, lists, and so on. ( <h1>, <h2>, <p>, <table>, <ul>). We call this semantic HTML as they refer to the names of things; they describe what they are.

Another group contains the elements used to indicate how things look: how they are aligned, which font is used, if it is in bold or italics, and so on ( <center>, <font>, <b>, <i>), and we could call them presentational HTML. The same is true for HTML attributes. class="green" or id="chapter" would be semantic, while width="150px" or valign="top" would be presentational.

Note

It is the recommendation of the W3C to use CSS for presentational things, and we follow that recommendation. This way will also avoid you learning a bunch of new things, only to later find out that they are no longer used, as most HTML4 elements and attributes that are no longer available in HTML5 happen to be presentational. The word you will find online to indicate that something is no longer used is deprecated.

When I first ran into this word I misread it as depreciated. That word might have been a better choice. Either way, if elements and attributes are labeled as such, avoid using them.

As a consequence, we are not going to show you pretty examples of HTML documents in this chapter, as the part that will make it pretty, CSS, will have to wait for a while until we get to Chapter 3, CSS.