Where to put *Footnote Text...Bottom of page or section?

Question

I have a fairly long page that leads off with a bold statistic in the hero section of the page. That statistic has an * that needs to be cited where that statistic came from. Should the footnote portion of that come in the same section or at the bottom of the page? Shown below.

Answer 1

There's a third option: a footnote popup.

The physical location of a footnote is in relation to a printed page, in interactive texts, the footnote popup makes much more sense:

• The information is in the exact place where the footnote is
• You avoid having to look for a special place to put the information and help the reader not to browse looking for it

Image from pagetoscreen.net

Footnotes popup Codepen example

Answer 2

The bottom of the page.

Why?

• Stick with learned behavior. That's where readers are used to seeing footnotes.
• Users could miss them. If you put the footnotes below the section the text appears in, your users will not know exactly where to look per section.
• Potential Inconsistency. You'd also be setting a precedent to find footnotes throughout the page/site the same way and if you're not designing the entire site, there would be inconsistency.
• Easy to implement. If you have a dev team that can do a pop-up like the suggestion below, go for it! Otherwise, footnotes at the bottom would be your next best options.