HTML id 属性

例

JavaScript でテキストを操作するために id 属性を使用します：

<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

Try it Yourself ❯

他の "Try it Yourself" の例が下にあります。

定義と用法

id 属性は、HTML 要素にユニークな id を指定します（値は HTML 文書内でユニークでなければなりません）。

id 属性は、大抵の場合、スタイルシート内のスタイルをポイントするため、また、JavaScript によって（HTML DOM を通して）特定の id を持つ要素を操作するために使用されます

ブラウザ・サポート

属性
id	Yes	Yes	Yes	Yes	Yes

HTML 4.01 と HTML5 の相違点

HTML5 では、id 属性は全ての HTML 要素で使用することができます（これは、全ての HTML 要素に対して妥当です。しかし、それは必ずしも有益な訳ではありません）。

HTML 4.01 での id 属性は、<base>、<head>、<html>、<meta>、<param>、 <script>、<style>、<title> では使用できません。

注: HTML 4.01 には、id 値の内容に大きな制限があります（たとえば、HTML 4.01 では id 値を数字から始めることはできません）。

構文

<element id="id">

属性値

値	説明
id	要素にユニークな id を指定します。命名規則：少なくとも一つの文字が含まれていなければなりません空白文字を含めることはできません HTML では、すべての値は大文字小文字を区別しません

その他の例

例 1

ページ内の指定した id を持つ要素にリンクするために id 属性を使用します

<html>
<body>

<h2><a id="top">Some heading</a></h2>

<p>Lots of text....</p>
<p>Lots of text....</p>
<p>Lots of text....</p>

<a href="#top">Go to top</a>

</body>
</html>

Try it Yourself ❯

例 2

CSS でテキストをスタイルするために id 属性を使用します：

<html>
<head>
<style>
#myHeader {
color: red;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">W3Schools is the best!</h1>

</body>
</html>

Try it Yourself ❯

HTML id 属性

例

定義と用法

ブラウザ・サポート

HTML 4.01 と HTML5 の相違点

構文

属性値

その他の例

例 1

例 2

関連ページ