Structuring News Items with Lists

programming web dev
1

Hey, does anyone have any preference or better suggestions on the following? I had wanted to build a news list with date, image, and blurb using a definition list (option 1) but also wanted to have the whole item linked and would rather not use javascript. I worked out option 2 real quick which just uses unordered lists but it’s a lot more code and doesn’t degrade as structured as Option 1. What do you think would be best here?


<h1>Option 1</h1>
<dl id="news1">
	<dt><a href="">September, 27th, 2006</a></dt>
	<dd><div class="pic"><a href=""><img src="_lib/img/news.jpg" width="40" height="40" alt="" /></a></div> Story goes here</dd>
	<dt><a href="">September, 27th, 2006</a></dt>
	<dd><div class="pic"><a href=""><img src="_lib/img/news.jpg" width="40" height="40" alt="" /></a></div> Story goes here</dd>
	<dt><a href="">September, 27th, 2006</a></dt>
	<dd><div class="pic"><a href=""><img src="_lib/img/news.jpg" width="40" height="40" alt="" /></a></div> Story goes here</dd>
</dl>

<hr />

<h1>Option 2</h1>
<ul id="news2">
	<li>
		<a href="">September, 27th, 2006<br />
			<span class="story">
				<span class="pic"><img src="news.jpg" width="40" height="40" alt="" /></span> 
				Story goes here.
			</span>
		</a>
	</li>
	<li>
		<a href="">September, 27th, 2006<br />
			<span class="story">
				<span class="pic"><img src="news.jpg" width="40" height="40" alt="" /></span> 
				Story goes here.
			</span>
		</a>
	</li>
	<li>
		<a href="">September, 27th, 2006<br />
			<span class="story">
				<span class="pic"><img src="news.jpg" width="40" height="40" alt="" /></span> 
				Story goes here.
			</span>
		</a>
	</li>
</ul>