␡
- Beginner Recipe: Building an HTML5 Starter Document
- Where Do All the New Elements Come From?
- Beginner Recipe: Using the header Element to Create a Site Header
- Beginner Recipe: Using the hgroup Element to Group Headings
- Beginner Recipe: Creating Navigation with the nav Element
- Intermediate Recipe: Using the New article Element
- Intermediate Recipe: Grouping Content with the section Element
- Beginner Recipe: Creating a Sidebar with the aside Element
- Beginner Recipe: Using the footer Element
- Intermediate Recipe: Using the HTML5 Outliner to Ensure the Correct Structure
- Advanced Recipe: Using All the New Elements to Build a News Page
- Advanced Recipe: Using All the New Elements to Build a Search Results Page
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter is from the book
Advanced Recipe: Using All the New Elements to Build a News Page
Figure 1.13 and the code in Listing 1.13 show how to use all the new HTML5 elements to build a layout for a news page. It includes some basic CSS to position the elements, but you are not doing anything too jazzy just yet; we will save all that for a later chapter.
){kind=link}
)
Figure 1.13 A news page layout using new HTML5 elements
Listing 1.13. Creating a News Home Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loads of News - the best news site there ever was</title>
<style>
header, nav, section, article, footer {display: block;}
header, nav {border-bottom: 1px dotted #000; clear: both; width: 100%;}
nav li {display: inline;}
section#headline {clear: both; border: 5px solid #000; padding: 1%; width: 97%;}
section#sports, section#entertainment, section#nerdy {float: left; margin: 0 5px;
padding: 1%; width: 30%;}aside, footer {clear: both;}
aside img {border: 1px solid #ccc; margin: 0 10px 0 0;}
</style>
</head>
<body>
<header>
<hgroup>
<h1>Loads of News</h1>
<h2>Bringing you all kinds of news!</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sports news</a></li>
<li><a href="#">Entertainment news</a></li>
<li><a href="#">Nerdy news</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section id="headline">
<h1>Headline article</h1>
<article>
<header>
<h2><a href="#">This is our most important article</a></h2>
<p>10th November 2010</p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<section id="sports">
<h1>Sports news</h1>
<article> <!-- (x3) -->
<header>
<h2><a href="#">Sports headline 1</a></h2>
<p>10th November 2010</p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<section id="entertainment">
<h1>Entertainment news</h1>
<article> <!-- (x3) -->
<header>
<h2><a href="#">Entertainment headline 1</a></h2>
<p>10th November 2010</p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<section id="nerdy">
<h1>Nerdy news</h1>
<article><!-- (x3) -->
<header>
<h2><a href="#">Nerdy headline 1</a></h2>
<p>10th November 2010</p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<aside>
<ul>
<li><a href="#"><img alt="Snazzy advert" src="snazzy-advert.gif" height="128" width="128" /></a></li><!-- (x4) -->
</ul>
</aside>
<footer>
<ul>
<li>Site powered by a <a href="#">CMS With No Name</a></li>
<li>Site hosted by a <a href="#">Host With No Name</a></li>
<li>The photos on this site are all owned by the photographer</li>
</ul> <small>© Copyright NoBody 2011</small>
</footer>
</body>
</html>
Now that you have the basic layout and the code sorted, you need to check the documents outline. The previous code will give you the following outline:
- Loads of News
- Untitled NAV
- Headline article
- This is our most important article
- Sports news
- Sports headline 1
- Sports headline 2
- Sports headline 3
- Entertainment news
- Entertainment headline 1
- Entertainment headline 2
- Entertainment headline 3
- Nerdy news
- Nerdy headline 1
- Nerdy headline 2
- Nerdy headline 3
- Untitled ASIDE
This looks lovely! footer is not sectioning content, unlike section, article, nav, and aside, so it does not show up in the outline. nav and aside are untitled, but that is fine. You could possibly give the aside a title if you wanted, though does an external product advertisement warrant a heading?