␡
- 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 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.
){kind=link}
)
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 "test"</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 "Test"</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 "test"</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.