<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>
表示例
  • 上記の表示例では、セクション間にマージンが設定されています。