HTML で脚注へのリンクを作成するにはどうすればよいですか?

https://stackoverflow.com/questions/66964

html
syntax

09-06-2019
|

質問

例えば：

これが私のコンテンツの本体です。この行の脚注リンクがあります[1]。その後、もう少しコンテンツがあります。その一部は興味深いものであり、脚注もいくつかあります[2]。

[1] これが私の最初の脚注です。

[2] 別の脚注。

したがって、「[1]」リンクをクリックすると、Web ページが最初の脚注参照に誘導されます。これを HTML で正確に実現するにはどうすればよいでしょうか?

解決

コンテナにIDを与えて使用します # その ID を参照します。

例えば

<p>This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.</p>

<p id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>

他のヒント

脚注から参照先へのリンクを提供することをお勧めします (1 対 1 の関係があると仮定して)。これは、「戻る」ボタンを押すとユーザーが以前のスクロール位置に戻り、読者がテキスト内で自分の位置を見つけることができるため便利です。テキスト内の脚注が参照されている場所に戻るリンクをクリックすると、そのテキストがウィンドウの上部に表示されるため、読者は中断したところから簡単に再開できます。

Quirksmode には次のページがありますウェブ上の脚注 (ただし、使用することをお勧めします補足脚注の代わりに脚注のほうがいいと思います アクセス可能な, 、脚注へのリンクと、脚注の後に本文へのリンクが続くものを使用すると、より簡単にたどることができると思います。 スクリーンリーダー).

quirksmode ページからのリンクの 1 つは、脚注のテキストの後に矢印 ↩ を付けて、エンティティ ↩ を使用することを提案しています。このために。

例えば。：

This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2">[2]</a>.

<p id="footnote-1">
   1. Here is my first footnote. <a href="#footnote-1-ref">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote. <a href="#footnote-2-ref">&#8617;</a>
</p>

ただし、スクリーンリーダーがエンティティをどのように処理するかはわかりません。Grubber の投稿のコメントからのリンクは次のとおりです。脚注のアクセシビリティに関する Bob Eastern の投稿これは読まれていないことを示唆していますが、それは何年も前のことであり、スクリーンリーダーが今では改善されていることを願っています。アクセシビリティを高めるために、「テキストに戻る」などのテキストアンカーを使用するか、リンクのタイトル属性にテキストアンカーを入れるとよいでしょう。スクリーンリーダーがそれをどのように処理するかはわかりませんが、元の脚注に 1 つ追加する価値があるかもしれません。

This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1" title="link to footnote">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2" title="link to footnote">[2]</a>.

<p id="footnote-1">
   1. Here is my first footnote.
      <a href="#footnote-1-ref" title="return to text">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote.
      <a href="#footnote-2-ref" title="return to text">&#8617;</a>
</p>

(ここでのアクセシビリティの問題については推測にすぎませんが、これまでに言及したどの記事でも取り上げられていなかったので、取り上げる価値があると思いました。この問題に関してもっと権威のある人がいたら、ぜひ聞きたいです。)

まず、各脚注の前に name 属性を持つアンカータグを挿入します。

 <a name="footnote1">Footnote 1</a>
 <div>blah blah about stuff</div>

このアンカータグはリンクにはなりません。それはページの名前付きセクションだけになります。次に、脚注マーカーをその名前付きセクションを参照するタグにします。ページの名前付きセクションを参照するには、# 記号を使用します。

 <p>So you can see that the candidate lied 
 <a href="#footnote1">[1]</a> 
 in his opening address</p>

別のページからそのセクションにリンクしたい場合は、それも可能です。ページにリンクしてセクション名を貼り付けるだけです。

 <p>For more on that, see 
 <a href="mypaper.html#footnote1">footnote 1 from my paper</a>
 , and you will be amazed.</p>

すべての脚注にアンカータグを設定する必要があります。次のような接頭辞を付けると、次のようになります。
< a name="脚注-1">[ 1 ]</a>

次に、ページの本文で、次のように脚注にリンクします。
< a href="#FOOTNOTE-1">[ 1 ]</a>
(使用法に注意してください名前対 href 属性)

基本的に、A タグの名前を設定すると、#NAME-USED-IN-TAG にリンクすることでそのタグにアクセスできるようになります。

http://www.w3schools.com/HTML/html_links.asp には詳しい情報があります。

あなたの場合、おそらく、リンクとフッターにそれぞれ a-href タグと a-name タグを使用してこれを行うのが最善です。

DOM 要素までスクロールする一般的なケースでは、 jQueryプラグイン. 。ただし、パフォーマンスが問題になる場合は、手動で行うことをお勧めします。これには次の 2 つの手順が含まれます。

スクロールしている要素の位置を検索します。
その位置までスクロールします。

癖モード前者の背後にあるメカニズムをよく説明しています。私の好みの解決策は次のとおりです。

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

null から 0 へのキャストを使用しています。これは一部のサークルでは適切なエチケットではありませんが、私はそれが好きです :) 2 番目の部分では、 window.scroll. 。したがって、残りの解決策は次のようになります。

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

出来上がり！

Peter Boughton の答えは良いですが、脚注を "p" (段落) として宣言する代わりに、"ol" (順序付きリスト) 内で "li" (リスト項目) として宣言した方が良いかもしれません。

This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.

<h2>References</h2>
<ol>
    <li id="footnote-1">Here is my first footnote.</li>
    <li id="footnote-2">Another footnote.</li>
</ol>

こうすることで、上下に数字を書く必要がなくなります。参考文献が以下の正しい順序でリストされている限り。

名前付きアンカーを使用したアンカータグ

http://www.w3schools.com/HTML/html_links.asp

アンカータグでブックマークを使用する...

    This is main body of my content. I have a footnote link for this 
line <a href="#foot1">[1]</a>. Then, I have some more content. 
Some of it is interesting and it has some footnotes as well 
<a href="#foot2">[2]</a>.

<div>
<a name="foot1">[1]</a> Here is my first footnote.
</div>

<div>
<a name="foot2">[2]</a> Another footnote.
</div>

これが私のコンテンツの本体です。この行には脚注リンクがあります [1]。それから、もう少し内容があります。興味深いものもあり、脚注もいくつかあります [2]。

[1] これが私の最初の脚注です。

[2] 別の脚注。

< a href=#tag> テキスト < /a> を実行します

そして脚注では次のようになります。< a name="タグ"> テキスト </a>

すべてスペースなし。参照： http://www.w3schools.com/HTML/html_links.asp

ブラブラ

脚注に<a href="#1">移動</a>してください。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow