今回はHTMLで使用されるaタグについて説明しようと思います。

aタグというのはホームページ内にURLやファイルパス等のハイパーリンクを追加するために使用されるタグです。

書式を下記に示します。

<a href="URLやパスを記述">適当な文言や画像</a>

hrefというのはaタグの「属性」と呼ばれるもので、aタグにURLリンクの機能を追加するために使用します。

上記書式の"URLやパスを記述"の部分にURLリンクやファイルパスを記述することによって、ホームページへ表示される「適当な文言や画像」にハイパーリンクを追加することができます。

リンクを追加することができるのは文言だけでなく、画像に対しても追加することができます。

aタグの「属性」にどんなものが有るかを下記に示します。

◎aタグの属性

href・・・リンク先のURL指定に使用する。この属性とaタグがセットで使用されることが多い。

charset・・・リンク先の文字コードを指定する。（UTF-8等）

hreflang・・・リンク先の言語コードを指定する。（「ja」は日本語、「en」は英語）

target・・・リンク先の表示方法を指定する。例えば「_blank」と指定すると、新規タブでリンクを開く。

上記のように属性の指定によってリンクの設定を細かく変更することができます。

実際にhref属性を使用してみると、下記のようなタグ内容であれば「ここをクリック」という文字にミラクルソリューションのホームページリンクを追加することができます。

<a href="https://www.miracle-solution.com/">ここをクリック</a>

また、画像にURLを記述したい場合は下記のように記述すれば画像にミラクルソリューションのホームページリンクを追加することが可能です。

<a href="https://www.miracle-solution.com/"><img src="画像のリンク"></a>

新規タブでリンクを開きたい場合は下記のように「target」属性を追記すれば設定できます。

<a href="https://www.miracle-solution.com/" target="_blank"><img src="画像のリンク"></a>

今回はホームページへハイパーリンクを追加するaタグについて、説明させていただきました。

参考資料

・ハイパーリンクを作ってみよう | HTML5入門編 - ウェブプログラミングポータル (wp-p.info)

・aタグとは｜役立つ6つの使い方と「SEO」に効果的な記述を解説！ (lucy.ne.jp)