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

[rguy84]

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.

Off Topic:

From what I read, screen readers should not have issues with <time>. I read http://html5doctor.com/the-time-element/, and I am not convinced about time quite yet. While it supposed to "encod[e] dates and times for machines while still displaying them in a human-readable way." what does that mean? Does the pretty date get read out via screen reader? Ok, since devs use the latest versions of Assistive technology, they often look past the real world people, who cannot afford to upgrade two days after a new version is out.

[imaginekitty]

Off Topic:

.

.. Does the pretty date get read out via screen reader? Ok, since devs use the latest versions of Assistive technology, they often look past the real world people, who cannot afford to upgrade two days after a new version is out.

I don't know. You can use the TITLE attribute with TIME to do something like this:

<time pubdate datetime="2011-11-15T14:37:40Z" title="November eleventh, two-thousand eleven at nine thirty-seven in the morning">11/15/2011 at 9:37 AM</time>

to cover that issue, I suppose. I'd like to see some testing on that.

[rguy84]

Off Topic:

.
I don't know. You can use the TITLE attribute with TIME to do something like this:

<time pubdate datetime="2011-11-15T14:37:40Z" title="November eleventh, two-thousand eleven at nine thirty-seven in the morning">11/15/2011 at 9:37 AM</time>

to cover that issue, I suppose. I'd like to see some testing on that.

Off Topic:

It would come down to what program was being used, and the user settings. The title tag would be ignored, or it would be read twice. I was testing a site the other day, it had:

<label for="patName">Patient Name:</label><input name="patName" title="What's your patient's name?">

This was read as: What's your patient's name? Patient Name edit

[deathshadow60]

Doesn't look like a paragraph, I'm with the DIV or SPAN folks on that... but it would really hinge on the CONTEXT... I'd have to see what's around it... if it was the last thing after a string of actual content paragraphs, I'd give P a good hard look... if it's after a numbered heading tag, I'd be asking "why isn't this in a span INSIDE the H2 since it's... well, part of the H2".

Context counts for a LOT when it comes to semantic markup - which is why a small snippet is most always gibberish and why there's no easy "Always do this" for elements.

... and personally, I hate the TIME tag as much as I do the microformat ABBR tag abuse -- if the content isn't telling you enough about something like a time, there's something wrong with the content. It's just pointless bloat that nothing practical has any reason to even try to use.

[deathshadow60]

Off Topic:

This was read as: What's your patient's name? Patient Name edit

IMHO that's a case of "what the **** does this have a TITLE on it for?" -- there's no reason to be putting TITLE on a INPUT any more than there is to do so on IMG... yes, you see people do it all the blasted time, but that doesn't mean there's a legitimate reason for doing it.... TITLE is one of the most abused/misused attributes out there, with people slapping them into pages for no good reason on things that don't need it -- see Turdpress' idiotic "lets put title attributes on anchors identical to the text inside them"

That's not a paragraph, why are you marking it up as such? That TITLE is identical to the content inside it, why are you putting a TITLE on it? If all of the LI inside that UL are getting the same class, why do they even have classes? <td class="heading">? <b class="heading">? <img src="images/bullet.png" alt="">?

It's all the same scale ineptitude of coding and usually indicates a failure to grasp the simplest of concepts on how HTML works or even what it's FOR!

[imaginekitty]

... It's just pointless bloat that nothing practical has any reason to even try to use.

I suppose the point of the microformats is to give readability to humans first and not leave out machine readability. It makes a lot of sense if your working with iCalender events or vCards. ABBR is semantic-ish, almost. TIME makes more sense.

[DoubleDee]

Doesn't look like a paragraph, I'm with the DIV or SPAN folks on that... but it would really hinge on the CONTEXT... I'd have to see what's around it... if it was the last thing after a string of actual content paragraphs, I'd give P a good hard look... if it's after a numbered heading tag, I'd be asking "why isn't this in a span INSIDE the H2 since it's... well, part of the H2".

Context counts for a LOT when it comes to semantic markup - which is why a small snippet is most always gibberish and why there's no easy "Always do this" for elements.

See Post #17.

There is tons of "context" there...

So with that said, should my Published Date be a <p> or a <div> or something else?


Debbie

[deathshadow60]

Oddly, I have to see what you are doing with that image and/or what that image is to weigh in -- since to be honest if possible I'd have the published date inside a span inside the H3 since it's part of the heading.

The image just leaves me asking why the DIV, why the redundant title on IMG (If you're GOING to use title there, it goes on the anchor to say where the anchor is going, while alt is the text for users with images off -- they should rarely be the same or both included)... from a semantic standpoint I'm unsure that img is actually content, I WOULD put the anchor in the h3 making it's text part of the link....

echo '
	<h3>
		<a href="',BASE_URL,'articles/postage-meters-can-save-you-money">
			Postage Meters Can Save You Money
			<img
				src="',BASE_URL,'images/PostageMeter.png"
				width="170"
				alt="Postage Meter.  Credit: John Doe, Wikimedia Commons."
			/>
		</a>
		Published: December 31, 2011
	</h3>';

Basically treating that all as part of the heading -- though if the image is something like just an icon, I'd consider moving it either out of the HTML completely if it's a standard article icon you re-use a lot, or if it's a one-off that's one of the VERY RARE instances I'd allow for the style attribute... which would gut it down to:

echo '
	<h3>
		<a
			href="',BASE_URL,'articles/postage-meters-can-save-you-money"
			style="background-image:url(',BASE_URL,'images/PostageMeter.png);"
		>Postage Meters Can Save You Money</a>
		Published: December 31, 2011
	</h3>';

or even less if it's a common image. If the image is just presentation and not actual content -- which seemed to be the case here (though guessing since I'm not seeing the image) there's no reason for it to have a HTML element assigned to it. Also since the anchor would make the style hook for the first textnode, you'd not even need anything extra to target the second one. Makes a lot more sense from a semantics standpoint, would have better accessibility since people wouldn't be hunting for the link (which images as links can do), and it's significantly less markup.

