SitePoint Sponsor

User Tag List

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

    Short Text: <p> or <div>??

    Should this be a <div> or a <p>??

    Published: December 31, 2011

    And why do you say that?

    I am leaning towards changing things like this to <div>'s...

    Thanks,


    Debbie

  2. #2
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    How about <abbr> or <time> for the actual date? The rest needs context for an answer.

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'd use a div or a span, depending on whether you need an inline- or a block-level element.

    The reasoning behind it is that the display of a date isn't a paragraph to me and thus I'd use an element that has as little semantic value as possible which leaves the div and span.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    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 kohoutek View Post
    ... I'd use an element that has as little semantic value as possible ...
    Why would you specifically choose less semantic over more semantic?

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Because <time> is an html5 element and I've not seen DoubleDee use html5 and the date isn't an abbreviation either, ergo there's no suitable element that fits which is why I'd then opt to use an element that has little semantic value.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    OK, assuming she doesn't want to get into HTML 5
    Quote Originally Posted by kohoutek View Post
    ... and the date isn't an abbreviation either ...
    It's an abbreviated version of the Coordinated Universal Time (UTC) standard.

    If like to see what is being published to see the context as well.

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I do see your reasoning but date isn't a proper abbreviation to me. And she has "Published" in there as well which makes it even less an abbreviation in my eyes. We'll have to agree to disagree on this point.
    Another thing that occurs to me is that it might be highly problematic using ABBR in terms of accessibility. Should the ABBR title attribute be read out in its entirety each time a date is present? It's confusing and impractical, IMHO.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Apparently the microformat idea is to use the title attribute for the machine readable UTC but that seems to be inaccessible to me. All that is solved by using <time> though.

  9. #9
    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)
    There isn't any ABBR in those few words as it stands, nothing has been shortened it has specified the month and day and year in an expanded human readable format rather than; 31122011.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I would use a <p> here (assuming a separate line) as a paragraph (in its traditional sense) represents a break in meaning or topic, which is kind of what this is. (Text that indicates a publish date is a break in meaning or subject that deserves its own line.)

  11. #11
    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 xhtmlcoder View Post
    There isn't any ABBR in those few words as it stands, nothing has been shortened it has specified the month and day and year in an expanded human readable format rather than; 31122011.
    I was considering the microformat pattern.
    Resulting in something like this:
    Code HTML4Strict:
    <p>Published: <abbr title="2011-12-31T18:45:44-05:00">December 31, 2011</abbr></p>
    but I do have issues with it. <time> is still my choice for the datetime section.

    Still wondering about context though as that is necessary to determine whether <div> is acceptable over <p> for the entire "Published: #datetime#". So far, I agree with ralph.m. Use <p>.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I'd use a p element as its clearly not a DIV(ision).

    P is for paragraphs which can be one sentence or many sentences and sentences can be as short as two words.

    If you use an inline element such as a span then you have to enclose that in a block element as well to be semantically correct which defeats the purpose a bit.

    A lot of other people say it should be a div and not a p but I don't agree unless its something that stands alone from anything else on the page and needs to be separated by a div.

  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)

    Thumbs up

    Paul O'B nailed it.
    Quote Originally Posted by Paul O'B View Post
    ... A lot of other people say it should be a div and not a p but I don't agree unless its something that stands alone from anything else on the page and needs to be separated by a div.
    Exactly, that's why we need context from Dee.

    @DoubleDee, best questions! Love it!

  14. #14
    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)
    Assuming it were a standalone online book then typically it would lend itself more to the P element in most cases if the date was supposed to be within the main body content of the page itself. Though we don't know what it is being used for it could even be a link.

  15. #15
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Great explanations, Ralph and Paul. I've always opted for an element with low semantic value for the date, usually using a span if it's for simple article dates or a div if it's strongly separated from the rest of the content. But your logic makes a lot more sense in using a p instead. For whatever reason a date never warranted a paragraph to me but, alas, I can see how it actually is one.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  16. #16
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    In regards to time: This element is highly impratical, as it makes it impossible to use dates in HTML5 documents prior to year 0000 or after year 9999, in that negative years and years with more than four digits require prior agreement between those exchanging data, as per ISO 8601. In other words, HTML5 has taken a revisionist approach to ancient history, and does not view the future as being important.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  17. #17
    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
    Paul O'B nailed it.
    Exactly, that's why we need context from Dee.

    @DoubleDee, best questions! Love it!
    Here is some context (in HTML)...
    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>

    As you can see, I changed things from a <p> to a <div>, although now it sounds like a <p> is better...

    Am pretty sure that DeathShadow would vehemently say "Do not use a <p>!!!"

    Regardless, I just want to keep getting better at HTML, CSS, and web development in general!!

    Thanks,


    Debbie

  18. #18
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imaginekitty
    Code:
    <abbr title="2011-12-31T18:45:44-05:00">December 31, 2011</abbr>
    This will be immensely annoying for users who use assistive technology.

    Debbie, I would use a paragraph for this.
    Ryan B | My Blog | Twitter

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    Am pretty sure that DeathShadow would vehemently say "Do not use a <p>!!!"
    Yes, Jason has said before that he uses divs for short text like that.

    As usual there is no ultimate answer and you will always get opposing views so unless the answer is written in stone somewhere in the specs ( which it isn't) you must make your own choice.

    It's not really a big issue either way in this case.

  20. #20
    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 Paul O'B View Post
    Yes, Jason has said before that he uses divs for short text like that.

    As usual there is no ultimate answer and you will always get opposing views so unless the answer is written in stone somewhere in the specs ( which it isn't) you must make your own choice.

    It's not really a big issue either way in this case.
    Well, maybe I'll get a brownie-point from DeathShadow if I leave in the <div>'s...

    Of course, will you still respect me in the morning, Paul O'?!

    Thanks for the feedback, gang!


    Debbie

  21. #21
    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
    Here is some context (in HTML)...
    HTML Code:
    <snip>*</snip>
    I suppose if you're going to use that many DIVs 10 or 30 more won't hurt.

  22. #22
    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 rguy84 View Post
    This will be immensely annoying for users who use assistive technology.
    Yes, that's why I have issues with it and use <time> instead. It really shouldn't be an issue with screen readers but that's a software issue. I do agree that <p> is the better choice considering the context.

    I would probably do it like this though:
    Code HTML4Strict:
    <p><time pubdate datetime="2011-12-31T08:20:11Z">December 31, 2011</time> 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>

  23. #23
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    I used a paragraph. I did not want to add another DIV in my long list of DIV's, plus it was easier for me to follow.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  24. #24
    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
    @DoubleDee, best questions! Love it!
    Thanks again!!

    Glad to stimulate conversation here at SitePoint. (Of course, YOU are the one who got the award this year... Congrats!!)


    Debbie

  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)
    Quote Originally Posted by DoubleDee View Post
    ... Glad to stimulate conversation here at SitePoint. ...
    I appreciate it. As you can see I love to give another point of view.

    Quote Originally Posted by DoubleDee View Post
    ... (Of course, YOU are the one who got the award this year... Congrats!!)
    Oh, that's not an award. That's because I'm really hot.


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
  •