HTML 要素

❮ 前章へ 次章へ ❯

HTML 文書は、HTML 要素で作られています。


HTML 要素

HTML 要素は、通常、開始タグと終了タグ、その間のコンテンツ から構成されます:

<tagname>content</tagname>

HTML 要素 とは、開始タグから終了タグまでの全てのものです:

<p>My first HTML paragraph.</p>
開始タグ 要素のコンテンツ 終了タグ
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>    

コンテンツのない HTML 要素は空要素と呼ばれます。<br>(改行を示す)要素などの空要素には、終了タグがありません。


ネストした HTML 要素

HTML 要素は、ネストする(要素が、要素を含む)ことができます。

全ての HTML 文書は、ネストした HTML 要素から構成されています。

この例には、4つの HTML 要素が含まれています:

<!DOCTYPE html>
<html>

<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>

</html>

Try it yourself ❯

HTML 例の説明

<html> 要素は、文書全体定義します。

それは、開始タグに <html> を、終了タグに </html> を持っています。

要素のコンテンツは、他の HTML 要素 (<body> 要素) です。

<html>

<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>

</html>

<body> 要素は、文書の本体定義します。

それは、開始タグに <body> を、終了タグに </body> を持っています。

要素のコンテンツは、2つのt HTML 要素 (<h1> と <p>) です。

<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>

<h1> 要素は、見出しを定義します。

それは、開始タグに <h1> を、終了タグに </h1> を持っています。

要素のコンテンツは、「My First Heading」です。

<h1>My First Heading</h1>

<p> 要素は、段落を定義します。

それは、開始タグに <p> を、終了タグに </p> を持っています。

要素のコンテンツは、「My first paragraph」です。

<p>My first paragraph.</p>

終了タグを忘れないように

終了タグを忘れた場合でも、HTML 要素によっては正しく表示されます:

<html>

<body>
  <p>This is a paragraph
  <p>This is a paragraph
</body>

</html>

Try it yourself ❯

上記例は、終了タグは省略可能と見なされるため、全てのブラウザで動作します。

これを信頼しないでください。終了タグを忘れた場合には、予期しない結果やはエラーが発生する場合があります。


空の HTML 要素

コンテンツを持たないHTML要素を、空要素と言います。

<br> は、終了タグのない空要素です(<br>タグは改行を定義します)。

チップ: XHTMLでは、全要素は閉じなければなりません。 <br />のように、開始タグの中にスラッシュを追加することが、空のXHTML要素(およびXML)を閉じる適切な方法です。

空要素は、 <br /> のように開始タグで「閉じる」ことができます。

HTML5 は、空要素を閉じることを必要としません。しかし より厳密な検証を望んでいるような場合や、文書を XML パーザにより 読取り可能にする必要がある場合には、すべての HTML 要素を閉じる必要があります。


HTML チップ: 小文字タグの使用

HTML タグは、大文字と小文字を区別しません:<P>は、<p>と同じであることを意味します。

HTML5 標準では、小文字タグを必要とはしていませんが、W3C は HTML4 において小文字を推奨しているとともに、 XHTML のようなより厳密な文書タイプは、小文字を要求しています。

W3Schools では、常に小文字他偶使用しています。


❮ 前章へ 次章へ ❯