SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot biggie2's Avatar
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Semanticaly correct (span tags inside <li> tags)

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

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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,
    Code HTML4Strict:
    <li><div><a href="#">Unordered List - First item.</a></div>
    <div class="date-news">November 3, 2009</div></li>
    Birnam wood is come to Dunsinane

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by biggie2 View Post
    Curious to know if the following is semantically correct...to have a <br /> tag and <span> inside a list?

    Code:
    <li><a href="#">Unordered List - First item.</a><br />
    <span class="date-news">November 3, 2009</span>
    Yes, absolutely fine. An <li> can contain either block-level or inline elements.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code HTML4Strict:
    <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>
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •