このページについて
このページではHTMLで使えるname属性の機能と使い方を解説しています。
name属性
nameはHTML要素に付与して使います。付与した名前を参照して、JavaScriptなどで使ったりします。nameを使う事ができるタグはbuttonタグ/fieldsetタグ/formタグ/iframeタグ/inputタグ/mapタグ/metaタグ/outputタグ/selectタグ/textareaタグで使う事ができます。
基本的には目印としての役割になりますが、一部のタグでは働き方が異なります。その辺りは個別で後で解説します。
name属性の書き方
nameは付与できるタグに対して書き、その要素だと分かるような名前を付けておきます。
<button name="button1">ボタン</button>この使い方をするときはJavaScriptで後から色々と操作するときの目印としての役割が多いです。
formタグでのname属性
formタグで使う場合にはデータが送信されたときの参照用に使われます。JavaScriptで使える、formsプロパティを使ってname指定する時にこのformタグのname属性が役立ちます。
一体何だと思われそうですが、左がHTMLを編集している画面で、右側がコンソールになります。まずtestというname属性を持つformがあります。(8~11行目)
次に、12行目以降でスクリプトを書きます。内容は変数(x)にforms.testの中身を代入するというものと、そのxをコンソールに出力するというものです。この段階では大雑把にtestを選択しているだけなのでform全部が代入されていて、コンソールにもその様子が出ています。
document.forms.test.test2と書くと、画像の9行目の部分のみが取得できます。
iframeタグでのname属性
iframeタグで使うname属性は基本的にはJavaScriptでの参照用ではありますが、もう1つ機能があります。それはaタグでも書きましたが、target属性でリンク先を開く先として指定する事ができる機能です。
A.htmlとB.htmlの2つがあるとします。Aの中身は以下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="./testB.html" target="test">testB</a>
<iframe name="test" width="400" height="400"></iframe>
</body>
</html>そしてBの中身は以下。
//testB.htmlの中身
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>testBの内容がiframe内に表示されます。</p>
</body>
</html>この2つを作成した状態でA.htmlを開くとこのようになります。
そしてtestBをクリックすると、B.htmlが開きます。ただ上のコードで書いてある通り、B.htmlのtarget属性はtestという場所になっています。そしてtestはどこにあるのかというと、iframeタグのnameで設定されています。つまり「B.htmlをtestという名前を持つiframeタグで開く」という指定になります。
実行後がこちら。
めでたくiframeタグで別のhtmlドキュメントを開く事ができました。
mapタグで使うname属性
mapタグで使う場合は画像とクリック用のマップを関連付けるために必要な属性となります。
画像を表示するのはimgタグですが、そのimgタグにusemap属性を付与します。そしてmapタグ側でnameを使い、usemap属性で与えた名前と同じ名前を付与します。サンプルはこうなります。
<img src="画像URL" usemap="#map1">
<map name="map1">
</map>注意点として、imgタグのusemap属性では#が必要です。
metaタグで使うname属性
metaタグで使う場合はそのメタデータの名前という扱いになります。これらはすでに使える値や型が決まっているので全て掲載します。
| application-name | ページが表示している、webアプリケーションの名前 |
|---|---|
| author | 文書の作者の名前を書きます。 |
| |
| description | 通称メタディスクリプションと言って、検索結果でタイトルの下に表示されている要約みたいな奴のこと |
| |
| generator | ドキュメントの生成に使われているソフトウェアを書きますが、手書きページの場合は使いません。 |
| |
| keywords | ページに関するキーワードをリスト化し、検索エンジンに伝える機能。 |
| |
| viewport | ビューポートといい、ユーザーのデバイスの表示可能領域に関する機能です。よく言われているレスポンシブ化するにはこのビューポートで適切にコンテンツが表示されるように工夫する必要があります。 |
|
viewportは今となっては必ず使われていると言ってもいいんですが、keywordsなんかは適切な利用がなされなかった過去の経緯から今となっては無視に近い扱いを受けているとか受けていないとか。なのでこれを乱用したからと言ってSEO対策が完璧になるなんてことはありません。
まとめ
nameは付与するタグによってその効果が変わってきます。基本的にはJavaScriptで操作するための目印というポジションですが、中にはタグ同士を関連付けるために必須だったりします。それぞれ適した使い方をしましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。