Home > Articles > Web Development > HTML/CSS

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.

Figure 1.13

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>&copy; 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:

  1. Loads of News
    1. Untitled NAV
  2. Headline article
    1. This is our most important article
  3. Sports news
    1. Sports headline 1
    2. Sports headline 2
    3. Sports headline 3
  4. Entertainment news
    1. Entertainment headline 1
    2. Entertainment headline 2
    3. Entertainment headline 3
  5. Nerdy news
    1. Nerdy headline 1
    2. Nerdy headline 2
    3. Nerdy headline 3
  6. 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?

  • + Share This
  • 🔖 Save To Your Account