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

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 (半角スペース)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では初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。