この動画はメンバー限定動画です
全ての講座が
月額990円で学び放題
HTML入門HTMLの属性について知ろう
記事を共有：
HTMLのタグには、次のようにタグの中にさらに情報が付け足されている場合があります。
<html lang="ja"></html>この場合、<html>というタグに「このHTML文書は日本語（ja）で制作されています」という追加の情報を付加していますが、これをHTMLタグの「属性」と呼びます。
元は「Attribute」という単語の翻訳ですが、もう少し分かりやすい言葉に意訳すれば「性質」とか「特性」という意味になるため、HTMLタグの「特性」を追加する情報といった意味にすると分かりやすいでしょう。
HTML属性の書式
HTML属性は、次のような書式で記述します。
<要素名 属性名="値" 属性名="値">...</要素名>こうして、いくつでも属性を付加していくことができます。付加できる属性は、HTMLタグの種類によって異なり、必ず指定しなければいけないもの（必須属性）や特定のタグにしか付加できないもの、逆に基本的にはどんなタグにも付加できる属性（グローバル属性）など、さまざまな種類があります。
どのタグに、どんな属性が利用できるかはリファレンスで調べていくことになります。
グローバル属性
属性の中で、どんなタグにも共通して利用できるものを「グローバル属性」といいます。
ここでは、代表的なグローバル属性を紹介しましょう。
id属性、class属性
グローバル属性の中でも、最もよく利用されるのが「id属性」と「class属性」です。これらは、特に見た目などに影響を与えることはなく、各要素に固有の名前（ID）をつけたり、クラスで分類をするためのもので、CSSやJavaScriptと組み合わせるときによく利用されます。
lang属性
lang属性は、<html>タグに指定するのが一般的ですが、実際にはどんなHTMLタグにも付加することができます。これによって、1ページの中に英語と日本語が混ざっているなど、多言語の要素があった場合に、各言語を示すことができます。
すると、閲覧しているユーザーの環境によっては、図のように翻訳機能が自動的に働いたり、案内が表示されることがあります。
title属性
要素にタイトルを付加することができます。例えば、リンクを設置する<a>タグにtitle属性を付加すると、カーソルを重ねたときに移動先としてタイトルなどを示すことがあります。
style属性
要素にCSSを直接指定することができます。
dir属性
dirは「direction」の略称で、文章が進む方向を示します。日本語の場合は左から右に流れますが、アラビア語などの言語圏では右から左に流れるため、その場合はこの属性を「rtl（Right to Left）」などと指定します。
tabindex属性
WebページをTabキーで操作するときに、フォーカスが移動する順番を指定できます。
この時、通常は上から順番にフォーカスが移動しますが、この順番を入れ替えることができます。
<li><a href="" tabindex="3">link 01</a></li>
<li><a href="" tabindex="1">link 02</a></li>
<li><a href="" tabindex="2">link 03</a></li>この場合、「link 02→link 01→link 03」の順番にフォーカスが移動するようになります。
accesskey属性
フォームの入力パーツなどに、特別なキーの組み合わせを与えることができます。例えば、次のようなテキストフィールドを準備しましょう。
<inptu type="text" accesskey="A">このように指定すると、このテキストフィールドには「A」という文字を割り当てられます。Optionキー（Windowsの場合はAltキー）と組み合わせてこのキーを入力すると、テキストフィールドにフォーカスを当てることができます。
ページ内の検索窓などに、すばやくアクセスしたいときなどに便利です。
hidden属性
この属性を指定すると、要素を一時的に隠すことができます。ただし、HTMLソースからは削除されないため注意が必要です。
translate属性
先の通り、lang属性の設定によって自動翻訳機能が働くことがありますが、これを有効にしたり、無効にできる機能です。
contenteditable属性
要素を編集可能な状態にするかを指定します。ただし、JavaScript等と組み合わせないと編集した結果を保存しておくことはできません。
contextmenu属性
マウスの右クリックに相当する操作をしたときに表示されるメニューを指定します
draggable属性
要素をドラッグできる要素にするかを指定します
dropzone
ドラッグ可能な要素をドロップ（マウスを放すこと）できるエリアに指定します
列挙型属性と論理型属性
属性には、自由に値を指定できるものと、決められたものしか指定ができない属性があります。例えば、先の「translate」属性の場合、指定できる値は「yes」か「no」という値だけです。このように、決められた値を入れる属性を「列挙型属性」などと言います。
また、属性名だけを指定する場合があり、これを「論理型属性」といいます。「hidden」属性などがこれに当たります。
<... hidden>
属性名が付加されていれば有効になるというしくみです。ただし、論理型属性を次のように指定するケースがあります。
<... hidden="hidden">これはXHTMLの時の名残ですが、今はあえてこのような書き方をする必要はありません。