HTMLのaタグをゼロからわかるように解説していきます。

目次
  1. aタグとは
  2. 新しいタブで開きたい場合
  3. noindex又はnofollowを付けたい場合
  4. ページ内リンク(目次)の作り方
この記事の目的

ブログサービスやWordPressなどのCMSを使って構築しているブログやWEBメディアの記事やページを作成する際に必要なhtmlの知識を身に着ける。

aタグとは

リンクを張るときに使用するタグで、以下のようなコードを記述することでリンクを表示することができます。

<a href="URL">表示する文字</a>

例

<a href="https://webmedia-koekijo.net">WEBメディア交易所</a>

WEBメディア交易所

新しいタブで開きたい場合

追加するコード

target=”_blank

<a href="https://webmedia-koekijo.net" target="_blank">WEBメディア交易所</a>

↓例

WEBメディア交易所

noindex又はnofollowを付けたい場合

それぞれ以下のコードを加えればOKです。

noindex

追加するコード

rel=”noindex”

<a href="○○.○○" rel="noindex">○○</a>

nofollow

追加するコード

rel=”nofollow”

<a href="○○.○○" rel="nofollow">○○</a>

ページ内リンク(目次)の作り方

記事の目次などに使う同じページ内へのリンクの書き方を解説します。

飛び先の指定方法

はじめにリンクを押して遷移する場所を指定します。見出しタグ(hタグ)を以下のように変えればOKです。

<h2 id="ここに目印となるお好きな文字列(半角英数字)を指定してください">

例

<h2 id="m1"></h2>

リンクを貼る

リンクは以下のように張ります。

<a href="#設定した文字列を入れる"></a>
  • ハッシュ(#)を忘れないように注意してください。
  • ドメインやディレクトリ部分の記述は不要です。

例

<a href="#m1"></a>

注意:別ページの任意の部分にリンクを貼る場合

別ページの任意の部分にリンクを貼る場合は以下のように記述してください。

<a href="http://○○.com/○○/#○○"></a>