...and as always I'd swing an axe at all the <?php ?> and placement of redundant comments that could actually trip rendering bugs... the outdated clearfix nonsense...

[DoubleDee]

DeathShadow,

To help you understand better what I am doing visually, attached is a screenshot of the markup provided above...

Attachment 58763


Debbie

[kohoutek]

I'll go with what I said at the very beginning of this thread. With the structure you have (in your attachment), I'd put the date in a div or span (though I'd use a div as block seems more apt here anyway), place the article summary in a div (as you already have), and remove the extra div from the image as you don't need it since you can style img and set it to display:block and float it.

Edit: Your post below says that you have an anchor in your image. I'm wondering why it is there? It'd be enough to have your link (at the bottom of your summary) direct to the full article.

[DoubleDee]

Oddly, I have to see what you are doing with that image and/or what that image is to weigh in -- since to be honest if possible I'd have the published date inside a span inside the H3 since it's part of the heading.

See attachment above.

The image just leaves me asking why the DIV,

Because I thought an anchor was an inline element that similar to a <span> needed a parent block element?!

why the redundant title on IMG (If you're GOING to use title there, it goes on the anchor to say where the anchor is going, while alt is the text for users with images off -- they should rarely be the same or both included)...

I did that so users would know what the image is if they hover over it OR if they have a screen reader. (I did NOT want to have to add a citation below each image because it takes up precious space and in my mind looks tacky giving citations to Wikimedia Commons images?! Makes me look to poor to afford "real" photos...)

When I have time, I will likely break down and add a tiny citation below each image, although I'm still not certain of this, because of the extra real-estate, work, and because it could make it harder to keep the citation with the image and not screw up my surrounding layout. (In another thread, Ralph suggested wrapping the image and citation in a <div> to keep them together, but then that just perpetuates this "<div>-itis m.o." that some people think describes me...)

from a semantic standpoint I'm unsure that img is actually content,

Well, the image communicates what the Article Summary and the Article are about, so I would say that it IS visual content.

I WOULD put the anchor in the h3 making it's text part of the link....

echo '
	<h3>
		<a href="',BASE_URL,'articles/postage-meters-can-save-you-money">
			Postage Meters Can Save You Money
			<img
				src="',BASE_URL,'images/PostageMeter.png"
				width="170"
				alt="Postage Meter.  Credit: John Doe, Wikimedia Commons."
			/>
		</a>
		Published: December 31, 2011
	</h3>';

Questions:
1.) If I do that, then that makes the Heading and the Image both hyperlinks, right?!

2.) Can you put multiple things/elements in one anchor like that?! (And some people thought putting an image and paragraph in a <li> was bad news?! Right, oddz?!

3.) Why put the Published Date in the Heading?

4.) And if you do #3, then why not use <small> ?

Basically treating that all as part of the heading -- though if the image is something like just an icon, I'd consider moving it either out of the HTML completely if it's a standard article icon you re-use a lot, or if it's a one-off that's one of the VERY RARE instances I'd allow for the style attribute... which would gut it down to:

echo '
	<h3>
		<a
			href="',BASE_URL,'articles/postage-meters-can-save-you-money"
			style="background-image:url(',BASE_URL,'images/PostageMeter.png);"
		>Postage Meters Can Save You Money</a>
		Published: December 31, 2011
	</h3>';

or even less if it's a common image.

Way too squirrely for me?!

If the image is just presentation and not actual content -- which seemed to be the case here (though guessing since I'm not seeing the image) there's no reason for it to have a HTML element assigned to it.

What makes something "actual content" versus "presentational"??

...and as always I'd swing an axe at all the <?php ?> and placement of redundant comments that could actually trip rendering bugs... the outdated clearfix nonsense...

I'm still holding out, especially on my pretty comments...

Thanks,


Debbie

[rguy84]

1.) If I do that, then that makes the Heading and the Image both hyperlinks, right?!

Debbie, He probably put the associated image into the link so users could click on either to read the story. There is probably a usuability study out there saying people attempt to click on story images first then the title. I tend to do click on the image if I am having a bad day (read: not emotionally) because the image is usually bigger than the text, thus giving me a bigger target to click on. Since both the image and title are linked to the same place, it is logical to mash them into a single link. You can probably read on the SEO forum here about linking each seperately, and what affects it can have. I would probably null the alt out in the link, unless you need to always give photo credit. Typically the image representing the story blurb on the main page is also on the page that has the full story. Thus giving it an alt on the main page just adds chatter. Now if you always need to give photo credit, than youu need the alt.