Syntactic sugar in html/xhtml

Question

I'm currently writing html/xhtml by hand, and that's fine to me, but I would like to ease things a little bit, especially for writing footnotes.

Today, here is how I write footnotes:

<p>Here is a footnote<a id="ref1b" href="#ref1">[1]</a>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
  <h2>Notes</h2>
  <p id="ref1">[1] But this one isn't very helpful.
    <!-- Let's add a go-back-to-the-text arrow -->
    <a href="#ref1b">↩</a>
  </p>
</div>

The idea would be to make things automatic, and potentially done on the client side (by the browser), so that I could write something like that:

<p>Here is a footnote<ref id="1"/>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
  <h2>Notes</h2>
  <ref-def id="1">But this one isn't very helpful.</ref-def>
</div>

So ref and ref-def would simply be evaluated on the fly by the browser.

Is this possible only using html/xhtml and css?

Answer 1

the way you're doing this now has the advantage of being accessible and standards compliant - it will work with any browser - even with javascript disabled. Also search engines will be able to make sense out of this. So there are some benefits in doing it this way.

if you decided to go for a shorter alternative, then there's plenty of jQuery plugins that will make your task more comfortable. eg look at https://github.com/nicholascloud/footnote.js

If you go for that approach please also note, that your site speed will suffer as users will have to download plenty of javascript to get your footnotes working.

Answer 2

For completeness purpose. As of today there is a footnote tag in HTML.

https://www.w3.org/MarkUp/html3/footnotes.html

How it is presented to clients is left to implementors. Yo can use more html or css for a better formatting.

 <DL> <DT>Hamlet: <DD>You should not have believed me, for virtue cannot so <a href="#fn1">inoculate</a> our old stock but we shall <a href="#fn2">relish of it</a>. I loved you not. <DT>Ophelia: <DD> I was the more deceived. <DT>Hamlet: <DD>Get thee to a nunnery. Why wouldst thou be a breeder of sinners? I am myself <a href="#fn2">indifferent honest</a> ... </DL> <fn id=fn1><i>inoculate</i> - graft</fn> <fn id=fn2><i>relish of it</i> - smack of it (our old sinful nature)</fn> <fn id=fn3><i>indifferent honest</i> - moderately virtuous</fn>