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…



How about <abbr> or <time> for the actual date? The rest needs context for an answer.

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.

Why would you specifically choose less semantic over more semantic?

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.

OK, assuming she doesn’t want to get into HTML 5

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.

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.

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.

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 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.)

I was considering the microformat pattern.
Resulting in something like this:

<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>.

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.

Paul O’B nailed it.

Exactly, that’s why we need context from Dee. :slight_smile:

@DoubleDee, best questions! Love it!

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.

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.

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.

Here is some context (in HTML)…

	<div id="pageWrapper" class="clearfix">
		<div id="pageInner">
			<!-- BODY HEADER -->
			<?php	require_once(WEB_ROOT . 'components/');	?>

			<!-- 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." />
						<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>

					<!-- 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>!!!” :smiley:

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



This will be immensely annoying for users who use assistive technology.

Debbie, I would use a paragraph for this.

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’?! :smiley: :lol:

Thanks for the feedback, gang!