http://www.isc.meiji.ac.jp/~mizutani/
HTML要素とHTML構文指定
html要素と構文指定
HTML5文書ファイルは、冒頭で <!DOCTYPE html> によって、ブラウザにHTML5の文書であるあることを文書宣言してする。 引き続いて、html要素を指定する（その終了タグ</html>とで組となる）。 HTML要素はHTML文書構造（ドキュメントツリー）の最上位要素である。
このHTML要素では、利用するHTMLタグの種類の範囲を指定できる。 これをHTML構文指定という。 通常は、
<html lang="ja">
と記述するが、さらに HTML文書構造を一層厳格に定めたXMLに準拠させ、さらにEPUB電子書籍への移行を考慮して、HTMLタグの名前空間を次のように構文指定したHTML要素を使うことにする（将来の二度手間の防止にたいへん役立つわけだ）。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
タグの名前空間
HTMLファイルは、ドキュメントツリーとして表したときに、html要素をルートとした様々な文書単位の階層として分解される。 そのような文書単位やリンク機能などを表すためにHTMLタグが使われる。 どのようなHTMLタグの集まりが名前空間（ns: name space）である。 これによって、HTML構文が定まる。 上のhtml要素のオプションでは、その名前空間をXMLの部分集合として、上のようにXHTML規格で定めた xmlns=.... とEPUBで定めた xmlns:epub=.... を使うと宣言したのである。
言語指定
html要素におけるオプションでは言語属性 lang="言語" が指定できる。 上のように、日本語の場合は次の言語コードを使う。
lang="ja"
言語コードは必ずしも否定が義務づけられてはいないが、指定しておくと非本質的な問題発生を未然に防ぐことになる。
lang属性で指定できる（主に利用する）言語コードには、日本語（ja）以外に、たとえば次のような言語コードを指定できる。
| 英語（en） | 中国語（zh） | 朝鮮語（ko） | フランス語（fr） | ドイツ語（de） |
| イタリア語（it） | スペイン語（es） | ポルトガル語（pt） | ロシア語（ru） | アラビア語（ar） |
html要素の子要素
html要素は2つの子要素、head要素とそれに続くbody要素を持つ。 body要素内にはブラウザで整形表示されるHTML文書本文を記載するのであるが、それに先立つhead要素にはbody要素に関わるさまざまな情報を指定する（文字符号化のような必須情報やレイアウトに関するオプション情報などを含む）。
HTMLファイルは、次のような構造をもっている。
この文書構造は、HTMLソースファイルとして、日本語の場合では次のように記述され、拡張子 .html を付けて保存される。 ここではさらに、文字コートをutf-8と宣言している（UTF-8でファイルが保存されねばならない）。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> .... さまざまな指示 .... </head> <body> .... HTML本文 .... </body> </html>
head要素
html要素には子要素として、head要素とbody要素の2つの要素だけを持つことができる。 head要素には次のような内容が記述できる。
文字コード
HTMLファイルの文字コードは原則UTF-8で書き、head要素内で次のように文字コードを明記する。
<meta charset="utf-8" />
metaタグは単独で用いられる（</meta>とうようには使わない）ために、<meta ......... /> というように、最後が「 />」であることに注意する。 XML名前空間を使っているので、単独で用いられるタグでは常にこのように記述しなければならない。
これまでのように、<meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> のように書くこともできるが、HTML5になって簡素に指定できるようになった。。
CSSの指定
CSS（Cascade Style Sheet）によってHTMLファイルのレイアウト情報を細かく調整することができる。
CSSをHTMLファイル内部で指定する内部参照の場合（非推奨）と、HTMLファイルにではなく、外部ファイルとして記述したCSSファイルを読み込み指定する外部参照（こちらを推奨）の2つの方法がある。 外部にCSSファイルを作成しておき、これを複数のHTMLファイルから読み込む方が使い回しができ、簡素な記述が可能になる。 また、内部参照と外部参照とを組み合わせても構わない。
内部参照の場合：
<style type="text/css"> .... CSSの定義の記述 .... </style>
外部参照の場合：
<link rel="stylesheet" type="text/css" href="外部CSSファイルへのファイルパス" />
ファイルパスはローカルマシン内だけでなくインターネット上のファイルをURLで指定してもよい（linkタグも単独で用いられるので、最後は「 />」であることに注意する）。
Javascriptの読み込み
インタラクティブなWebページや高機能な処理を行うためにJavascriptが多用される傾向にある。 Javascriptを記述したファイルを読み込むために、つぎのようにhead要素内で記述する。 <script>タグを</script>タグで閉じることに注意する。
<script type="text/javascript" src="外部Javascriptファイルへのファイルパス"></script>
ファイルパスはローカルマシン内だけでなくインターネット上のファイルをURLで指定してもよい。
Webページのタイトル
HTMLファイル毎に1つのWebページが対応し、ブラウザウィンドウ上部にページタイトルが表示される。 Webページタイトルを<title>タグで指定する。
<title>Webページのタイトル</title>
HTMLファイルの具体例
以上をまとめると、具体的には次のようなHTMLファイルになる。 ここでは、HTMLファイルをUTF-8文字コードで保存し、CSSファイル mystyle.css を外部参照し、Javascriptの読み込みはコメントアウトした。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <!-- <script type="text/javascript" src="外部Javascriptファイルへのパス"></script> --> <title>Webページのタイトル</title> </head> <body> <h1>見出し1</h1> .... <h2>見出し2</h2> .... <h3>見出し3</h3> .... <h4>見出し4</h4> .... HTML本文 .... </body> </html>
Web色見本でWebブラウザで表示できる色を確認して、 CSSファイルmystyle.cssを好みの色になるように編集し、その結果をブラウザで確認しなさい。 tsuda.cssファイルでは、フォント色を color: white; とし、タグ<h1>の背景色を background-color: forestgreen; などとしている。これらの色を好みに応じて変更するのである。 ただし、headタグ内に上の例のようにCSSファイルへパス記載が必要である（ファイル用途によって追加・使い分けるために複数のCSSファイルを用意してスタイルファイル用フォルダに収納するのが一般的である）。
<link rel="stylesheet" type="text/css" href="mystyle.cssへのファイルパス" />
なお、このcssファイルでは body については { } と空白にしていている。 これを { background-color: 色; } として背景色を変更することもできる。 どぎつい色や配色は避けることが「読まれるWebページの鉄則」である。 実際に表示してから検討してみよう。 また、印刷した場合に（特にモノクロプリンター）見やすいことにも注意を払おう（この理由で筆者は、body の背景色を白のままにしている）。
