グローバル属性

グローバル属性とはすべてのHTML要素に共通で指定することができる属性です。

lang属性  title属性  id属性  class属性  style属性  dir属性  translate属性  data-*属性

lang属性

lang属性は、要素の内容とテキストが含まれている属性の言語を指定します。値は、BCP47言語タグ(例 日本語:ja、英語:en)、または空の文字列で指定します。なお、空の文字列を指定することは、主言語が不明であることを表します。

ドキュメント全体が日本語である場合の例)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

title属性

title属性は、指定した要素のツールチップで補足情報を表します。値はテキストです。リンクでは、タイトルやリンク先の情報など、画像では、画像の著作権表示や画像の説明など、段落では、テキストの脚注や解説など、引用では、ソースに関する詳細情報など、インタラクティブなコンテンツでは、要素の用途に対するラベル(分類)や指示など要素に追加情報を持たせることができます。

例)

<h2 title="リンゴの説明">Apple</h2>

また、title属性が省略されている場合は、title属性が設定されている最も近い祖先の要素に関連していることを意味します。要素にtitle属性を指定すると、祖先の要素が持つtitle属性の情報は上書きされ、指定した要素に関連していないことを明示的に示します。空の文字列に属性を設定することで、要素には補助情報を持っていないことを表し、祖先の要素からの補足情報を引き継ぐことができます。

例)

<h2 title="果物の説明">Fruit</h2>  ←果物の説明(ツールチップの出現)
<p>内容</p>             ←果物の説明(意味的に関連)

<h3 title="リンゴの説明">Apple</h3> ←リンゴの説明(ツールチップの出現/果物の説明という情報をリンゴの説明に上書き)
<p>内容</p>             ←リンゴの説明(意味的に関連)

<h3 title="バナナの説明">Banana</h3> ←バナナの説明(ツールチップの出現/リンゴの説明という情報をバナナの説明に上書き)
<p>内容</p>             ←バナナの説明(意味的に関連)

title属性の値に改行コード("LF" (U+000A) character)を含めるとツールチップの内容を改行することができます。

例)

<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>

My logs show that there was some interest in HTTP today.


ただし、title属性の値の改行コードの使用には注意が必要で、例えば上記の例では、HTTPという略語の本来の名称を定義していますが、改行を含む名称が本来の名称として定義されていることになります。


link、abbr、input要素など、いくつかの要素には、title属性に対して、前述のセマンティクスの他にも以下の追加のセマンティクスが定義されます。


※ マウスのようなポインティングデバイスを必要とするtitle属性の仕様のツールチップをサポートしていないキーボードのみ、あるいはタッチタイプのみの携帯電話、スマートホン、タブレットなどのユーザエージェントも多く、現在では推奨されていません。


id属性

id属性は、htmlの要素に一意(固有)識別子(id名)を指定します。値となるid名は、id名を用いてドキュメントの特定部分へのリンクしたり、特定の要素へのスタイル付けに使うことができます。

値となる名前の形式に制限はなく、id名は数字のみや句読点のみで構成することができ、数字やアンダースコアで始めることもできます。ただし、値は、同じドキュメント内の要素で、同じ値(名前)をつけることはできず、少なくとも1つの文字を含む必要があり、値は空白文字を含むことはできません。また、id名はあくまで文字列であり特定の意味を導き出すことは望ましくありません。

ドキュメントの特定部分へのリンク 例)

<h2 id="apple">Apple</h2>
<a href="#apple">Appleの項目へ</a>

スタイル付けの例)

スタイルシート
#main{
width: 798px;
background: #eeeeee;
}

HTML
<div id="main">内容</div>

class属性

class属性はHTMLの要素にclass名(クラス名)を指定し、複数の要素へのスタイル付けに使うことができます。また、クラス名は半角空白文字(半角スペース)で区切り複数を指定でき、半角スペースで区切られたクラス名に重複があった場合は1つが適用され、それ以外は無視されます。

クラス名の複数指定の例)

スタイルシート

.ex_1{
text-decoration: underline;
}

.ex_2{
font-weight: bold;
}

.ex_3{
color: red;
}
HTML

<p class="ex_1 ex_2 ex_3">アンダーライン、太字、赤文字</p>
<p class="ex_1 ex_2">アンダーライン、太字</p>
<p class="ex_1 ex_3">アンダーライン、赤文字</p>
<p class="ex_2 ex_3">太字、赤文字</p>
<p class="ex_1">アンダーライン</p>

上記のHTMLドキュメント


また、class属性の値の文字列には制約はありませんが、クラス名はスタイルの目的ではなく、コンテンツの性質を表す名前にすることが推奨されています。

