Semanticaly correct (span tags inside <li> tags)

HTML & CSS
1

Curious to know if the following is semantically correct…to have a <br /> tag and <span> inside a list?


<li><a href="#">Unordered List - First item.</a><br />
<span class="date-news">November 3, 2009</span>
2

It’s fine to use a <span> and a <br> in a <li>, but rather than use the <br> element, I’d recommend adding this to your CSS file:

li span {display:block;}

The ideal is not to use HTML for presentation unless really necessary. One could, of course, argue that the <br> element will allow the formatting to be preserved even if CSS is off, which is fair enough… so it’s up to you.

3

I agree with Ralph. If it’s essential to display the link and the date on separate lines even when the document is viewed without CSS styling, then use,

<li><div><a href="#">Unordered List - First item.</a></div>
<div class="date-news">November 3, 2009</div></li>
4

Yes, absolutely fine. An <li> can contain either block-level or inline elements.

5

You can even use other block level elements here if they make sense in context – for example, if some text follows your dateline and heading, you could mark up the contents of each as if they were mini news articles of their own:


<h2>Top stories</h2>
<ul>
 <li>
  <h3>
    <a href="#">Sweet Headline, Man</a>
  </h3>
  <div class="date-news">
    November 3, 2009
  </div>
  <p>
    Lorem ipsum dolor sit amet, something something (...)
  </p>
  <div class="read-more">
    <a href="#">Read more...</a>
  </div>
 </li>
 <!-- more items here-->
</ul>