HTML 書式

 

2018年03月08日

HTMLの基本的な書式と、最低限知っておくべきHTMLの用語(タグ、要素、属性、DOCTYPE宣言、コメント、文字参照)について説明します。


目次

  1. HTMLファイルとは
  2. タグと要素
  3. 属性
  4. 要素の構造
  5. DOCTYPE宣言
  6. コメント
  7. 文字参照

HTMLファイルとは

  • HTMLファイルとは、HTMLが記述されたテキストファイルのことを指します。
  • ファイルの拡張子は「.html」にする必要があります(例えば「index.html」のようにします)。

 

タグと要素

  • タグとは、山括弧(「 < 」と「 > 」)で囲んだ部分を指します。
  • 括弧の中の文字をタグ名、もしくは要素名と呼びます。
  • タグには開始タグと、要素名の前にスラッシュ( / )がある終了タグがあります。
HTML要素の構成
タグで囲った範囲が要素
  • 上記の図の場合、<p>の部分が開始タグ、</p>の部分が終了タグです。
  • そして、開始タグと終了タグをひとまとめにして要素と呼びます。

 

空要素

  • 要素の中には、開始タグだけで表現する空要素というものもあります。
  • 空要素は、開始タグのみを指定し、終了タグは指定できませんので注意してください。
  • 以下に、空要素の記述例を示します。
空要素の記述例
<br>
  • 下記のように、タグの「 > 」の直前にスラッシュ(/)を入れることもできます。
タグの>の直前にスラッシュを入れることも可能
<br />

 

 

属性

  • 属性とは、要素の持つ付加的な情報をタグの中に与えたものです。
  • 属性を使うと、タグに対してより細かな情報を指定できるようになります。
HTML属性の構成
開始タグに属性が指定できる
  • 属性は、上記の図のとおり、開始タグのタグ名の後に、空白文字で区切って属性を指定します。
  • 属性は、属性名="属性値"といった書式で表し、順不同で複数指定することも可能です。
  • 属性値に、「空白文字」「 = 」「 " 」「 ' 」「 < 」「 > 」「 ` 」が含まれない場合、属性値を囲う引用符を省略することができます。

 

用語解説 : 空白文字
半角スペース、タグ、改行をまとめて空白文字と呼びます。

 

 

論理型属性

  • 論理型属性(Boolean Attribute)とは、属性名だけ(属性値は不要)で利用できる属性です。
  • 属性名を定義すると“真(true)”になり、定義しないと“偽(false)”になります。
  • 下記は、論理型属性の1つであるhidden属性についての記述例です。="属性値"の記述は不要です。
論理型属性を使ったHTML記述例
<p hidden>これは本文です。</p>
用語解説 : 真 / 偽
とは「論理的に正しい」ことを意味し、とは「論理的に正しくない」ということを意味しています。論理型属性のケースにおいては、”真”の場合は属性が有効になり、”偽”の場合は属性が無効になる、ぐらいに覚えておけばよいでしょう。

 

  • 下記のように、属性値を空で指定することができます。
  • この場合は、“真(true)”になります。
空の属性値を指定しても問題ありません
<p hidden="">これは本文です。</p>
  • 下記のように、属性値に属性名を指定することもできます。
  • この場合も、“真(true)”になります。
属性値に属性名を指定しても問題ありません
<p hidden="hidden">これは本文です。</p>

 

 

列挙型属性

  • 列挙型属性(Enumerated Attribute)とは、あらかじめ決められたキーワードの属性値のみを指定できる属性です。
  • 下記は、列挙型属性の1つであるdraggable属性の記述例です。
  • draggable属性“true”“false”“auto”のいずれかを指定できます。
列挙型属性を使ったHTML記述例
<p draggable="true">これはドラッグできるテキストです。</p>
  • 下記の通り、列挙型属性値のキーワードは、大文字で書いても小文字で書いても問題ありません。
キーワードは大文字でも問題ありません
<p draggable="TRUE">これはドラッグできるテキストです。</p>

 

 

要素の構造

  • (空要素ではない)要素の中には、別の要素を含めることができます。
  • 下記は、body要素の中にp要素を含めている例です。
body要素の中にp要素を含めている
<body>
  <p>これは本文です</p>
</body>
  • 要素の中に入れることのできる要素数は、1つだけではなく複数でも問題ありません。
  • 階層数を3階層以上にしても問題ありません。
  • つまり下記のような記述も問題ありません。
複数の要素を含めても問題ない
<body>
  <article>
    <p>これは本文です</p>
  </article>
  <aside>
    <p>これは補助コンテンツです</p>
  </aside>
</body>
  • 下記のように、入れ子構造(同じものが内部に入っている構造)が崩れる書き方はできませんので注意してください。
入れ子構造が崩れるような書き方はできない
<body>
  <p>これは本文です</body>
</p>

 

 

DOCTYPE宣言

  • DOCTYPE宣言とは、ブラウザの表示モードを「標準モード」にするということを宣言しています。
  • 具体的には、下記のような文字列をHTMLファイルの1行目に記述します。
DOCTYPE宣言
<!DOCTYPE html>
  • DOCTYPE宣言は、大文字で書いても小文字で書いても問題ないです。
  • 下記のようにすべて大文字でも問題ありません。
すべて大文字で書いてもOK
<!DOCTYPE HTML>
  • 下記のようにすべて子文字でも問題ありません。
すべて子文字で書いてもOK
<!doctype html>

 

 

コメント

  • コメントとは、コードの中に書き込むことのできるメモのようなものです。
  • コメント入りのHTMLをブラウザで表示させた場合、コメントが画面に表示されることはありません。
  • 下記のように、「<–」と「–>」で囲んだ範囲がコメントとなります。
コメントの記述例
<-- これはコメントです -->
  • コメントは、下記のように改行が入っても問題ありません。
コメントは改行を入れてもOK
<--
  これはコメントです
  -->

 

 

 

文字参照

  • 文字参照とは、HTMLにとって特別な役割を持つ文字(または環境によって、キーボード入力が難しい文字など)を表示させるための書式です。
  • 文字参照の書式には、以下の3つがあります。
    • 名前指定文字参照
    • 10進数数値文字参照
    • 16進数数値文字参照
  • いずれの書式においても、&で開始し、;で終了するというルールで記述します。
  • 以下は、よく利用される文字の記述例です。

 

主な文字参照の一覧
表示文字 名前指定 10進数 16進数
(半角スペース) &nbsp; &#160; &#xA0;
< &lt; &#60; &#x3C;
> &gt; &#62; &#x3E;
" &quot; &#34; &#x22;
& &amp; &#38; &#x26;
© &copy; &#169; &#xA9;
® &reg; &#174; &#xAE;
補足説明 :
&lt;ltは、less than(より小さい)の略です。同様に、&gt;gtは、greater than(より大きい)の略ですので、これを意識しておくと、覚えやすくなるでしょう。

 

 

 

 

Programming Style