気の向くままに辿るIT/ICT/IoT
HTML/XHTMLタグ・要素・属性・属性値

Aタグ・要素/アンカー・リンク

ホーム前へ次へ
Aタグ・要素とは?

Aタグ・要素

Aタグ・要素とは

 あなたは今メニューからこれ↓をクリックしてこの章に来ましたよね?

 文章をクリックして他のページに飛びたい!『Aタグ編』

 これをアンカー(リンク)といい、Aタグというのは、anchorの頭文字[a]の事です。

 このアンカーを例にとりますと

 <a href="/hp/it/internet/homepage/html/tag/body/a/">文章をクリックして他のページに飛びたい!『Aタグ編』</a>

アンカー・リンク

 そうです、アンカーは

 <a href="">任意の文章</a>

と記述します。

 一般的な使用例としてはHREF=""には、以下のようにHTMLファイル名を設定します。

 ちなみに、このhrefはhypertext referenceの略です。

 <a href="あなたの指定したファイル名.html">任意の文章</a>

 ここにもファイルパスが記述できますがこの例では同じディレクトリにあるものとします。

リンク先のファイルパス

 とすると先ほど出てきた<a href="/hp/it/internet/homepage/html/tag/body/a/">とは何を設定しているのでしょうか?

 これは、「.html」というファイル名がありませんが、htmlの世界では、このようにディレクトリが指定されファイル名が省略された場合、index.htmlを探して表示するようになっています(他にindex.htmなどもありますが、ここでは割愛します)。

 つまりディレクトリを指定してファイル名を省略する場合には、必ずそのディレクトリに「index.html」を「予め」用意しておく必要があります。

 ちなみにこのサイトですと[https://www.webzoit.net/]が省略されていますが、同じサイト(ドメイン)内であれば、ドメインを省略する事ができます。

 [https://www.webzoit.net/]を省略しないで全てのURLを書く、または、同じドメイン内で(この例では)[/hp/]から始めるパス指定を「絶対パス」、[ . ]や[ .. ]を使って省略する指定を「相対パス」(絶対パスと相対パス)と呼び、これら何れかの方法で記述することができますが、何れにしても統一するのがよいでしょう。

同じページ内にある特定の行部分にリンク

 また、<a href="">~</a>には、実はhtmlファイル名だけでなく、同じ<A>タグの

 <a name="abc(任意)">任意の文章</a> <OK

 <a name="abc(任意)"></a>任意の文章 <OK

 <a name="abc(任意)">任意の文章 <表示できることもあるけど×

 <a name="abc(任意)"> <表示できることもあるけど×

を利用するとNAME属性で設定された値を参照し移動することもできるのです。

 ブラウザは、<a href="">のHREF属性の設定値の先頭に『#』がついているとその後ろに続く文字列の<a name="">を探します。

 つまり、上の例(任意の名前を仮にabcとした場合)では

 <a href="#abc">任意の文章</a>が指定された場合

 同じファイル内の

 <a name="abc">

 を探しに行き、存在すれば、そのタグ位置から始まる以降の内容が表示されます。

 ※<a name="abc(任意)">が存在しない場合には、ほとんどのブラウザでは無視されます。

 通常のページ移動(<a href="">)では、指定したページ(ファイル)が存在しなければNotFoundというエラーをブラウザが表示します。

レンタルサーバの場合、数秒後にそのサーバーのトップページ等に自動的に移動したりする場合もあります。

 但し、XMLに倣うXHTMLではname属性ではなく、id属性を利用します(HTMLでもid属性は汎用的な属性、name属性は一部の要素用なのでname属性を利用できる要素ではid属性も利用可能、一方、同一要素にid属性を複数設定することは仕様外なのでCSSのセレクタ設定にidを利用している場合は留意する必要があります)。

違うページ内にある特定の行部分にリンク

 また現在のhtmlファイルと異なる他のファイルの<a name="abc(任意)">を指定したい場合は呼び出すHREF属性は、他のファイルを『Other.html』とすると

 <a href="Other.html#abc(任意)">任意の文章</a>

 のように呼び出すHREF属性に

 『移動先のhtmlファイル名』+『#』+『NAME属性で設定した値』

と設定します。

 前述のように同じファイル内なら、『移動先のhtmlファイル名』は省略可能で『#』+『NAME属性で設定した値』でもOKです。

 いかがですか?

 くれぐれもNAME属性に#をつけないように。

 また、NAME属性で設定された場所に飛ぶ場合は必ずHREF属性の設定では『#』をつけるように気をつけて下さいね。

 ここまでは文字や文章を中心に扱ってきました。でもホームページはやっぱり文字だけじゃさみしい!そんな声も聞こえてきそうですね。

 さぁ!いよいよあと2つで超初心者コースは卒業です。 この章をこなしたあなたは次の2つはとっても簡単ですから焦らずがんばって下さいね。

写真も表示したい!『IMGタグ編』

 ちなみに要素a、<a>タグの詳細仕様は下記の通りです。

要素a、<a>タグの詳細

 要素a、<a>タグはリンクの為の要素、タグです。

要素 意味 用途
a anchor アンカー
リンク
ハイパーリンク
ハイパーテキストリンク
使用例 <a href="" id="" title="">aタグ・要素a</a>

要素 a の属性

 aタグに設定できる属性は下記の通りで[ <a 属性=""> ]のように利用します。

 ほぼaタグに固有の属性です。

属性 意味 用途
name name タグ識別子
href hyper text reference リンク参照先のURI(URL)リソースを設定
hreflang href language hrefで指定するURI自体の国・地域言語を設定
type content type リンク参照先のMIME TYPEを設定
rel relationship リンク先の次のページを設定
rev reverse リンク先の前のページを設定
charset character set
character encoding
リンク参照先の文字コードを設定

要素 a のその他の属性

 aタグに設定できるその他の属性は下記の通りです。

 aタグだけでなく他のタグ・要素にも設定できる属性です。

属性 意味 用途
id identify タグ識別子・参照設定(セレクタ)
class class 参照設定(セレクタ)
lang language リンク参照先の国・地域言語を設定
dir direction 右書き・左書きの方向指定
title title ブラウザ上でタグをポイントすると表示されるテキストを設定
style style CSSインライン設定用
shape
coords
shape
coords
shape:図形の形状
coords:座標指定
target target リンク参照先の表示方法設定
tabindex tabindex キーボードからタブキーが押された際の移動順を設定
accesskey accesskey キーボードからフォーカスを与える設定
イベント イベントハンドル (マウス)ポインタの動作や状態に応じて処理を記述するための設定

【ほぼaタグ固有の属性】

name

 name は <a name="abc">とアンカーリンクに設定した場合、<a href="#abc">で参照することでその位置にジャンプ(その位置がブラウザ内の一番上になるまでスクロールされた状態で表示)することができます。

 他のページから参照する場合には、<a href="(パス名)xxx.html#abc">のように指定することで移動できます。

留意事項:name 属性とid 属性

href

 href は 前述のnameとセットでの利用方法のほか、<a href="(パス名)ファイル名">で他のページにジャンプすることができます。

URI絶対パスと相対パス

 URIの設定方法には、絶対パス(絶対値指定)と相対パス(相対値指定)があります。

絶対パス

 絶対値指定の場合には、[ href=http:// ]から、または、同じURL内に移動する場合には、これを省略して[ / ]をURIの先頭の場所(ルート)として指定し、パス上で上の階層でも下の階層でも先頭から[ href="/my_dir/that_dir/my_file.html" ]のように設定します。

相対パス

 相対パス(相対値指定)では、半角ドット1つ[ . ]がカレントパス(現在のパス・カレントディレクトリ)、半角ドット2つ[ .. ]が1つ上のパス、[ / ]はディレクトリの区切りを表します。

 下の階層を参照する場合には、現在のディレクトリパスを意味する[ ./ ](半角ドット1つ+半角スラッシュ)を、上の階層にあるパスに移動する際に先頭の[ / ]から記述せずに1つ上の階層を意味する[ ../ ](半角ドット2つ+半角スラッシュ)を利用します。

 下の階層を参照する場合、現在のファイルパスが[ /my_dir/that_dir/my_file.html ]で[ that_dir ]の下層に[ next_dir ]がある場合、[ that_dir ]にある[ my_file.html ]から[ next_dir ]の[ onece_file.html ]に移動したい場合には[ ./next_dir/onece_file.html ]でアクセスすることができます。

 上の階層を参照する場合、現在のファイルパスが[ /my_dir/that_dir/my_file.html ]で[ my_dir ]の[ other_file.html ]に移動したい場合には[ my_dir ]は、現在の[ that_dir ]の1つ上ですから[ ../other_file.html ]のように設定します。

 このファイル名が[ other_file.html ]ではなく[ index.html ]である場合には、[ ../index.html ]でも良いですが、[ ../ ]のように省略して設定することもできます。

 この[ index.html ]における省略は絶対値指定でも相対値指定でも有効です。

hreflang

 hreflang は <a href="(パス名)ファイル名">の言語を設定。

 英語表記の場合は不要。

type

 type とは content type のことで content type は、その「ページ内容の種類」を指し、htmlである場合には、[ type="text/html" ]のように指定します。

 type には、このようにリンク参照先のMIME TYPEを設定します。

 要素 a で設定できるMIME TYPEの記述方法には他に[ "image/png" ]、[ "image/gif" ]、[ "video/mpeg" ]、[ "text/css" ]、[ "audio/basic" ]などがあります。

rel

 rel は relationの略で要素 a に設定した場合には、移動先ページから見た次のページを指定します。

 head 要素内で[ link rel= ]としてcss外部ファイルを取り込む等の設定としても利用されます。

rev

 rev は reverseの略で要素 a に設定した場合には、移動先ページから見た前のページを指定します。

rel と rev

 全てのHTMLファイルを系統立ててリンクする為にrel属性または、rev属性にはその目的を示すリンク種別(Link Type)を値として設定し、href属性にURI(URL)を設定します。

 特に同じディレクトリ内に[ index.html ]のほかにも[ xxxxx.html ]、[ △△△.html ]・・・と複数のファイルがある場合に指定する為に用意されています。

 これはどちらかというと検索エンジンのクローラーがファイルを探しやすいようにという色彩が濃いようですが、他方昨今の主要検索エンジンは、サイトマップの作成を要求することも多く、サイトマップを登録していればクローラー対策にはなります。

Link Type
リンク種別
リンク先内容(href属性に設定されるURL)
Contents目次
サイト全体や複数ページを集約する目次
Index索引
アルファベット順等
Glossary用語集
Copyright著作権声明
Next次のページ
一般的にrel属性と併せて使用
Previous前のページ
一般的にrev属性と併せて使用
Start開始ページ
Helpヘルプ情報ページ
Bookmarkブックマーク
StylesheetCSS・スタイルシート
Alternate当該ページ・文書の前後のバージョン
lang属性を伴う場合、他言語翻訳ページ、media属性を伴う場合、各種媒体別対応ページ等々

【aタグと他のタグにも設定可能な属性】

id

 idはファイル内での一意の識別子(唯一特定できる値で区別できるもの)としての役割を持ちます。

 idの用途としてはname同様<a id="abc">とアンカーリンクに設定した場合、<a href="#abc">で参照することでその位置にジャンプ(その位置がブラウザ内の一番上になるまでスクロールされた状態で表示)することができることに加えnameにできないことが可能です。

等々です。

 その他情報は、name と id参照

name と id

 name と idは、両方とも設定することができますが、両方設定した場合には設定値に同じ値を入れる必要があり、更に同じファイル内で一意となる値を設定します。

 name と idはそれぞれファイル内での識別子としての役割を持つ為ですが、識別子としてのname と idの違いは、nameが文字参照(&quote; 等)なども設定値の中に入れられるのに対し、idはこれができません。

 他方 name と異なり idは、識別子としてだけでなく、CSSのセレクタ(参照設定)として、SCRIPTを利用する際に固有の識別子として、またobjectタグの識別子として参照するため、ユーザーエージェントがタグを処理する際の参照先として利用することができます。

 しかし、ブラウザの種類やバージョンによってはidをサポートしていない場合があるようです(が、どのブラウザのどのバージョンが対応していないのか不明)。

 このため、いかなるブラウザにも対応したい場合や属性値(設定値)に文字参照が含まれる場合には、name属性を利用。

 文字参照などを含まない場合には、id を利用する方が汎用性がありますが、一部のブラウザでは認識されないケースがあるということを踏まえて設定する必要があります。

class

 classは、idと異なり、同じファイル内で(aタグを含む)複数のタグに同じ名称を設定することが可能です。

 また、idの値が一意という条件が満たされれば、同じタグ内に別途classを設定することも可能です。

 主な用途は

です。

id と class

 id と class は、両方設定することも可能ですし、異なる属性値を設定することもできます(idはそのページで一意でなければならないので複数設定する場合はそれぞれの属性値が他にないものにする必要あり)。

 id と class をCSSのセレクタとして見た場合、id は class の設定より優先されます。

lang

 langは、aタグで設定される場合には、[ lang="en" ]、[ lang="ja" ]のようにリンク参照先の国や地域の言語を設定することができます。

dir

 dirは、direction(方向)の略で右から左に向かって書く右書き(right to left)か左から右に向かって書く左書き(left to right)の記述書式の方向指定で国際化における指定可能属性です。

 dirの属性値は、right to leftの略語、[ rtl ]か、left to rightの略語[ ltr ]です。

title

 titleは、aタグを含むほぼ全てのタグで設定可能で、ブラウザ上でポイントされた場合に、titleに設定された属性値が表示されます。

style

 styleは、CSSのインライン設定を行うことができる属性です。

shape coords

 shape はアンカーを有効にする領域(図形の形状:円・三角・四角で指定)、 coords は、アンカーの位置をカンマで区切った座標で設定します。

 使用例:<a shape="" coords="" href="">

 img mapだけでなく、aタグにも利用できるのですね。

 shapeで設定できる値やcoordsの座標指定方法については、use map参照。

target

 target はリンク参照先の表示方法を設定します。

 属性値には[ _top ]、[ _self ]、[ _parent ]、[ _blank ]があります。

 既定では、現在開いているウィンドウにリンク先が表示され、、現在のウィンドウは開いたまま、リンク先を新しいウィンドウに表示したい場合、[ target="_blank" ]を設定します。

 [ _top ]、[ _self ]、[ _parent ]については、frame(フレーム)で利用します。

tabindex

 tabindex はキーボードから[ tab ]キーが押された際の移動順を設定します。

 いわゆるクライアントアプリケーション(VB6.0までのVB等)とは異なり、ブラウザの場合は、設定しない場合、上から下に順にタブ移動します(aタグ、formの各種タグ等)。

 それでよい場合は設定する必要はありませんが、指定した順に移動させたい場合に利用します。

 もっとも自由に移動できてしまうマウスも利用できる環境でキーボード操作によるタブキーの移動順だけを変更したいケースはほとんどないでしょう。

 OSがWindowsやMacであればたいていの場合マウスを利用しますが、WindowsやMacユーザーのマウスが壊れて代用がないけど操作したい場合はもちろん、マウスよりもキーボード操作を好むユーザーの場合、またUNIX/Linuxユーザーはキーボード操作が基本だったりしますからタブキーの操作が考慮されています。

 Windows自体も、これらOSで利用するアプリケーションでもタブキーで移動する事ができるようになっていたりします。

accesskey

 accesskey はキーボードから「指定した」ショートカットキーを利用できるようにする属性です。

 [ a href="" accesskey="H" ] などと設定するとWindowsでは[ alt ]キーや[ ctrl ]キー、Macは[ cmd ]キー等と組み合わせて属性値として設定したキーをキーボードから入力するとそのアンカーにフォーカスします。

 accesskey はformの各種タグなどにも設定できます。

イベント

 HTMLではユーザーの操作によって何らかの処理を行いたい場合にそのタイミングにあたる属性がいくつか用意されています。

 こうしたタイミングにあたる属性はイベントハンドル、イベントハンドラなどと呼ばれ、JavaScriptやvbscriptの関数等を設定することができます。

 詳細は、イベントハンドル・イベントハンドラ参照。

各種HTMLとHTMLタグ/要素・属性・属性値

ホーム前へ次へ