２ タグ

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

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

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

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

<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）は次の表のようになります。

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

記述例

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

○ autocapitalize

入力された文字を大文字化するかどうかを指定します。

ただし、物理キーボードからの入力には対応しません。モバイル端末の仮想キーボードや音声入力などの入力に影響します。

記述例

<input type="text" autocapitalize="off">
<input type="text" autocapitalize="on">
<input type="text" autocapitalize="words">
<input type="text" autocapitalize="characters">

○ autofocus

フォーム部品の自動フォーカスを指定します。

この属性が指定された部品は、文書の読み込み時に自動的にフォーカス（最初の入力位置に）されます。したがって、この属性を指定できる要素は、1つの文書に1つだけです。

記述例

<form>
  <input type="text" name="param1" value="100">
  <input type="text" name="param2" value="200" autofocus>
</form>

実行例をクリックしてください。別ウィンドウが開き、autofocus 属性が記述してあるフォーム部品（2番目）が最初の入力対象になります。

記述例

<form>
  <button type="submit" name="button" value="append">追加</button>
  <button type="submit" name="button" value="remove" autofocus>削除</button>
</form>

実行例をクリックしてください。別ウィンドウが開き、autofocus 属性が記述してある「削除」ボタンが最初から選択状態になります。

○ 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>

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

○ enterkeyhint

モバイル端末の仮想キーボードの [Enter] キーにどのようなアクションラベル（またはアイコン）を表示するかを定義することができます。

enterkeyhint 属性の値として次のものが指定できます。ただし、実際にどのように表示されるかは、モバイル端末やブラウザによります。

記述例

<input type="submit" enterkeyhint="search"><br>
<button type="submit" enterkeyhint="search">XXXXX</button><br>

○ hidden

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

記述例

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

○ id

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

記述例

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

○ inputmode

モバイル端末の入力モードを指定します。

inputmode 属性の値として次のものが指定できます。

記述例

<input type="text" inputmode="none"><br>
<input type="text" inputmode="text"><br>
<input type="text" inputmode="tel"><br>
<input type="text" inputmode="url"><br>
<input type="text" inputmode="email"><br>
<input type="text" inputmode="numeric"><br>
<input type="text" inputmode="decimal"><br>
<input type="text" inputmode="search"><br>

○ is

カスタマイズされた組み込み要素の名前を指定します。

記述例

<span is="decimal-fraction">-123.456</span>

「８．１０．４　カスタマイズされた組み込み要素」も参照してください。

○ itemscope

要素に関連付けられた、名前と値（itemprop）の組み合わせを持つ新しいアイテムを作成します。

itemscope 属性を要素に指定して、１つのアイテムとみなす範囲を示します。

記述例

<div itemscope>
   :
</div>

○ itemtype

コンテンツに適したアイテム種別を定義する、絶対 URL を１つあるいは空白区切りで複数指定します。

itemscope 属性を指定した要素でのみ指定できます。

最もよく用いられているのが http://schema.org/ です。https://schema.org/CreativeWork の More specific Types を参照してください。

記述例

<div itemscope itemtype="http://schema.org/Book">
   :
</div>

○ itemprop

アイテム種別（itemtype）で定義された属性名を指定します。

下の例では、itemtype 属性に http://schema.org/Book を指定していますので、https://schema.org/Book の Property を参照してください。

記述例

<div itemscope itemtype="http://schema.org/Book">
  <div>書籍名: <span itemprop="name">The tale of Genji</span></div>
  <div>著者名: <span itemprop="author">Murasaki Shikibu</span></div>
  <div>ページ数: <span itemprop="numberOfPages">1135</span></div>
</div>

○ itemid

アイテムに割り振られた一意のグローバル識別子(例えば書籍の ISBN 番号)を示す URL/URN を指定します。

itemscope、itemtype 属性を指定した要素でのみ指定できます。

記述例

<div itemscope itemtype="http://schema.org/Book" itemscope itemid="ISBN-13-978-0-39-460405-3">
  <div>書籍名: <span itemprop="name">The tale of Genji</span></div>
  <div>著者名: <span itemprop="author">Murasaki Shikibu</span></div>
  <div>ページ数: <span itemprop="numberOfPages">1135</span></div>
</div>

○ itemref

属性値として追加したい要素の ID を１つあるいは空白区切りで複数指定します。

itemscope 属性を指定した要素でのみ指定できます。

記述例

<div itemscope itemtype="http://schema.org/Book" itemid="ISBN-13-978-0-39-460405-3" itemref="a1">
  <div>書籍名: <span itemprop="name">The tale of Genji</span></div>
  <div>著者名: <span itemprop="author">Murasaki Shikibu</span></div>
  <div>ページ数: <span itemprop="numberOfPages">1135</span></div>
</div>
<div id="a1">装丁: <span itemprop="bookFormat">ハードカバー</span></div>

○ lang

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

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

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

記述例

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

言語コード一覧

○ nonce

Web ページ上に悪意を持って埋め込まれたスクリプトの実行を抑制します。

nonce が間違っていたり記述されていないと、実行されません。

記述例

<head> 
  <meta http-equiv="Content-Security-Policy" content="script-src 'nonce-xxxxxxxxxxxxxxxxxxx'">
</head>

<body>
  <span id="d1">実行できませんでした。</span><br>
  <span id="d2">実行できませんでした。</span><br>
  <span id="d3">実行できませんでした。</span><br>

  <script nonce="xxxxxxxxxxxxxxxxxxx">   // nonce が正しい
    d1.textContent = "実行できました。";
  </script>

  <script>                               // nonce の記述がない
    d2.textContent = "実行できました。";
  </script>

  <script nonce="aaaaaaaaaaaaaaaaaaa">   // nonce が正しくない
    d3.textContent = "実行できました。";
  </script>
</body>

実行例をクリックしてください。別ウィンドウが開き、javascript が実行されます。

○ slot

template 要素内の name 属性と関連付けます。

slot 要素の name 属性の値と一致する slot 属性をもつ要素のコンテンツが、slot 要素に挿入されます。

記述例

<template>
<slot name="city"></slot>
</template>

<span slot="city">茅ヶ崎</span>

「４．１１ スロット　(slot)」も参照してください。

○ 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>