Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Thinking HTML5 semantics CHAPTER 5 207

NVDA devices need your help to interpret your webpage content properly. They need you

to use meaningful HTML tags that define the purpose of each element’s contents. Doing so

helps crawlers produce better matches to search queries, and NVDA devices that read your

webpages to users can provide a more meaningful experience. For more information, visit

http://www.nvdaproject.org/.

FIGURE 5-1 The refreshable Braille display

Creating semantic HTML5 documents

Now that you understand the importance of using semantic markup, you might decide that

you’ll never use a <div> or <span> element again. However, you will come across content

that needs to be styled but doesn’t clearly fit the meaning of any semantic elements. You can

and should use <div> and <span> elements in these scenarios.

Throughout this book, you will find many HTML5 tags. As you create your HTML pages,

you will be faced with the sometimes daunting task of providing meaning to your content by

supplying semantic tags. Use semantics carefully so you use an element only for its intended

purpose. If you need a custom element, use the <div> or <span> tag and add a class name or

id that conveys the semantics you desire. Be pragmatic and not too much of a purist.

Creating an HTML5 layout container

The previous chapter showed many examples that demonstrate the use of <div> elements

to provide positioning of content on a webpage. If you were creating a webpage to display

blog posts, you might create a layout container for your page that looks like the example in

Figure 5-2.