HTML and CSS Reference
In-Depth Information
This section elaborates on this basic structure as semantic markup is introduced through-
out the objective. All content to be introduced to the page will go within the
<body>
element
because that page section displays content in the browser. As it is now, this code would ren-
der nothing more than a blank page. To see some content as you work through the following
sections for each semantic element, use the code in Listing 1-1.
LISTING 1-1
HTML5 semantic elements
<body>
<header>
<h1>Some fictional company Website</h1>
<nav>
<a href="Home.html">Document Structure</a>
<a href="Blog.html">Writing Code</a>
<a href="About.html">Styles</a>
</nav>
</header>
<article>
<header>
<hgroup>
<h1>Our first new Article</h1>
</hgroup>
</header>
<section>
<h1>Section 1</h1>
<p>Some details about section 1</p>
<aside>Did you know that 7/10 is 70%</aside>
</section>
<section>
<h1>Section 2</h1>
</section>
</article>
<article>
<header>
<hgroup>
<h1>Second huge article</h1>
</hgroup>
</header>
<p>Provide some useful information in the article</p>
</article>
<article>
<header>
<hgroup>
<h1>Third huge article</h1>
</hgroup>
</header>
<p>Provide some useful information in the third article</p>
<figure>
<img src="orange.jpg" style="width:50px; height:50px;"/>
<figcaption>Fig 1: A really juicy orange.</figcaption>
</figure>
</article>
</body>
Search WWH ::
Custom Search