Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 13 ■ BLOCKS


Structural Meaning


HTML


<body>
<div id="wrapper">
<header><h1>Structural Meaning</h1></header>
<nav><ul><li><a href="#">A Navigation Item</a></li></ul></nav>
<article>
<header><h1>An Example of Structural Meaning</h1></header>
<section>
<header><hgroup>
<h1>This heading identifies the topic of its section.</h1>
<p>This paragraph introduces the topic of the heading.</p>
<p>This paragraph continues the topic of the heading.</p> </hgroup></header>
<p>Everything in a document is related. The block structure identifies the
order and intensity of the relationships. The more elements you wrap around
content, the more tightly connected it becomes to ancestors and siblings.</p>
<ul>
<li>This is an unordered list.</li>
<li>List items are more closely related than items in divisions.</li>
<li>There is no significance to the sequence of unordered list items.</li> </ul>
<h3>New Structural Elements</h3>
<table><tbody>
<tr><td>article</td><td>An article or other complete piece of content</td></tr>
<tr><td>aside</td><td>Secondary content, such as a sidebar</td></tr>
<tr><td>footer</td><td>Footer region</td></tr>
<tr><td>header</td><td>Header region</td></tr>
<tr><td>nav</td><td>Navigation region</td></tr>
<tr><td>section</td><td>A logical region of a page</td></tr> </tbody></table>
Free download pdf