HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 7

Semantic Tags

Most of the tags you have encountered up until this point will be familiar to anyone who has worked with earlier versions of HTML. In this lesson, you will explore a new set of tags defined in HTML5 called semantic tags.

If you consider the lessons you have looked at so far, thanks to the power of CSS, it is possible to create the body of even complex web pages entirely from span and div tags. In fact, many web pages are created exactly like this.

Each element that appears on a page—from a header banner, to a table cell, to an image—is responsible for providing the presentation for a rectangular area of the screen, and therefore a div or span can fulfill this role.

Although this approach works from a presentation perspective, the individual tags do not ­contain any meaning about their purpose in the web page: They are therefore said to lack semantic meaning. Not only that, it would be very difficult to deduce from the markup what role each element played in the web page.

Note

The “semantic web” was a term coined by the inventor of the World Wide Web, Tim Berners-Lee. He envisaged a web of data that could be processed by machines as well as people. Although Tim's vision remains largely unfulfilled, the tags you will look at in this chapter are one step along the line to achieving this.

Let's look at a concrete example. A header section for a web page could be defined as follows:

<div class="header">This is the header</div>

You will notice that the ...