カスタム検索

<a>タグ

<a>タグの機能と属性
機能 アンカーを定義する
属性 HTML-4.01 コア 言語 イベント  フォーカス  charset  type  name  href  hreflang  rel  rev  shape  coords  
XHTML-1.0 コア 言語 イベント  フォーカス  charset  type  name  href  hreflang  rel  rev  shape  coords  

<a>タグは他の文書(ファイル)や、文書の任意の場所へのリンクを指定するために使用します。

charset属性

charset属性にはリンク先の文書で使用されている文字セットを指定します。値には、Shift_JISやEUC-JPなどを指定します。

type属性

type属性は対象となるファイルのMIMEタイプ(ファイルの形式)を指定します。通常のテキストファイル(プレーンテキスト)であれば、text/plainを指定します。

name属性

name属性を使用すると、<a>タグに対して任意の名前を付けることができます。ただし、同様の属性にid属性があり、このid属性は他の多くのタグで使用することができるので、name属性ではなく、id属性を使用したほうが良いでしょう。

href属性

href属性には対象となるファイルへのパスを記述します。相対パスでも絶対パスでも構いません。文書の任意の場所にリンクを指定するには、パスの最後に「#」とリンク先で指定されている名前(id属性で指定されている値)を記述します。

hreflang属性

hreflang属性はhref属性が指定されている場合にのみ使用します。リンク先のファイルで使用されている言語を指定し、日本語であれば、jpを指定します。

rel属性、rev属性

rel属性とrev属性は対象となるファイルとの関係を指定します。rel属性は対象となるファイルへの関係で、rev属性は対象となるファイルからの関係を指定します。値としてよく使用されるものに、next(次へ)、prev(前へ)があります。

shape属性、coords属性

shape属性とcoords属性は、<area>タグのshape属性、coords属性と同様に、<a>タグで定義される要素の領域を指定するもののようです。ただし、ほとんどのブラウザではサポートされていないようです。

他のWebページにリンクする際の使用例

他のWebページにリンクするには、href属性の値にリンク先のパスを記述します。パスは絶対パスでも相対パスでも構いません。次の例ではこのサイトのトップページにリンクしています。

a.html
<html>
    <head>
        <title>&lt;a&gt;タグの例</title>
    </head>
    <body>
        <h1>他のWebページにリンク</h1>
        <p><a href="http://w-d-l.net/">W-D-L.NET</a>にリンク
        </p>
    </body>
</html>

ページ内の任意の場所にリンクする際の使用例

ページ内において、任意の場所にリンクする際の例です。リンクしたい箇所(ここでは<h2>タグ)にid属性を記述し、リンクの参照先として使用しています。

a2.html
<html>
    <head>
        <title>&lt;a&gt;タグの例</title>
    </head>
    <body>
        <h1>文書の任意の場所にリンク</h1>
        <ol>
            <li><a href="#part1">part1</a>にリンク</li>
            <li><a href="#part2">part2</a>にリンク</li>
            <li><a href="#part3">part3</a>にリンク</li>
            <li><a href="#part4">part4</a>にリンク</li>
            <li><a href="#part5">part5</a>にリンク</li>
        </ol>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <h2 id="part1">part1</h2>
        <p>part1
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <h2 id="part2">part2</h2>
        <p>part2
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <h2 id="part3">part3</h2>
        <p>part3
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <h2 id="part4">part4</h2>
        <p>part4
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <h2 id="part5">part5</h2>
        <p>part5
        </p>
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
        <br /><!--ダミーの余白-->
    </body>
</html>

hrefの値にはパスも含めることができ、次のように指定すれば、異なるページの任意の箇所にリンクすることもできます。

<a href="http://w-d-l.net/#part5">トップページのpart5</a>
CopyLeft 2018 Webデザインレッスン プライバシーポリシー サイト管理者に連絡