HTMLでアンカータグを使う方法【初心者向け】

HTML初心者向けに、【アンカータグ】を使う方法を解説した記事です。リンクを張る際に使用します。href属性を使ったURLの指定、id属性の指定も説明。サンプルコードがあるので、実践的に使うことができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLのアンカータグについて解説します。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプの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>

a_tag

ブラウザで表示させるとこのようになりました。

 

ここで、ページのリンクをクリックしてみましょう。

a_tag2

href属性で指定したURLにアクセスできましたね。

 

また、id属性を使うと、同一ページ内の指定した部分にリンクすることができます。

今回の例では、<p>タグとid属性で、「index」というID名をつけたリンクの飛び先をつくります。

先ほどのhref属性を「#index」に変えます。このとき、indexの先頭に#をつけることで「index」というIDのついた箇所を指定することができます。

anchortag_id

 

ブラウザで表示させるとこのようなります。

「テックアカデミー」をクリックすると、id属性で指定したリンク先(index)へ飛びました。

anchortag_id2

 

このように、href属性やid属性で指定した位置情報をハイパーリンクと呼びますが、そのハイパーリンク同士で繋がれた文書のことをハイパーテキストといいます。

HTMLとは HyperText Markup Language の略ですが、その意味は、情報をつなぎ合わせる機能を持った文書(ハイパーテキスト)をつくる言語です。Web上で文書や画像を表示させるだけでなく、ハイパーリンクによって様々な情報をつなぎ合わせる機能を持つ点が、HTMLの大きな特徴といえます。

この、次から次へと移動しながら得たい情報を自由に得られるハイパーリンクの機能により、インターネットはまたたく間に世界中に広がっていきました。あなたもWeb上で思いがけない情報や、人、ものとの出会いがあったのではないでしょうか。

<a>タグは世界中の情報をハイパーリンクでつなぎあわせる重要なタグです。ぜひ覚えておきましょう。

 

今回はHTMLでアンカータグを使う方法をご紹介しました。

さらにHTMLを学びたい場合は、HTMLで定義リストを使う方法も合わせてご覧ください。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

自分のサイトではない場合は、target属性で_blankを指定してあげたほうがいいね。

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。