ハイパーリンクを表すには?
aタグの書式
aタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
aタグの属性一覧
属性 | 内容 |
グローバル属性 | ※グローバル属性のページを参照してください。 |
href | リンク先のURLを指定します。 この属性を指定しない場合、<a>はプレースホルダー(将来ハイパーリンクを設定する予定であること)を表します。 |
target | リンク先を表示するウィンドウを指定します。 指定できる値は次の通りです。 ウィンドウ名:指定のウィンドウ 「_blank」:新規の別ウィンドウ 「_self」:リンク元と同じウィンドウ 「_parent」:親ウィンドウ 「_top」:最上位のウィンドウ |
rel | 現在の文書とリンク先の関係を指定します。 次のキーワードを指定します。 「alternate」:代替文書 「archive」:アーカイブ 「author」:著者 「bookmark」:パーマリンク 「bookmark」:パーマリンク 「external」:外部ドキュメント 「external」:外部ドキュメント 「help」:ヘルプ 「license」:著作権 「nofollow」:無保証 「noreferrer」:リファラー禁止 「search」:検索 「sidebar」:サイドバー 「tag」:タグ 「index」:目次 「first」:初回 「last」:最終回 「prev」:前回 「next」:次回 「up」:上の階層 |
media | リンク先のメディアタイプを指定します。 「screen」(PC等の高解像度画面)、「handheld」(携帯電話等の低解像度画面)、「all」(全デバイス)などを指定します。 |
hreflang | リンク先の言語を指定します。 |
type | リンク先のMIMEタイプを指定します。 |
aタグの解説
<a>は、ハイパーリンク(単にリンクとも言います)を表すための要素です。
「href」属性を指定することで、リンク先を設定することができます。
なお、「name」「coords」「shape」「urn」「charset」「methods」「rev」の各属性は廃止されました。
aタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<header>
<h1>石油</h1>
<nav>
<ul>
<li><a href="#summary">概要</a></li>
<li><a href="#ingredient">成分</a></li>
<li><a>分布地図</a></li>
</ul>
</nav>
</header>
<section id="summary">
<h2>概要</h2>
<p>石油は重要な資源のひとつです。
石油を精製することで、次のようなものを作ることができます。</p>
<ul>
<li>天然ガス</li>
<li>ナフサ</li>
<li>灯油</li>
<li>軽油</li>
<li>重油</li>
<li>石油エーテル</li>
<li>軽ガソリン</li>
<li>重ガソリン</li>
<li>軽ケロシン</li>
<li>ケロシン</li>
<li>ガス油</li>
<li>潤滑油</li>
<li>タール</li>
<li>アスファルト</li>
</ul>
</section>
<section id="ingredient">
<h2>成分</h2>
<p>石油は主に炭化水素で構成さていますが、
次のようなものも含まれています。</p>
<ul>
<li>硫黄化合物</li>
<li>窒素化合物</li>
<li>金属類</li>
</ul>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
aタグのサンプル画面1
aタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<article>
<header>
<h1>C言語</h1>
</header>
<p>C言語は、数あるプログラミング言語の中でも、とても普及率が高い言語です。
しかし、プログラミング言語を学ぶには困難も多く、誰でも容易に習得できるというものではありません。
特に言語仕様の理解に苦労する人が多いでしょう。このページでは、そんな初心者の方の助けになるようなサイトを紹介しています。</p>
<p>次はC言語やプログラミングの基礎を紹介するサイトです。</p>
<footer>
<p><a href="http://test/pg/c" target="_blank" rel="chapter" media="all" hreflang="ja" type="text/html">
C言語で学ぶプログラミング</a></p>
</footer>
</article>
</body>
</html>
aタグのサンプル画面2
aタグの関連項目