<a> (Anchor:アンカー)
意味 | ハイパーリンクを設定して、特定のURIに内容を関連付けます。リンク先のパス指定は「href属性」を使用します。 |
---|---|
分類 | インライン要素 |
包括可能要素 | インライン要素(ただしa要素は除く) |
スタイル | a:link {color:#00f;text-decoration:under-line;} a:visited {color:#909;text-decoration:under-line;} |
使用上の注意 | a要素だけでは意味を持たないので、属性を付けてリンク先との関連を記述します。 リンク先へのパスは「href属性」を使います。 文書内にリンク到達点とするための名前を付けるには「name属性」や「id属性」を使います。 taget属性と使い、値を「_blank」にすることで、半強制的に別のウィンドウを開かせることができるが、閲覧者の行動を妨げる原因にもなるので、使うべきではありません。 a要素の中身だけでリンク先の説明ができなければ、title属性を使って補完します。 |
■ サンプルコードと結果
HTML
<body> <p>日本最大級の検索サイトは<a href="http:⁄⁄www.yahoo.co.jp"> Yahoo Japan!</a>です。</p> </body>

<img> (Image:画像)
意味 | 画像ファイルを読み込んで、ブラウザ上に表示させます。指定する画像ファイルは、「src属性」を使用してパスを記述します。 |
---|---|
分類 | インライン要素 |
包括可能要素 | なし |
スタイル | a:link img {border:#00f 2px solid;} a:visited img {border:#909 2px solid;} |
使用上の注意 | alt属性を使って代替テキストを記述することは必須です。 意味を持たない装飾画像は、スタイルシートの背景画像として指定するほうが良いです。 width属性、height属性をピクセル単位で指定することで、画面の表示速度が速くなります。 |
■ サンプルコードと結果
HTML
<body> <p><img src="point.gif" alt="飾り絵">文書の前に画像を付けました。</p> </body>

【リンク参照に関する要素】