I want to learn HTML5 and have been working to understand the new tags and rules. I'm developing the html structure for a search form and search results page (similar to the way google works). I've been working hard to understand the semantic meaning of all the decisions I make. Below is the result of what i've been working with. I've included an ample amount of comments to explain my thought process. I would really appreciate it if someone would be able to offer advise on how to improve this markup from a technical or semantic point-of-view.

Thanks!

Code HTML4Strict:
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
 
	<title>HTML 5 Search Results</title>
	<meta name="description" content="HTML 5 Search Results">
	<meta name="author" content="Bryce Ray">
 
	<link rel="stylesheet" href="css/styles.css?v=1.0">
 
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
 
</head>
<body>
 
<!-- 
Embedded Within large website Template
-->
 
	<!-- Search Bar / Search Options -->
	<header>
 
		<!-- Switch between media search modes -->
		<ul id="search-nav"> <!-- Did not use <nav> because this navigation is secondary, it is not of "Primary Importance" -->
			<li>Content</li>
			<li>Images</li>
			<li>Media</li>
		</ul>
 
		<form id="search" method="post">
			<h1>Search Query</h1>
			<input type="search" id="search-text" name="search-text" autocomplete="off" list="search_list" autofocus required aria-required="true"> <!-- Turn off the default browser auto complete, auto focus to search on page load, text is required, use list below for custom auto complete -->
			<datalist id="search_list"> <!-- Custom Auto-Complete Functionality -->
				<option>Suggested Text1</option>
				<option>Suggested Text2</option>
				<option>Suggested Text3</option>
			</datalist>
			<a href="#">+ Advanced Search</a>
			<section class="advanced-search"> <!-- Initially Hidden -->
				<!-- Add advanced search form -->
			</section>
			<input type="submit" value="Search">
		</form>
	</header>
 
	<!-- Search Results -->
	<!-- Only one of the below sections will show at any given time.  Visibility would be toggled by #search-nav -->
	<!-- Should I use <h2> in place of <header> for each of the linked results? -->
	<!-- Chose not to use <section> for preview because it will be so short (1-2 sentences) -->
	<section id="search-content">
		<h1>Content Search Results</h1>
		<aside> <!-- Used for relevant Google-Like paid for advertisments -->
			<ol class="search-results search-ads"> <!-- Ordered list because content will be ordered by weighting -->
				<li>
					<header></header> <!-- Title of result -->
					<div class="preview"></div> <!-- Small sample of pages content -->
				</li>
			</ol>		
		</aside>
		<ol class="search-results"> <!-- Ordered list because content will be ordered by weighting -->
			<li>
				<header></header> <!-- Title of result -->
				<div class="preview">This is some page content with important <mark>keywords</mark></div> <!-- Small sample of pages content - use the <mark> to highlight a search term -->
			</li>
			<li>
				<header></header> <!-- Title of result -->
				<div class="preview">This is some page content with important <mark>keywords</mark></div> <!-- Small sample of pages content - use the <mark> to highlight a search term -->
			</li>
			<li>
				<header></header> <!-- Title of result -->
				<div class="preview">This is some page content with important <mark>keywords</mark></div> <!-- Small sample of pages content - use the <mark> to highlight a search term -->
			</li>
		</ol>
		<footer> <!-- Footer for the Search Results Section -->
			<ul class="pagination"> <!-- Not sure if I should use the <nav> element here -->
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</footer>
	</section>
 
	<section id="search-images">
		<h1>Images Search Results</h1>
		<ol class="search-results"> <!-- Ordered list because content will be ordered by weighting -->
			<li>
				<div class="preview"></div> <!-- Small sample of pages content -->
			</li>
			<li>
				<div class="preview"></div> <!-- Small sample of pages content -->
			</li>
			<li>
				<div class="preview"></div> <!-- Small sample of pages content -->
			</li>
		</ol>
		<footer> <!-- Footer for the Search Results Section -->
			<ul class="pagination"> <!-- Not sure if I should use the <nav> element here -->
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</footer>
	</section>
 
	<section id="search-media">
		<h1>Media Search Results</h1>
		<ol class="search-results"> <!-- Ordered list because content will be ordered by weighting -->
			<li>
				<div class="preview"></div> <!-- Small sample of pages content -->
			</li>
			<li>
				<div class="preview"></div> <!-- Small sample of pages content -->
			</li>
			<li>
				<div class="preview"></div> <!-- Small sample of pages content -->
			</li>
		</ol>
		<footer> <!-- Footer for the Search Results Section -->
			<ul class="pagination"> <!-- Not sure if I should use the <nav> element here -->
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</footer>
	</section>
	<small>&copy; Some Random Search Engine</small>
<!--
End of Embedded Search Results
-->
 
	<script src="js/scripts.js"></script>
</body>
</html>