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 Search Results Page

In Listing 1.14 you will put together several new HTML5 elements to create the structure of a search results page (Figure 1.14). Bear in mind that there is no CSS for this recipe, just HTML.

Figure 1.14

Figure 1.14 A search results page

Listing 1.14. Elements Combined to Make a Search Results Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Search</title>
</head>
<body>

<nav>
  <ul>
    <li>Web</li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Maps</a></li>
    <!-- etc -->
  </ul>
</nav>

<header>
  <h1>Search company name</h1>
</header>

<form>
  <fieldset>
    <legend>Search</legend>
    <label for="searchinput">Search</label>
    <input type="search" id="searchinput" name="searchinput" />
    <input type="submit" value="Search" />
    <a href="#">Advanced search</a>
  </fieldset>
</form>

<nav>
  <h2>Refine search</h2>
  <ul>
    <li><a href="#">Everything</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">More</a></li>
  </ul>
  <h3>The web</h3>
  <ul>
    <li><a href="#">Pages from the UK</a></li>
    <li><a href="#">Pages from your area</a></li>
  </ul>
<h3>Any time</h3>
  <ul>
    <li><a href="#">Latest</a></li>
    <li><a href="#">Past 2 days</a></li>
    <li><a href="#">More search tools</a></li>
  </ul>
</nav>

<section>
  <header>
    <h1>Results for &quot;test&quot;</h1>
    <p>About 1,410,000,000 results (0.21 seconds)</p>
  </header>

  <article>
    <header>
      <h1><a href="#">First result</a></h1>
    </header>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <footer>
      <p>www.pretendwebsite.com - <a href="#">Cached</a></p>
      <ul>
        <li><a href="#">News</a></li>
        <li><a href="#">Shopping</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">Sport</a></li>
        <li><a href="#">Business</a></li>
        <li><a href="#">Entertainment</a></li>
        <li><a href="#">More results from pretendwebsite.com</a></li>
      </ul>
    </footer>
  </article>

  <article>
    <header>
      <h1><a href="#">Second result</a></h1>
    </header>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <footer>
      <p>www.pretendwebsite2.com - <a href="#">Cached</a></p>
    </footer>
  </article>
  <article>
    <header>
      <h1><a href="#">Third result</a></h1>
    </header>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <footer>
      <p>www.pretendwebsite3.com - <a href="#">Cached</a></p>
    </footer>
  </article>    <!-- and so on... -->

  <aside>
    <nav>
      <h2>Searches related to &quot;Test&quot;</h2>
      <ul>
        <li><a href="#">Another <strong>site</strong></a></li>
        <li><a href="#">Another <strong>site</strong></a></li>
        <li><a href="#">Another <strong>site</strong></a></li>
        <li><a href="#">Another <strong>site</strong></a></li>
        <!-- etc -->
      </ul>
    </nav>
  </aside>

</section>

<nav>
  <ul>
    <li class="currentpage">1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <!-- and so on... -->
  </ul>
</nav>

<form>
  <fieldset>
    <legend>Search</legend>
    <label for="searchinput2">Search</label>
    <input type="search" id="searchinput2" name="searchinput2" />
    <input type="submit" />
    <a href="#">Advanced search</a>
  </fieldset>
</form>

<footer>
  <ul>
    <li><a href="#">Terms and conditions</a></li>
    <li><a href="#">Privacy policy</a></li>
    <!-- etc -->
  </ul>
</footer>
</body>
</html>

You might have other ideas about which markup to use, which is great; you should be thinking about making beautiful HTML.

The results are all within a section that has the heading <h1>Results for &quot;test&quot;</h1>. After that, each result is within its own article, each with a header and footer. The search results could go even further and be split into sections or articles again, depending on their content.

There is paging toward the bottom of the code that could be considered to be "major navigation" (remember what the HTML5 specification says), because the paging functionality is crucial to how a user navigates through their search results.

  • + Share This
  • 🔖 Save To Your Account