Invalid HTML #282

Closed
opened 2018-05-13 12:03:09 +00:00 by reinhard · 10 comments
Member

See for example this report.

See for example [this report](https://validator.w3.org/nu/?doc=https%3A%2F%2Ffsfe.org%2Fnews%2F2018%2Fnews-20180414-01.en.html).
reinhard added the
bug
design
build
labels 2018-05-13 12:03:09 +00:00
Member

I'll take this one. @reinhard could you assign the ticket to me?

The description is in my opinion a bit too broad. I'll do the things I find by looking at some pages. Maybe it makes more sense to specify the affected pages.

I'll take this one. @reinhard could you assign the ticket to me? The description is in my opinion a bit too broad. I'll do the things I find by looking at some pages. Maybe it makes more sense to specify the affected pages.
Author
Member

I can't assign the ticket to you, you don't appear in the list of potential assigniees. I have no idea why :-/

I can't assign the ticket to you, you don't appear in the list of potential assigniees. I have no idea why :-/
mweimann was assigned by max.mehl 2018-07-11 09:55:38 +00:00
Owner

Now it worked. I had to add you to a team with write access to this repo, no idea why...

Now it worked. I had to add you to a team with write access to this repo, no idea why...
mweimann started working 2018-07-11 19:55:27 +00:00
mweimann stopped working 2018-07-11 22:16:17 +00:00
2h 20min 50s
Owner

It seems we are better now. The only error is the newsteaser attribute in <p>: report

It seems we are better now. The only error is the newsteaser attribute in `<p>`: [report](https://validator.w3.org/nu/?doc=https%3A%2F%2Ffsfe.org%2Fnews%2F2019%2Fnews-20190515-01.en.html)
max.mehl added this to the Hackathon1905 milestone 2019-05-22 10:18:23 +00:00
ao self-assigned this 2019-05-25 09:20:15 +00:00
mweimann was unassigned by ao 2019-05-25 09:20:16 +00:00
ao added the
wait/inprogress
label 2019-05-25 10:30:20 +00:00
Member

The missing "alt" text about the image can be fixed easy.

On the other hand, the "newsteaser" attribute to the "p" element is not accepted as valid HTML. The "newsteaser" element is being used on a lot of pages. A list of accepted attributes of "p": https://html.spec.whatwg.org/multipage/dom.html#global-attributes. The decision to use a "semantic" tag into news pages has its advantages but has been implemented in a non-valid way.

It looks like the suitable way to semantically define the summary of a news article and enable it for syndication is the element "article". In the current use case I would suggest to wrap "h1" and the newsteaser into an "article".

<article class="newsteaser">
  <h1>News item title</h1>
  <p>The first paragraph, which is the news teaser</p>
</article>

and do that every time. Is Web Team OK with this?

Used sources:
https://internetingishard.com/html-and-css/semantic-html/ -
https://bitsofco.de/sectioning-content-in-html5/

The missing "alt" text about the image can be fixed easy. On the other hand, the "newsteaser" attribute to the "p" element is not accepted as valid HTML. The "newsteaser" element is being used on a lot of pages. A list of accepted attributes of "p": https://html.spec.whatwg.org/multipage/dom.html#global-attributes. The decision to use a "semantic" tag into news pages has its advantages but has been implemented in a non-valid way. It looks like the suitable way to semantically define the summary of a news article and enable it for syndication is the element "article". In the current use case I would suggest to wrap "h1" and the newsteaser into an "article". ``` <article class="newsteaser"> <h1>News item title</h1> <p>The first paragraph, which is the news teaser</p> </article> ``` and do that every time. Is Web Team OK with this? Used sources: https://internetingishard.com/html-and-css/semantic-html/ - https://bitsofco.de/sectioning-content-in-html5/
Author
Member

I don't think that the use of the <article> tag for this would be semantically correct.

Why not just change <p newsteaser="yes"> into <p class="newsteaser">?

Please note that it must also be changed in fsfe.less and in news/xhtml2xml.xsl.

I don't think that the use of the `<article>` tag for this would be semantically correct. Why not just change `<p newsteaser="yes">` into `<p class="newsteaser">`? Please note that it must also be changed in fsfe.less and in news/xhtml2xml.xsl.
Member
Additional source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
Author
Member

I still think that <article> is not the right tag for this. While it is true that the heading together with the newsteaser paragraph is used for syndication on other resources (like the frontpage or the news archive), on the news article page itself the semantic meaning of the <article> applies to the whole news article.

I still think that `<article>` is not the right tag for this. While it is true that the heading together with the newsteaser paragraph is used for syndication on other resources (like the frontpage or the news archive), on the news article page itself the semantic meaning of the `<article>` applies to the *whole* news article.
Member

See PR #1097 for a solution of the newsteaser attribute test

See PR #1097 for a solution of the `newsteaser` attribute test
Author
Member

Looks like the errors caused by the general page structure are now fixed, let's now also fix the warnings.

Looks like the errors caused by the general page structure are now fixed, let's now also fix the warnings.
Sign in to join this conversation.
No Milestone
No Assignees
4 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: FSFE/fsfe-website#282
No description provided.