<a href="#"></a>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ(href属性がある場合に限る) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 トランスペアレント(親要素のコンテンツモデルを継承) ただし、インタラクティブ・コンテンツa要素、およびtabindex属性が指定された要素は含められない

ページ内リンクを作成したい場合は、a要素id属性を使って以下のように設定します。


リンク元(出発点)
<a href="#abc">ABCの位置へジャンプ</a>

リンク先(到達点)
<h2 id="abc">ここがABCの位置</h2>

属性
任意属性
href="" リンク先の指定 #ID名 リンク先のID名
グローバル属性
id="" 要素のID名 文字列 固有の識別名

リンク先(到達点)の設定

まず、リンクの到達点となる任意の要素に、ID(識別名)を付けておきます。

次の例では、h2要素に abc というID名を指定しています。

<h2 id="abc">ここがABCの位置</h2>

リンク元(出発点)の設定

リンク元の href="" には、到達点のID名をハッシュ( # )に続けて記述します。

同じ文書内にリンクする場合は次のように指定します。

<a href="#abc">ABCの位置へジャンプ</a>

別文書の特定部分へリンクする場合は、ファイル名の後にハッシュ( # )を入れ、続いて到達点のID名を記述します。

<a href="example.html#abc">ABCの位置へジャンプ</a>

使用例

同じ文書内にリンクした例

<article>

<header>
<h2>記事のタイトル</h2>
<nav id="menu_test">
<ul>
<li><a href="#section1">セクション1</a></li>
<li><a href="#section2">セクション2</a></li>
<li><a href="#section3">セクション3</a></li>
</ul>
</nav>
</header>

<section id="section1">
<h3>セクション1</h3>
<p>セクション1の内容</p>
</section>

<section id="section2">
<h3>セクション2</h3>
<p>セクション2の内容</p>
</section>

<section id="section3">
<h3>セクション3</h3>
<p>セクション3の内容</p>
</section>

<footer>
<p><a href="#menu_test">▲メニューに戻る</a></p>
</footer>

</article>

表示例
  • 上記の表示例では、セクション間にマージンが設定されています。