Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Footnotes markup does not pass HTML5 validation #536

Closed
louh opened this issue Dec 27, 2015 · 4 comments · Fixed by vdesabou/alfred-spotify-mini-player#480 or majacQ/circleci-docs#4 · May be fixed by juslee/java-buildpack#4, tyrchen/clojure-system-book#2 or figure0/docs-travis-ci-com#3
Closed

Footnotes markup does not pass HTML5 validation #536

louh opened this issue Dec 27, 2015 · 4 comments · Fixed by vdesabou/alfred-spotify-mini-player#480 or majacQ/circleci-docs#4 · May be fixed by juslee/java-buildpack#4, tyrchen/clojure-system-book#2 or figure0/docs-travis-ci-com#3

Comments

@louh
Copy link

louh commented Dec 27, 2015

The footnotes markup, as generated from html.c, will not pass HTML5 validation because of the following reasons:

Take this sample output from Redcarpet:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Redcarpet footnotes markup example.</title>
</head>
<body>

<p>Reference 1<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup></p>

<p>Reference 2<sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup></p>

<div class="footnotes">
<hr>
<ol>

<li id="fn1">
<p>Footnote 1&nbsp;<a href="#fnref1" rev="footnote">&#8617;</a></p>
</li>

<li id="fn2">
<p>Footnote 2&nbsp;<a href="#fnref2" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>

</body>
</html>

When I run it through the (X)HTML5 Nu Validator service, I get the following errors:

    Error: Bad value footnote for attribute rel on element a: The string footnote is not a registered keyword.

    From line 9, column 32; to line 9, column 61

    ="fnref1"><a href="#fn1" rel="footnote">1</a><

    Syntax of list of link-type keywords:
        A whitespace-separated list of link types, with no duplicate keywords in the list. Each link type must be listed as allowed on <a> and <area> in the HTML specification, or must be listed as allowed on <a> and <area> on the Microformats wiki, or must be an absolute URL. You can register link types on the Microformats wiki yourself. 

    Error: Bad value footnote for attribute rel on element a: The string footnote is not a registered keyword.

    From line 11, column 32; to line 11, column 61

    ="fnref2"><a href="#fn2" rel="footnote">2</a><

    Syntax of list of link-type keywords:
        A whitespace-separated list of link types, with no duplicate keywords in the list. Each link type must be listed as allowed on <a> and <area> in the HTML specification, or must be listed as allowed on <a> and <area> on the Microformats wiki, or must be an absolute URL. You can register link types on the Microformats wiki yourself. 

    Error: The rev attribute on the a element is obsolete. Use the rel attribute instead, with a term having the opposite meaning.

    From line 18, column 20; to line 18, column 52

    te 1&nbsp;<a href="#fnref1" rev="footnote">&#8617

    Error: The rev attribute on the a element is obsolete. Use the rel attribute instead, with a term having the opposite meaning.

    From line 22, column 20; to line 22, column 52

    te 2&nbsp;<a href="#fnref2" rev="footnote">&#8617

The W3C Recommendation for Footnotes is simply to have the anchor links, without any rel attribute.

I understand that removing this might possibly break functionality for people who are using the rel and rev attributes for CSS selectors, so I wanted to raise this for discussion. Perhaps using class names (as with the <div class='footnotes'> already generated in Redcarpet output), is more appropriate.
@natelandau
Copy link

Is there an easy way to override this behavior on a one-off basis to allow validation support before some fix is adopted in the project as a whole? Google just released their AMP pages which will not validate the 'rev' attribute on links.

@elomatreb
Copy link

elomatreb commented Aug 7, 2016 •
edited

This is fixable by overriding the footnote_ref method in a custom renderer class.

class CustomHTML < Redcarpet::Render::HTML
  def footnote_ref(number)
    "<sup class='footnote-ref' id='fnref#{number}'><a href='#fn#{number}'>#{number}</a></sup>"
  end
end

I would also like to say that I'd like to see this fixed. I don't think it should be necessary to create a custom renderer to get valid HTML.

@larryhynes
Copy link

I just ran into this, getting failed validation due to rel=footnote. This issue doesn't seem to have been addressed in any commits, so I'm wondering is there a plan to remove rel=footnote, or what's the advised 'way forward'?

@robin850
Copy link
Collaborator

Hi everyone,

Sorry it's been so long to address such a small issue but this is now solved and will be available in the next version of Redcarpet.

Thank you very much ! ❤️

@jturner314 jturner314 mentioned this issue Mar 2, 2017
Closed
@Kristinita Kristinita mentioned this issue Dec 21, 2018
Closed
This was referenced Mar 11, 2021
Merged
Closed
Closed
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Merged
Open
@dependabot dependabot bot mentioned this issue Mar 18, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
5 participants
@robin850 @larryhynes @louh @elomatreb @natelandau