Creating a Website: The Missing Manual, 3rd Edition

HTML5 Semantic Elements

As you learned in Chapter 2, there’s a new standard shaking up the Internet world: HTML5. And although HTML5 is full of improvements, it also comes with a significant caveat. Because it’s so new, many browsers don’t support it completely. Internet Explorer is a particular laggard; you’ll get no support unless you use the brand-spanking-new IE 9.

Because of these browser support issues, web designers need to approach HTML5 with caution. Workaround techniques do allow pages to use many of HTML5’s features without leaving older browsers in the dark, however, many of these solutions are more trouble than they’re worth. (For example, Video in HTML5 talks about the considerable hurdles you need to leap to use HTML5’s video support.)

You can use one group of elements right now, however, and without much extra effort. These are HTML5’s semantic elements, which add meaning to the structure of your pages. Semantic elements let you identify the logical purpose of different portions of your page. For example, you can indicate in your markup where your header is, where you placed your navigation links, and so on. Your visitors never see this information, but you can employ it in a variety of other useful ways. For example, search engines can use it to learn more about your website, screen reading programs can present your content more effectively to people with disabilities, and other tools can extract your data and reuse it in dozens of ways (for example, in a news feed; ...