HTMLでアンカータグを使う方法【初心者向け】
HTML初心者向けに、【アンカータグ】を使う方法を解説した記事です。リンクを張る際に使用します。href属性を使ったURLの指定、id属性の指定も説明。サンプルコードがあるので、実践的に使うことができます。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。
今回は、HTMLのアンカータグについて解説します。
そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

今回は、HTMLに関する内容だね!

どういう内容でしょうか?

アンカータグを使う方法について詳しく説明していくね!

お願いします!
アンカータグと属性
Web上では、クリックすれば簡単に、自分の得たい情報にアクセスすることができます。今回はリンクの張り方について学んでみましょう。
リンクを張るには、アンカー<a>タグを使います。
・アンカータグ anchor <a>〜</a>
Webページにリンクを張り、そのページとリンク先のページを繋ぎます。
・href属性 Hypertext Reference
リンクの飛び先がどこであるのかを伝えます。
・id属性
要素にID名をつけて、特定部分を識別します。
<a>タグのanchorとは「錨」また「しっかり固定する」という意味です。錨をおろして船がその場に留まることができるように、<a>タグはHTML上においてリンクの出発点と到達点を結ぶ役割を持ちます。
属性は、要素に細かい情報を付け加えます。ここでは<a>タグにhref属性を組み合わせることでリンクを張ることができます。また、id属性を組み合わせることで、文書内の別の場所に移動することも可能です。

aタグで色んなサイトにリンクを張ることが出来るんですね♪

そうだね。自分のサイト内の別のページへもリンクを張れるよ。

id属性って特定部分を指定するって何ですか?

ページが長い時に、クリックで特定の箇所に素早く移動させることが出来るんだよ。今から説明するね。
アンカータグの使い方
基礎がわかったら、実際に使ってみましょう。
タグに属性をつけ加えるときには半角スペースを使います。
<a (半角スペース)href=”好きなサイトのURL”>サイトの名前</a>
実際のURLで書いてみます。
<a href=”http://techacademy.jp/”>テックアカデミー</a>
ブラウザで表示させるとこのようになりました。
ここで、ページのリンクをクリックしてみましょう。
href属性で指定したURLにアクセスできましたね。
また、id属性を使うと、同一ページ内の指定した部分にリンクすることができます。
今回の例では、<p>タグとid属性で、「index」というID名をつけたリンクの飛び先をつくります。
先ほどのhref属性を「#index」に変えます。このとき、indexの先頭に#をつけることで「index」というIDのついた箇所を指定することができます。
ブラウザで表示させるとこのようなります。
「テックアカデミー」をクリックすると、id属性で指定したリンク先(index)へ飛びました。
このように、href属性やid属性で指定した位置情報をハイパーリンクと呼びますが、そのハイパーリンク同士で繋がれた文書のことをハイパーテキストといいます。
HTMLとは HyperText Markup Language の略ですが、その意味は、情報をつなぎ合わせる機能を持った文書(ハイパーテキスト)をつくる言語です。Web上で文書や画像を表示させるだけでなく、ハイパーリンクによって様々な情報をつなぎ合わせる機能を持つ点が、HTMLの大きな特徴といえます。
この、次から次へと移動しながら得たい情報を自由に得られるハイパーリンクの機能により、インターネットはまたたく間に世界中に広がっていきました。あなたもWeb上で思いがけない情報や、人、ものとの出会いがあったのではないでしょうか。
<a>タグは世界中の情報をハイパーリンクでつなぎあわせる重要なタグです。ぜひ覚えておきましょう。
今回はHTMLでアンカータグを使う方法をご紹介しました。
さらにHTMLを学びたい場合は、HTMLで定義リストを使う方法も合わせてご覧ください。

techacademy.jpにリンクを張ることが出来ました!でも、今見ていたタブ?ページが上書きされちゃった。

新しいタブ、新しいウィンドウで表示する場合はtarget属性に_blankを指定してあげるんだ。

今度は、新しいタブに表示されました♪

自分のサイトではない場合は、target属性で_blankを指定してあげたほうがいいね。
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。