HTMLの属性一覧

HTMLでよく使う属性を、対象タグ・意味とあわせて一覧でまとめます。全要素で使えるグローバル属性から、class・lang・styleなど個別の属性の値まで確認できます。

HTML属性一覧

HTMLの属性は、タグに追加の情報や設定を与えるための記述です。属性は大きく、全ての要素で使えるグローバル属性と、特定の要素だけで使える要素固有の属性の2種類に分かれます。

グローバル属性／要素固有の属性

まずは、どのタグにも書けるグローバル属性の一覧です。

続いて、特定のタグと組み合わせて使う主な要素固有の属性です。

ここに挙げた属性を押さえれば、日常のコーディングの大半に対応できます。全属性の網羅的な一覧はMDNのHTML属性リファレンスで確認できます。

class属性とよく使うクラス名

HTMLに「決められたクラス名の一覧」は存在せず、class属性の値は自分で自由に命名します。ただし実務では、役割ごとに定番の名前が広く使われています。

よく使われる定番のクラス名は以下の通りです。

クラス名は半角英数字とハイフンで、「red」のような見た目ではなく「error」のような役割で名付けるのが指針です。役割で命名しておくと、後からデザインを変えてもHTMLを直さずに済みます。

lang属性の値一覧

lang属性には、BCP 47と呼ばれる言語コードを指定します。BCP 47とは、言語を表すコードの国際的な取り決めのことで、日本語ページなら<html lang="ja">のようにhtmlタグへ指定するのが基本です。

主な言語コードの一覧は以下の通りです。

lang属性はブラウザの翻訳機能や音声読み上げの精度に影響するため、ページの言語と必ず一致させます。地域を区別する必要がなければ、jaやenのような2文字のコードだけで十分です。

style属性で使う主なプロパティ

style属性には、CSSのプロパティと値を「プロパティ: 値;」の形式でそのまま書きます。style属性専用の一覧があるわけではなく、CSSで使えるプロパティ全般を指定できます。

style属性でよく使うプロパティは以下の通りです。

次のコードは、class属性とstyle属性を1つの段落に指定した完全な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性の練習</title>
</head>
<body>
<p class="note" style="color: red; font-size: 18px;">class属性とstyle属性を指定した段落です。</p>
</body>
</html>

ブラウザで開くと、赤色・18pxの文字で段落が表示されます。継続的に使う装飾はstyle属性ではなくCSSファイルにまとめて書くと、HTMLが読みやすく保てます。