この記事には、内部リンクに関するガイドが記載されています。
HTML内部リンクとは何ですか?
HTML 内部リンクは、ユーザーが Web ページのさまざまなセクション間を移動できるようにするために作成されるハイパーリンクです。ユーザーが内部リンクを操作すると、ブラウザーは Web ページの指定されたセクションに画面を移動します。特に単一ページの Web サイトやブログがある場合に、ユーザーをナビゲートするのに役立ちます。
内部リンクを理解するための簡単な例を見てみましょう。
例: 内部リンクをナビゲーターとして使用する
内部リンクの動作を理解するには、ナビゲーション ボタンを利用できます。たとえば、このデモでは 2 つのナビゲーション ボタンとダミー コンテンツが作成されています。
< ディビジョン >
< h2 ID = 「パートワン」 > パート 1 < / h2 >
< p > 最初のパートのコンテンツへようこそ。 < / p >
< h2 ID = 'パート2' > パート2 < / h2 >
< p > 素晴らしい！コンテンツの後半に到達しました < / p >
< / ディビジョン >
上記のコード スニペットでは次のようになります。
- 最初の2つ ' ” タグは、Web ページの 2 つの見出し/セクションを作成するために使用されます。これらは ' h2 ” 要素は、” の値を保持します。 パート 1 ' と ' パート2 」に割り当てられている ID 」属性をそれぞれ設定します。
- 次に、「 ” タグは、それぞれのコンテンツを保持するために利用されます。 ' 鬼ごっこ。
現在、内部リンクに関してナビゲーション ボタンが使用されています。これらのボタンは、次のコード行を使用して作成されます。
< ウル >< それか > < ある href = 「#パートワン」 >パート 1< / ある > < / それか >
< それか > < ある href = '＃パート2' >パート 2< / ある > < / それか >
< / ウル >
上記のコード スニペットでは次のようになります。
- まず、「
- 次にアンカー「 ”タグを利用し、各”にダミーデータを付与します。 <それ> ' 鬼ごっこ。
- その後、「」の値を設定します。 href 「両方の属性」 ” にタグを付けます パート 1 ' と ' パート2 」ID。この課題「」 ID ” 値は内部リンクを作成します。
上記のコード ブロックを実行すると、Web ページは次のように動作します。
上の gif は、Web ページ上の内部リンクの動作を示しています。
結論
HTML 内部リンクは、ユーザーが Web ページのさまざまなセクション間を移動できるようにするために作成されるハイパーリンクです。内部リンクを作成するには、親 HTML 要素の ID を渡します。そして、この ID を「」の値として指定します。 href 「HTMLアンカーによって提供される属性」 ' エレメント。これ ' 」要素は、ナビゲーションバー内、またはナビゲーターとして機能する Web ページ上の任意の場所で利用できます。この記事では、HTML 内部リンクの実際的な例を示しました。