例)というテキストに赤文字で表示するスタイルを適用する場合の例)

<p class="red">例)</p> ←スタイルの目的で付けたクラス名は好ましくない。
<p class="example">例)</p> ←コンテンツの性質である「例」の英単語(Example)などを付けるほうが好ましい。

style属性

style属性は要素にスタイルシートを指定します。値はCSSで記述したスタイルです。

<p>My sweat suit is <span style="color: green; background: mintcream">green</span> and my eyes are <span style="color: blue;background: mintcream">blue</span>.</p>

My sweat suit is green and my eyes are blue.


なお、style属性を指定する要素の内容は、style属性がなかったとしても理解でき、使用可能でなければなりません。特にコンテンツを非表示にするため、あるいは、ドキュメントに無い意味を伝えるためにstyle属性を使用することはHTML5の仕様に準拠しません。コンテンツの非表示はhidden属性を使います。

dir属性

dir属性は要素のテキストの表示を開始する方向を指定し、主に左から右へテキストを書く日本語や英語などの言語と右から左へテキストを書くアラビア語などの言語のコンテンツが混在している場合などに使用します。

値は以下のキーワードです。


dir="auto" 例)

<body>
<div>
<p dir="auto" class="n2"><bdi>Student</bdi>: How do you write "What's your name?" in Arabic?</p>
<p dir="auto" class="n1"><bdi>Teacher</bdi>: ما اسمك؟</p>
<p dir="auto" class="n2"><bdi>Student</bdi>: Thanks.</p>
<p dir="auto" class="n1"><bdi>Teacher</bdi>: That's written "شكرًا".</p>
<p dir="auto" class="n1"><bdi>Teacher</bdi>: Do you know how to write "Please"?</p>
<p dir="auto" class="n2"><bdi>Student</bdi>: "من فضلك", right?</p>
</div>
</body>

上記のHTMLドキュメント

Chrome 38.0
dir属性 auto 例 Chrome 38.0

前述のように、autoの値は大雑把であり、ブラウザなどユーザー・エージェントによってもltr、rtlの解釈が異なります。上記の画像は、Chrome 38.0でレンダリングした結果のキャプチャです。2番目の段落はアラビア文字のみなのでrtl、4番目の段落は英文字から始まっているのでltr、最後の段落はアラビア文字で始まっているためrtlと判定されています。Internet Explorer 10ではこんな感じです。


なお、テキストの方向を示すためにCSSを使用するよりもdir属性を使用するように強く推奨されています。

例)

スタイルシート
div{
text-align: right;
 }
 
内容
<div>
<p>おえういあ</p>
<p>こけくきか</p>
<p>そせすしさ</p>
<p>とてつちた</p>
</div>

上記のHTMLドキュメント

上記は右から左へ読むことを想定しテキストを逆に記述した例です。この例でスタイルシート(div要素の内容の右寄せ)が適用されなかった場合、何がかかれているのかよく分からなくなってしまいます。

推奨例)

<div dir="rtl">
<p>おえういあ</p>
<p>こけくきか</p>
<p>そせすしさ</p>
<p>とてつちた</p>
</div>

上記のHTMLドキュメント


translate属性

translate属性は、指定した要素の内容のテキストをブラウザの翻訳機能などtranslate属性をサポートしている翻訳ソフトやサービス、拡張機能などで翻訳するかどうかを指定します。値は空文字、yes、noのキーワードです。空文字とyesは指定した要素の内容が翻訳の対象であることを表し、noは翻訳の対象でないことを表します。

例)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<p>The Bee Game is a text adventure game in English.</p>
<p>When the game launches, the first thing you should do is type <span translate="no">eat honey</span>. </p>
<p>The game will respond with:
<span translate="no">Yum yum! That was some good honey!</span></p>
</div>
</body>
</html>

上記のHTMLドキュメント
※translate属性の指定の無い場合のソースも記述してあります。translate属性をサポートしているBing 翻訳などブラウザの翻訳拡張機能でどのように表示されるかお試し頂ければと思います。


カスタムデータ属性(data-*属性)

カスタムデータ属性は、名前空間を持たない「data-」で始まる属性で、ハイフンの後少なくとも小文字のASCII文字を1文字を持ちます。値は任意のテキストです。

この属性は、適切な属性や要素がない場合にページやアプリケーションに、独自のデータを格納することを意図しています。また、複数指定することができます。


Google+1ボタンでの使用例)

<div class="g-plusone" data-size="tall" data-annotation="inline" data-width="120"></div>