２ タグ

２．１．１ 属性値の引用符

属性値を囲む引用符は "（ダブルクォーテーション）でも '（シングルクォーテーション）でも構いません。ただし、開始と終了の引用符は同じ文字である必要があります。

また、引用符を記述しなくても正しく解釈される場合がほとんどですが、空白、<、>、"（ダブルクォーテーション）、'（シングルクォーテーション）、`（バッククォート）、= を含む属性値は引用符で囲む必要があります。

例えば、次のような意味で

<p class="aaa bbb">

引用符を省略して、次のように記述すると

<p class=aaa bbb>

以下のように解釈されてしまいます。

<p class="aaa" bbb="">           ← bbb が属性名と解釈される

２．１．２ Boolean属性

Boolean属性とは、値が 「true」か「false」しかない属性のことです。

値が 「true」の場合は、属性名のみ記述する、あるいは属性値を空にすることで短縮することができます。したがって、以下の3つの例はいずれも同じ意味になります。

<input required="required">
<input required="">
<input required>

値が 「false」の場合は、属性名を記述しません（属性名を記述しなければ、「false」になります）。

○ accesskey

キーボード・ショートカット用のキーを指定します。ショートカットの入力により、リンク先を開けたり、入力欄を選択したりできます。ショートカット用のキーは、フル装備のキーボードが無い携帯電話用に使うことが多く、数字が便利です。

記述例

<-- リンク先を開ける -->
<a href="other.htm" accesskey="1">別ページ</a>

ただし、PCのブラウザーでは ALT キーを押しながらショートカット用のキーを入力する必要があり、例えばショートカットキー（1）は次の表のようになります。また、<a>（アンカー要素）のときは では Enter キーの押下も必要です。

ショートカットキーによって、入力欄へのフォーカスを替える（入力欄を替える）こともできます。

記述例

<-- 入力欄を選択する -->
<form>
  <input type="text" accesskey="a" value="aaaaa">
  <input type="text" accesskey="b" value="bbbbb">
</form>

○ class

スタイルシートのクラス名（分類名）を指定します。そのクラス名が付けられた要素にのみ、スタイルを適用させることができます。

複数のクラス名を半角スペースで区切って入れることも可能です。

記述例

<div class="title">タイトル</div>
<table class="example list">

○ contenteditable

要素内容が編集可能かどうかを指定します。contenteditable属性を指定すると、通常は編集できない要素であっても、その内容を書き換えることが可能になります。

属性値として "true" か空文字列を指定しても編集可能となります。contenteditable属性を指定しないか、属性値として "false" を指定すると編集不可になります。

記述例

<div contenteditable>
編集可能
</div>

○ dir

要素のテキストの方向性を指定します。属性値として次のものを指定できます。

記述例

<div dir="rtl">abcdefghijklmnopqrstuvwxyz</div>

○ draggable

移動可能にしたい要素に draggable=true 属性を設定します。

記述例

<div style="border:solid 1px gray;width:100px;height:30px;">
  <span draggable="true">他のボックスにドラッグして</span>
</div>

"他のボックスにドラッグして" をもう一つのボックスにドラッグできます。ただし、この操作の実現には javascript を使用しています。

○ dropzone

どのようなコンテンツがドロップできるかを指定します。

以下の属性値を空白区切りで指定します。

ドラッグ先の要素に dropzone 属性を指定しています。draggable 要素の例では Javascript でドロップを実現していましたが、この例では Javascript は指定していません。

記述例

<div style="border:solid 1px gray;width:100px;height:30px;">
  <span draggable="true">他のボックスにドラッグして</span>
</div>
<div dropzone="copy string:text/plane" style="border:solid 1px gray;width:100px;height:30px;">
</div>

動作するブラウザは今のところありません。

○ hidden

現時点においてはその要素が無関係であることを表します。hidden属性を指定すると、通常は表示されなくなります。

記述例

開始<span hidden>非表示</span>終了

○ id

要素に対して ID（固有の識別子）を指定します。一つの HTML ファイルには同じ ID は指定できません。HTML ファイルが異なれば同じ ID でも指定することができます。

記述例

<span id="name">名前</span>

○ lang

要素のコンテンツと、要素のテキストを含んだ属性の主言語を指定します。

html に lang を指定すると、文書全体の言語を示すことができます。また、1つのHTML ファイル内に複数の言語が含まれる場合は、タグごとに言語を指定することができます。

lang を適切に指定すれば、q 要素を使用した引用のときの引用符が変わります。また、プログラムによる自動翻訳などが容易になるかもしれませんが、現在はあまり意味があるようには思えません。

記述例

<span lang="ja"><q>こんにちは</q>は日本語だけど、<q lang="en">Hello</q>は英語です。</span>

言語コード一覧

○ spellcheck

フォーム・コントロール（textarea 要素の値など）や編集ホスト内の要素（contenteditable を使って）の中にある編集可能なテキストのスペルや文法をチェックするかどうかを指定します。

記述例

<div spellcheck contenteditable>I hav no money.</div>

○ style

要素に対して直接スタイルを指定します。

記述例

<div style="color:red;font-size:150%;">赤くて少し大きい文字</div>

○ tabindex

Tab キーによるフォーカスの移動順序（1～）を指定します。

tabindex を指定することによって、本来フォーカスを得られない要素でもクリックして選択できるようになります。

記述例

<form>
1 <input type="text" tabindex="1">　2 <input type="text" tabindex="2"><br>
3 <input type="text" tabindex="3">　5 <input type="text" tabindex="5"><br>
4 <input type="text" tabindex="4">　6 <input type="text" tabindex="6">
</form>

○ title

補足情報を指定します。カーソルを重ねると表示されます。

記述例

<span title="補足説明">内容</span><br>

○ translate

翻訳可否を指定します。

属性値として no を指定すると翻訳されませんが、現在はあまり機能しているようには思えません。

記述例

<span translate="yes">This is a pen.</span>
<span translate="no">This is a pen.</span>