John Smith with a flacon of HTML N°5 perfume

HTML5

≻ Guidelines for Web Developers

Chapter 2: Structure and semantics for documents

This page shows all examples, graphics and links used in this chapter of HTML5: Guidelines for Web Developers. The first table lists examples and graphics with the relevant page numbers in the book, includes links (where applicable) to the online version of that page plus information on browser compatibility, and shows a preview of the figure in the book. Click on this preview to load the figure in original size in JPEG format. The second table lists all URLs which appear in the book on the relevant pages. If you would like to leave feedback or report any errors and bugs, please use the e-mail contact above.

pageexample / figurescreenshot
20Figure 2.1 The fi ctitious HTML5 blog

created with: Firefox 3.6

tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b

screenshot:
21Figure 2.2 The basic structure of the HTML5 blog header

created with: Firefox 3.6

tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b

screenshot:
23Figure 2.3 The basic structure of the HTML5 blog content

created with: Firefox 3.6

tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b

screenshot:
25Figure 2.4 The basic structure of the HTML blog footer

created with: Firefox 3.6

tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b

screenshot:
26Figure 2.5 The basic structure of the HMTL5 blog sidebar

created with: Firefox 3.6

tested with: Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b

screenshot:
29Figure 2.6 Example of “figure” with “figcaption”

created with: Firefox 3.6

screenshot:
30Figure 2.7 Two examples of ruby annotation

created with: Chrome 6

tested with: Chrome 6, Safari 5, IE 9b

screenshot:
pageURL
19http://code.google.com/webstats/
20http://www.w3.org/TR/html-markup/
20http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html
20http://html5.komplett.cc/code/chap_structure/blog_en.html
20http://html5.komplett.cc/code/chap_structure/blog.css
22http://code.google.com/p/html5shim/
22http://ejohn.org/blog/html5-shiv/
27http://www.w3.org/TR/css3-background/#the-border-radius
27http://www.w3.org/TR/css3-background/#box-shadow
28http://gsnedders.html5.org/outliner/