Joomla CMS 3.3 rc: Microdata in single article view causes invalid HTML

[richard67]

Steps to reproduce the issue

Validate a page of a single article view on a Joomla 3.3 beta1 or beta2 or rc site with the W3C validator or any other HTML validator.
The article has to include some block elements like e.g. div or p (paragraph) in its content.

Expected result

The validator should not list lots of HTML errors.

Actual result

The validator lists lots of errors related to elements being not allowed to appear within a span element, e.g. paragraphs, divs and so on.
The reason is the span element with itemprop="articleBody" which is wrapped around the output of the article content (/com_content/views/article/tmpl/default.php lines 200 .. 202) for microdata markup.
It should be a div element instead.

System information (as much as possible)

Joomla 3.3 beta 1, beta 2 and rc tested on a shared Linux host in a private environment.
Protostar template used, no extensions installed.
Further system info not relevant for this issue.

Additional comments

After I've created a template override for the article view of com_content with the necessary correction (changed span to div), HTML was validated succesfully with the W3C validator, and everything else works well and looks fine, too.
The author of the pull request with which this part of the microdata markup was implemented had written following (see somewhere in discussion on Github):
"However the div is a block element and would change the appearance in some cases. That's why I used the span so it sure doesn't break any layout."
From my point of view this is not OK not to mention HTML syntax just because of possible layout issues. Breaking of layout has to be avoided by using css classes for this div and having css styles in templates (border 0, margin 0 and so on).

Update 2014-05-24: This tracker item can be closed since the issue has meanwhile been handled with this PR: #3511

[richard67]

I've meanwhile added a tracker item #33662 at joomlcaode
You may blame the J!Tracker Application for transmitting this comment.

[Bakual]

Since it was me who did that PR I can confirm and do acknowledge the problem.

From my point of view this is not OK not to mention HTML syntax just because of possible layout issues. Breaking of layout has to be avoided by using css classes for this div and having css styles in templates (border 0, margin 0 and so on).

The problem is breaking layouts is out of discussion, and we can't add CSS rules for that because it's the templates job. I guess we can use <section> instead then?

[richard67]

Hmm, the section tag is not supported in IE8 or earlier, and IE8 is still a browser officially supported by Joomla 3.3. I had no problems or layout issues with the protostar template, so I did not have to add any CSS.

[richard67]

but maybe section will work when IE8 and other pre-HTML5 browsers ignore it

[richard67]

it would be valid HTML5 with section according to the dom ref, so section could be ok

[Bakual]

Hmm, the section tag is not supported in IE8 or earlier, and IE8 is still a browser officially supported by Joomla 3.3

Tags which aren't supported by a browser are just ignored. Since the tag is only there for the itemprop property, nothing will be missing at all.

I had no problems or layout issues with the protostar template, so I did not have to add any CSS.

Yep, Protostar doesn't has issues. But other templates may have issues. Maybe only together with plugins like the pagebreak one. We just don't know and I'd like to avoid it if possible 😃

[Bakual]

Do you want to do a PR for it?

[richard67]

I never did a PR before, am new with GitHub

[Bakual]

If you want to try: http://docs.joomla.org/Using_the_Github_UI_to_Make_Pull_Requests

Just make sure you select the 3.3-dev branch.
Otherwise I can do it.

[richard67]

hi,

better you do it.

is faster maybe, because 3.3 fianl release might be coming soon.

Thanks

Richard

Am 26.04.2014 21:38, schrieb Thomas Hunziker:

If you want to try: http://docs.joomla.org/Using_the_Github_UI_to_Make_Pull_Requests

Just make sure you select the 3.3-dev branch.
Otherwise I can do it.

---

Reply to this email directly or view it on GitHub:
#3508 (comment)

[Bakual]

See PR #3511

[richard67]

Thanks. I have meanwhile tested with success that W3C validator validates Ok with section element.

[nternetinspired]

Hey guys :)

I don't think section is the correct element to use here, div would be the best option IMO. Generally speaking, if it doesn't have a heading element within it then section should not be used.

More info here: http://html5doctor.com/the-section-element/

BTW, the included html5 shim ensure that the section element is recognised by IE8. Both section and div are block-level elements, so there will be no differences in styling on that account.

[Bakual]

I wasn't aware that <section> is a block element as well. I've changed to <div> now.

[richard67]

Well, with a div I am happy ;-)

[Bakual]

PR is already changed ;)

[richard67]

One gerneral thing not related to this issue I do not understand yet: when to work with GitHub and when on joomlacode.org. Looks like 2 different worlds for me, and so seems to be complicated. Is the first for new and the second for old Joomla releases? Maybe you can give me a brief hint, in 1 sentence, so I might contribute a bit in future.

[Bakual]

Good question :)

• JC is the old and current tracker. All patches however are expected to be done as PRs on GitHub.
• GitHub/JIssues (issues.joomla.org) is the new tracker. It's in beta phase.

So currently we are in a "between" phase where both are used. The goal is to get away from the JC tracker as soon as possible.

[richard67]

Ah, I see. Now it is clear to me. Thanks for your explanation. I'll make myself familiar with PRs sooner or later ;-)

[richard67]

This tracker itam can be closed since the issue has meanwhile been handled with this PR: #3511
You may blame the J!Tracker Application for transmitting this comment.