HTML5: Marking-up a list of "today's" stories for a mock "section front" page.

section-page.html

<!-- ... content before ... -->

<section>
	
	<!-- Section: "Today's stories" -->
	
	<h1>Today's stories</h1>
	
	<section>
		
		<h1>Primary story</h1>
		
		<article>
			
			<hgroup>
				<h1><a href="primary-story.html">Primary story</a></h1>
				<h2>Subheadline goes here</h2>
			</hgroup>
			
			<figure>
				<img src="primary-story.jpg" alt="">
				<figcaption>Photo caption goes here.</figcaption>
			</figure>
			
			<p>Article summary text goes here.</p>
			
			<h3>Related media</h3>
			
			<ul>
				<li><a href="primary-story.html#comments">Comments</a></li>
				<li><a href="primary-story.html#video">Video</a></li>
				<li><a href="primary-story.html#audio">Audio</a></li>
			</ul>
			
		</article>
		
	</section>
	
	<hr>
	
	<section>
		
		<h1>Secondary story</h2>
		
		<article>
			
			<figure>
				<img src="secondary-story.jpg" alt="">
				<figcaption>Photo caption goes here.</figcaption>
			</figure>
			
			<h1><a href="secondary-story.html">Secondary story</a><h1>
			
			<p>Article summary text goes here.</p>
			
		</article>
		
	</section>
	
	<hr>
	
	<section>
		
		<h1>Basic stories</h1>
		
		<article>
			
			<figure>
				<img src="basic-story-01.jpg" alt="">
				<figcaption>Photo caption goes here.</figcaption>
			</figure>
			
			<hgroup>
				<h1><a href="basic-story-01.html">Basic story</a><h1>
				<h2>Subheadline goes here</h2>
			</hgroup>
			
			<p>Article summary text goes here.</p>
			
		</article>
		
		<hr>
		
		<article>
			
			<h1><a href="basic-story-02.html">Basic story</a><h1>
			
			<p>Article summary text goes here.</p>
			
		</article>
		
		<hr>
		
		<article>
			
			<h1><a href="basic-story-03.html">Basic story</a><h1>
			
			<p>Article summary text goes here.</p>
			
		</article>
		
		<hr>
		
		<article>
			
			<figure>
				<img src="basic-story-04.jpg" alt="">
				<figcaption>Photo caption goes here.</figcaption>
			</figure>
			
			<h1><a href="basic-story-04.html">Basic story</a><h1>
			
			<p>Article summary text goes here.</p>
			
		</article>
		
		<hr>
		
		<article>
			
			<h1><a href="basic-story-05.html">Basic story</a><h1>
			
			<p>Article summary text goes here.</p>
			
		</article>
		
		<hr>
		
		<article>
			
			<hgroup>
				<h1><a href="basic-story-06.html">Basic story</a><h1>
				<h2>Subheadline goes here</h2>
			</hgroup>
			
		</article>
		
		<hr>
		
		<article>
			
			<h1><a href="basic-story-07.html">Basic story</a><h1>
			
		</article>
		
		<hr>
		
		<article>
			
			<h1><a href="basic-story-08.html">Basic story</a><h1>
			
		</article>
		
		<hr>
		
		<article>
			
			<h1><a href="basic-story-09.html">Basic story</a><h1>
			
		</article>
		
		<hr>
		
		<article>
			
			<h1><a href="basic-story-10.html">Basic story</a><h1>
			
		</article>
		
	</section>
	
</section>

<!-- ... content after ... -->