表示項目には一般的にどのタグを使用するのでしょうか

質問

いつもお世話になります。

HTMLで、入力項目にはinputタグのtypeにtextを、ボタンにはtypeにbutton、submitというように設定しますが、表示するだけの場合はどのタグを使用するべきなのでしょうか。
表示するだけの項目にタグが必要なのは、その項目をjavascriptを使用して動的に値を変える必要があるため、タグで定義しておかないと変更できないからです。

宜しくお願いします。

回答No.4

noname#212058 · ベストアンサー

ANo.2 です。

一般的な、という意味では <p>、<span>、<div> が一般的ではないかと。
ただ、<p> はCSSか何かで余白(マージン)をゼロにしないと使いにくいですね。

<a> は『アンカーリンクに使う』という明確な目的を持ったタグなので、単に
文字を表示するだけの目的で使うのは避けたほうが良いと思います。

回答No.6

神崎 渉瑠（@taloo）

表示する内容の「意味」に応じたタグを使用すれば良いと思います。

たとえばリスト表示するなら<ul>ですし、引用となるなら<q>や<blockquote>です。
ですが、現実的にはHTMLにその定義がない「その他」になることが多いため、結局<div>や<span>を使うことが多いと思います。

全部<div>では何のための<div>かわからなくなるため、
id="news"ならニュースを示す、id="answer"なら回答を示す、というように、独自のid属性値やclass値を定義すればいいと思います。

属性（属性値）は自由に作れるため、第三者がプラグインなどで分類するときに、どの属性を抽出すればよいかわからなくなります。
（たとえば新着情報を表すのが、<div id="news">だったり<div id="information">だったりと、サイトごとに違います。）
そこで、いろんな組織（W3Cをはじめ、WHATWGやMicroformats、場合によってはGoogleやMozillaなども。）が、こうしようと提案することも多いので、
それに従うのも良いと思います。

回答No.5

Chaire

入力が input 要素であるなら、出力は HTML5 の output 要素です。output 要素の value 属性値に出力することも、output 要素の内容として出力することも可能です。

---
もし output 要素を使えないなら、WAI ARIA にしたがい次のように書きます（文書構造に合わせて p 要素以外でも構いません、注目すべきは属性の方です）。そうすれば、ARIA 対応アプリケーションは内容の変更を適切に利用者に通知することができます。

<p role="status" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></p>

・role="alert" なら、直ちに通知すべき重要な変更であることを示します。自動的に aria-live="assertive" がセットされます。
・role="log" なら、古いものから順次消えていくログ領域であることを示します。自動的に aria-live="polite" がセットされます。
・role="status" なら、alert ほど重要ではない助言的情報であることを示します。自動的に aria-live="polite" がセットされます。
・role="timer" なら、時間を示すカウンタであることを示します。自動的に aria-live="off" がセットされます。

・aria-live="assertive" なら、作業に割り込んででも変更を通知します。
・aria-live="polite" なら、作業中でないときに変更を通知します。
・aria-live="off" なら、特に変更を通知しません。

・aria-relevant="text" は、変更内容がテキストであることを示します。
・aria-relevant="addtions" は、変更内容がノード追加であることを示します。
・aria-relevant="removal" は、変更内容がノードの削除であることを示します。
・aria-relevant="addtions text" のように複数指定すれば、変更内容はテキストとノードの追加であることを示します。

・aria-atomic="true" なら、内容全体を通知します。
・aria-atomic="false" なら、変更点のみを通知します。

要するに、HTML には（output 以外の）適切な要素が見当たらないので、別の支援技術を用いて補強します。

---
なお、document.all、element.innerText はもともと IE の独自拡張で、互換性のために一応 HTML5 に収録されましたが、現在の制作者が使う理由はありません。また、要素の識別子も（フォーム部品など例外を除き）name 属性ではなく id 属性です。さらに、querySelector() などセレクタや XPath で要素を識別すれば、そもそも id 属性自体も不要なはずです（ARIA を使うと別の意味で必要にはなりますが）。

回答No.3

shiren2

一般的にはspanタグが多いですが、labelというタグもありますね
フォーム要素と関連付けて使うことが多いですが、単独で使用することも出来ます。

http://www.html5.jp/tag/elements/label.html
http://diary.noasobi.net/flyson/xhtml_ref/label.html

回答No.2

noname#212058

別にどんなタグ使っても大丈夫。
<div> でも <span> でも <td> でも、どれでもOK。

タグの中に id 属性を入れて、Javascript からの書き込みのコードはこんな感じにしてあげればできるよ。

タグ：
<span id="xx"></span>

スクリプト：
var tag = document.getElementById("xx");
tag.innerText="書き込む文字";

お礼

返答ありがとうございます。

> 別にどんなタグ使っても大丈夫。
> <div> でも <span> でも <td> でも、どれでもOK。

一般的にはこれを使うよ、というのは無いものなのですかね。自分では<a>タグやらを思い浮かべたのですが。。。

回答No.1

PXU10652

「表示するだけの場合はどのタグを使用するべきなのでしょうか。」
　＜FORM＞内で＜INPUT TYPE="text" NAME="box" SIZE=50 VALUE=""＞でOKです。

　私のホームページですが、こういうこと（リンク先にマウスを載せるとHELPというTEXT枠に説明が出る）をされたいのでしょうか？↓
http://www.me-hp.com/profile/index-j.htm

　であれば、「ソースの表示」をすれば、やり方が分かると思います。

お礼

返答ありがとうございます。

inputタグは入力項目となってしまうので、それは使用したくないのです（disable、readonlyもやりたくないのです）。
表示するだけの項目です。通常ならば、そのまま文字だけを表示したいのであれば、何もタグなど使用せずにそのまま書いてしまえばよいですが、その項目をjavascriptで動的に変えたいのです。動的に変えるためには、タグで定義されている個所を指定して変更する（「document.all("タグ名")など）と思いますが、タグのnameが必要になると思っています。それを実現したい場合、一般的には何を使用するべきなのか、というところで質問しておます。

分かりにくい点があれば申し訳ないのですが、宜しくお願いします。