メインコンテンツへスキップ

HTMLの構文

1.HTMLの構文

HTMLを書くには、
記述の規則を
知る必要があります。

HTMLは、マークアップ言語でありテキスト(文字)データ中に特定の記号で囲まれたタグ(tag)と呼ばれる表記を用いて要素(エレメント・Element)を記述しています。
この要素の種類や配置の仕方で、データの構造や見栄えなどを記述しています。

尚、HTMLのタグ(tag)は省略できる物があり、その関係からタグが１つもないHTML文書も成り立ちます。 故に、タグなどのHTMLの規則を知らなくても、HTML文書は書けます。
しかし、意図した記述が可能とは限りません。 意図せずHTMLの規則によって別の表現になってしまう事もあります。
意図した表記をする為にも、規則は知りましょう。

2.コメント

<!-- : コメントの始まり
-->  : コメントの終わり

処理の対象とされない
記述です。

ここでのコメントとは、データやタグなどに対しての説明やメモ等をいいます。

まず comment を日本語訳してみるとカタカナでコメントとなり、さらにコメントという語句を調べると説明(よくわかるように述べること。)とあります。
コメントとは別の訳をと調べると付注(注をつけること。)とあり、さらに注という語句を調べると「本文中の語句や事項などについて、補足したり詳しく説明したりすること。また、その説明。」とあります。

HTMLでは、<!--でコメントが始まり --> でコメントが終わります。

「HTMLのコメント」で、HTML のコメントの付け方とか注意点などを記述しています。

3.文書型宣言

文書型宣言は、
SGMLやXML, HTML文書を、
文書型定義(DTD)と
結びつけるための宣言です。

HTMLでは、HTML文書の前(HTML開始タグの前)に文書型宣言を書きます。

DTD とは、Document Type Definition (文書型定義) の略語で、SGMLや XML文書において、どのような要素をどのように配置することが許されるかの定義です。(HTMLは、SGMLを元に開発された言語です。)

文書型宣言 (Document type declaration)は、HTML文書の前(HTMLタグの前)に書くべき宣言であり、HTMLタグではありません。SGML由来のマークアップ宣言 (markup declaration) です。大文字と小文字を区別しないので、<!doctype html> とか <!DOCTYPE HTML> でも同じです。

HTML5はSGMLベースではなくなったので、文書型定義(DTD)と結びつけるという事はなくなりました。HTML5では DOCTYPEスイッチ の為に記述します。

「文書型宣言」で、SGMLやXML, HTML文書を文書型定義(DTD)と結びつけるための宣言に関しての記述をしています。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. </head>
  5. <body>
  6. </body>
  7. </html>

文書型宣言 (Document type declaration)は、HTML文書の前(HTMLタグの前)に書くべき宣言であり、HTMLタグではありません。SGML由来のマークアップ宣言 (markup declaration) です。大文字と小文字を区別しないので、<!doctype html> とか <!DOCTYPE HTML> でも同じです。

HTML5はSGMLベースではなくなったので、文書型定義(DTD)と結びつけるという事はなくなりました。HTML5では DOCTYPEスイッチ の為に記述します。

4.HTMLの要素

要素は、
HTMLではそれを構成する
元の事です。

要素 とは、物事を成り立たせる元の事です。 HTMLでは、それを構成する元の事を要素(エレメント・Element)と言っています。HTMLは要素の集まりで、それぞれの要素がいくつかの属性で修飾される事があります。それぞれの要素がコンテンツを持ったりもします。

HTMLは、マークアップ言語でありテキスト(文字)データ中に特定の記号で囲まれたタグ(tag)と呼ばれる表記を用いて構造や見栄えなどを記述しています。
開始タグに属性を記述する事で、要素を修飾する事があります。また、コンテンツを持たない要素もあり終了タグはなく開始タグのみの要素もあります。

「HTMLの要素」で、HTMLを構成する元である「要素」に関しての記述をしています。

  1. <a href="./index.htm">TOP PAGE</a><hr class="ehrSample">
  • <a href="./index.htm">TOP PAGE</a> : a要素
    • <a href="./index.htm"> : a要素開始タグ
    • TOP PAGE : テキスト文字列。コンテンツ
    • </a> : a要素終了タグ
  • <hr class="ehrSample"> : hr要素
    • <hr class="ehrSample"> : hr要素開始タグ
    • コンテンツはない
    • hr要素終了タグはない。記述は禁止

HTMLはタグ(tag)で要素を表します。タグ中の改行などはコードの見た目やコンテンツには関わりますが要素を表すのには関わりません。

5.文字参照

文字参照は、
HTMLなどで
直接記述できない
文字や記号を表記する
方法です。

文字参照 とは、HTMLなどで直接記述できない文字や記号を表記する方法です。HTMLにおける文字参照には、表記方法により数値文字参照と文字実体参照の二種が存在します。

「文字参照」で、HTMLなどで直接記述できない文字や記号を表記する「方法」に関しての記述をしています。

文字実体参照の一部例示

文字 文字実体参照 概要 説明
< &lt; 小なり記号
(半角) 		開始タグ開始区切り子, 終了タグ開始区切り子, マーク宣言開始区切り子の一部などで使用されています。
<body>タグのサンプル</body> <!--コメントのサンプル-->
> &gt; 大なり記号
(半角) 		開始タグ終了区切り子, 終了タグ終了区切り子, マーク宣言終了区切り子などで使用されています。
<body>タグのサンプル</body> <!--コメントのサンプル-->
& &amp; アンパサンド
(半角) 		文字参照で使用されています。
&lt;body&gt; タグの文字参照での記述例
" &quot; 二重引用符
(半角) 		属性値を囲むなどで使用されています。
<body title="属性値のサンプル">
' &apos; 一重引用符
(半角) 		属性値を囲むなどで使用されています。
<body title='属性値のサンプル'>
  &nbsp; ノーブレーク
スペース 		折り返しを起こさない (ホワイトスペースではない) 空白
&nbsp; は制御コードなので、空白そのままを文字参照で表したい場合は &#32; と数値文字参照を用います。

6.HTML文書

HTML文書は、
HTML言語で書かれた
情報のまとまりです。

コンピュータの文書は、ファイルによって扱われている事が多いのでHTML文書はHTMLファイルに保存されているものと思っても差し支えないかと思います。HTML言語はコンピュータ言語である訳ですし。
プログラムがデータを、HTML形式に加工して送信するという方法などもあるので、全てが保存されている訳ではありませんが、そこまで考える必要はないでしょう。

尚 HTML言語のタグは省略が可能なものもあるので、ファイル内にタグがなくてもHTML言語としては間違いではありません。その点は、注意が必要です。

「HTML文書」のページで、改めて記述しています。