SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 39
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Is this worthy of an Unordered List or a Div??

    While minding my own business in another thread, oddz pointed out that my code would be better suited as an Unordered List versus Div's.

    It even caused him to say...
    I don't mean to go deathshadow on you or anything but using divs for a list is not semantic.
    (Sounds pretty serious?!)


    So, here is a larger slice of my code...
    HTML Code:
    <body>
    	<div id="pageWrapper" class="clearfix">
    		<div id="pageInner">
    			<!-- BODY HEADER -->
    			<?php	require_once(WEB_ROOT . 'components/body_header.inc.php');	?>
    
    			<!-- MIDDLE COLUMN -->
    			<div id="pageMidCol_2">
    
    				<!-- ARTICLE LISTING -->
    				<div id="boxArticleIndex">
    					<h2>Small-Business Articles</h2>
    
    					<!-- Summary #1 -->
    					<div class="articleSummary">
    						<h3>Postage Meters Can Save You Money</h3>
    						<div class="image">
    							<a href="<?php echo BASE_URL; ?>articles/postage-meters-can-save-you-money">
    								<img src="<?php echo BASE_URL; ?>images/PostageMeter.png" width="170"
    									alt="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons."
    									title="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons." />
    							</a>
    						</div>
    						<div class="date">Published: December 31, 2011</div>
    						<p>When Office Managers are looking for places to save money, postage probably isn't the first thing that comes to mind.  However, just a few trips per week to the Post Office can cost your small-business more in lost productivity and money than you think!</p>
    						<p><a href="<?php echo BASE_URL; ?>articles/postage-meters-can-save-you-money">Learn how Postage Meters can save you Time & Money</a> and help your business focus on more important issues like growing your business!</p>
    					</div>
    
    					<!-- Summary #2 -->
    					<div class="articleSummary">
    						<h3>Consider Becoming an S-Corporation</h3>
    						<div class="image">
    							<a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">
    								<img src="<?php echo BASE_URL; ?>images/S-Corp.png" width="100"
    									alt="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons."
    									title="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons." />
    							</a>
    						</div>
    						<div class="date">Published: December 31, 2011</div>
    						<p>When most people think of "corporations" they think of mega-companies like Wal-mart, Microsoft, General Motors, Citibank, and so.  However the reality is that all it takes is one person to become a "corporation", and now might be the right time for your small-business to consider making the switch.</p>
    						<p>Incorporating your small-business isn't nearly as difficult or as expensive as you might think, and it offers benefits that may not be so obvious.  <a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">Learn how S-Corporations provide financial benefits and legal protection</a> that you need!</p>
    					</div>

    I think oddz may be on to something here, but who knows?!

    What do you think could be done to take my code to the next level?

    Thanks,


    Debbie


    Off Topic:

    P.S. Is "going deathshadow" on someone a verb or verbal phrase similar to "Googling" something?!

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    Nope, I don't see anything there that I would code as a <ul>. It's true that you've got a lot of nested <div>s, and it may be that with smarter CSS and descendent selectors you could get rid of one or two of them, or maybe leave out some classes or IDs (without seeing the whole page, it's difficult to know how necessary they all are), but realistically each <div> looks like it is serving a purpose so I don't see anything major wrong with the structure.

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Are you kidding it is a clear list of related items. I mean… having to do this it seems pretty clear to me:

    HTML Code:
    <div class="articleSummary">...</div>
    <div class="articleSummary">...</div>
    <div class="articleSummary">...</div>
    <div class="articleSummary">...</div>
    <div class="articleSummary">...</div>
    ...
    The only code I hate more than my own is everyone else's.

  4. #4
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    I think I might be doing the same thing. is this wrong
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The DIV is a generic style container on the whole thus is fairly neutral since DIV elements define content block-level but impose no other presentational idioms on the content.

    Personally I cannot see any list appearing - just from the sample itself - though they do seem to be standalone articles with associated headings, which is what they are at the moment.

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I'm surprised I'm the only one who believes that should be a list considering it is a list of aggregated content.
    The only code I hate more than my own is everyone else's.

  7. #7
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    I see a list of article summaries.

    I'm sort of with oddz on this one except I might use a definition list <dl> in this case instead of a <ul>

    I would put the contents of the <h3>s in the <dt> and the rest of the content relating to the <h3> in a <dd>

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It is a collection of article (summaries) which could easily be placed in a table but there is nothing to strongly suggest it is an inline list of items and all CSS names must be discounted. Only in the loosest sense it becomes an inventory.

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,346
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    For what it's worth, it doesn't look like a list of any sort to me, either. I'm a great fan of definition lists, but even I wouldn't use one here.

  10. #10
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I would still use a list but the crowd has spoken.

    As for a definition list that generally leads to more problems than it solves considering all content for a single entry isn't contained within a single element. That decision *may bit you in the *ass when it comes to achieving certain design goals. Not to mention a true heading tag could not be used when one is using a definition list if in fact the title/heading for an article would be contained in a dt. That can have some negative SEO implications.
    The only code I hate more than my own is everyone else's.

  11. #11
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by oddz View Post
    I would still use a list but the crowd has spoken.
    I would hardly call the opinions of a handful of people in this thread a "crowd" or necessarily a representative view of what is actually thought out there on the cyberweb. You would have to poll multiple websites and get a fairly large response for the opinions to be valid statistically.

    I guess the markup you would use depends on the final layout and styling you need. If I wanted to put a border around each article and its heading I probably wouldn't use a <dl> and I would probably us a <ul> or <div>s similar to the op. At the end of the day, as long as the markup passes the w3c validator with a strict doctype then it really doesn't matter a rat's clacker whether some sort of list is used or not. Well, it doesn't matter to me at least

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    For what it's worth, it doesn't look like a list of any sort to me, either. I'm a great fan of definition lists, but even I wouldn't use one here.
    So how could I improve my markup?

    Or does it look okay the way it is?


    Debbie

  13. #13
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    I'm surprised I'm the only one who believes that should be a list considering it is a list of aggregated content.
    I see what you're saying but where do you draw the line? Is everything with a repeated pattern a list of something? Is a bunch of paragraphs a list <p>? Aggregation lends itself to DIV or <article> in this case.

  14. #14
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So how could I improve my markup?

    Or does it look okay the way it is?
    Can you possibly show the actual layout or maybe a link? There may be extraneous DIVs. Are they all necessary?

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imaginekitty View Post
    Can you possibly show the actual layout or maybe a link? There may be extraneous DIVs. Are they all necessary?
    Just focus on everything below...
    Code:
    <!-- ARTICLE LISTING -->

    Paul O' helped me with my page layout, so that is rock-solid!

    The code below the above comment is mine, so that is certainly prone to errors or "newbie-ness"!

    Thanks,


    Debbie

  16. #16
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by imaginekitty
    I see what you're saying but where do you draw the line? Is everything with a repeated pattern a list of something? Is a bunch of paragraphs a list <p>? Aggregation lends itself to DIV or <article> in this case.
    When dealing with a master page that aggregates content with a link to disclose a detail page for a single entity. The other scenario is a list of featured, most recent, etc items shown as an aside or something.

    Another reason for using a list instead of nested divisions is easily targeting the container for each item without picking up any other divisions inside the container. Granted this can be completely avoided using a child selector but unless you have completely phased out IE6 it is worth a mention.

    HTML Code:
    <ul class="stories">
    <li><div>A div used for something important</div></li>
    <li><div>A div used for something important</div></li>
    <li><div>A div used for something important</div></li>
    <li><div>A div used for something important</div></li>
    </ul>
    Code CSS:
    ul.stories li {
       ...
    }

    Now look at the next scenario:

    HTML Code:
    <div class="stories">
    <div><div>A div used for something important</div></div>
    <div><div>A div used for something important</div></div>
    <div><div>A div used for something important</div></div>
    <div><div>A div used for something important</div></div>
    </div>
    Code CSS:
    div.stories div { /* this will also affect the div with the info */
       ...
    }

    The only solution other than applying the same class to each division would be this:

    Code CSS:
    div.stories > div { /* This will not work properly in IE6 though... */
       ...
    }

    So Your left with:

    HTML Code:
    <div class="stories">
    <div class="story"><div>A div used for something important</div></div> <!-- this mark-up sucks and is no different than using a list and applying the same class to each item - fail -->
    <div class="story"><div>A div used for something important</div></div>
    <div class="story"><div>A div used for something important</div></div>
    <div class="story"><div>A div used for something important</div></div>
    </div>
    Code CSS:
    div.stories .story {
       ...
    }

    It is much more common to have divisions within each item than lists. So ul li { } can be used pretty safely.

    That said I don't think using nested divisions are necessarily wrong for aggregated content but I do believe using a list is more semantic – if we are getting picky.
    The only code I hate more than my own is everyone else's.

  17. #17
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    ... That said I don't think using nested divisions are necessarily wrong for aggregated content but I do believe using a list is more semantic – if we are getting picky.
    I can't offer a complete answer because I'm recovering from surgery and can't sit at the computer. I'm stuck typing on my phone.

    The examples seemed unnecessarily wordy to show your point. I'd have to know why you used doubled up DIVs instead of aggregating them in one.

    A list-item to me is one element, I suppose. Beyond that they seem to get less meaningful to me. That's just me though.

  18. #18
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by imaginekitty View Post
    I can't offer a complete answer because I'm recovering from surgery and can't sit at the computer. I'm stuck typing on my phone.

    The examples seemed unnecessarily wordy to show your point. I'd have to know why you used doubled up DIVs instead of aggregating them in one.

    A list-item to me is one element, I suppose. Beyond that they seem to get less meaningful to me. That's just me though.
    Well to that I say if a list item was only meant to have text it would be an inline rather than block element.
    The only code I hate more than my own is everyone else's.

  19. #19
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Well to that I say if a list item was only meant to have text it would be an inline rather than block element.
    You're replying to a statement I didn't make.

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    A good rule of thumb is to ask "does this already have a semantic meaning?" without the extra tags with meaning around them. You have numbered heading tags saying that they are the start of a new subsection. You have paragraph tags which are pretty much clearly the content of those sections...

    So why would you put more tags with meaning around them? It's redundant. That's where I draw the line on list items -- if you are going to have headings, they already have semantic meaning, don't add more meaning around it.

    Which again, is also my problem with HTML 5's new SECTION, HEADING, NAV and FOOTER tags... which result in wrapping extra meaning for nothing around tags and elements that should already be semantic; used to be stacking semantic meanings was considered a bad thing. As Dan often said, the people who did endless nested tables for nothing, now just do endless nested DIV for nothing -- in a way I'm glad he never got to see the "endless nested HTML 5 tags for nothing" repeating the same idiocy.

    It's WHY we use DIV to group tags as sections -- as DIV does NOT imply any semantic meaning to what it's wrapping. You want a clear section you don't need section, you need a heading to say you're starting a section or a HR to indicate a change in topic without a heading or as a major section/topic break. (and if need be, hide them for screen with CSS -- so they're still there for all the other media targets as needed).

  21. #21
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    A good rule of thumb is to ask "does this already have a semantic meaning?" without the extra tags with meaning around them. You have numbered heading tags saying that they are the start of a new subsection. You have paragraph tags which are pretty much clearly the content of those sections...

    So why would you put more tags with meaning around them? It's redundant. That's where I draw the line on list items -- if you are going to have headings, they already have semantic meaning, don't add more meaning around it.

    It's WHY we use DIV to group tags as sections -- as DIV does NOT imply any semantic meaning to what it's wrapping. You want a clear section you don't need section, you need a heading to say you're starting a section or a HR to indicate a change in topic without a heading or as a major section/topic break. (and if need be, hide them for screen with CSS -- so they're still there for all the other media targets as needed).
    So I hear you saying what I have is okay...


    Debbie

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So I hear you saying what I have is okay...
    Certainly better than abusing a list for it. It would probably also look stupid with CSS disabled -- another sign that you may not be doing it right.

    Though I understand I'm one of the few developers who writes his ENTIRE HTML to within 5% of the final version before I even think layout or CSS...

  23. #23
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ... It would probably also look stupid with CSS disabled -- another sign that you may not be doing it right. ...
    That's it! I knew there was a code smell caused by using/abusing lists for this but I couldn't put my finger on it.

  24. #24
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by deathshadow60
    Certainly better than abusing a list for it. It would probably also look stupid with CSS disabled -- another sign that you may not be doing it right.

    Though I understand I'm one of the few developers who writes his ENTIRE HTML to within 5% of the final version before I even think layout or CSS...
    Using a list is not abusive considering the content is a LIST of aggregated content. Who cares what it looks like with CSS disabled considering structure should have as little as possible to do with appearance.

    Apparently the SP HTML reference is incorrect:

    The ul element, the name for which is an abbreviation of unordered list, is used to [b]group a collection of items together in a list, but in a way that doesn’t suggest an order of precedence or importance. The ul might be used for anything from a simple shopping list to a collection of links.
    That seems awfully close to what is being done. In that there is a collection of items but specially a collection of links used for navigation. No where does it say that the collection of links can't have other content associated with it like a paragraph or image.
    The only code I hate more than my own is everyone else's.

  25. #25
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Oddz, I'd like to see a reply to post #19 before continuing.


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
  •