HTML構文指定とHTMLヘッダ
html要素と構文指定
HTML5文書ファイルは、冒頭で <!DOCTYPE html> によってHTML文書を使うという文書型宣言をし、これを読み込むブラウザにHTMLの文書であることを通知する。 引き続いて、html要素を指定する(その終了タグ</html>とで組となる)。 HTML要素はHTML文書構造(ドキュメントツリー)の最上位要素である。
このHTML要素では、利用するHTMLタグの種類の範囲を指定できる。 これをHTML構文指定という。 通常は、単に
<html>
である。 あるいは、日本語である指定して
<html lang="ja">
と記述してもよい。
HTML文書として、EPUB電子書籍への移行を考慮するなどの目的でXHTML文書(拡張子 .xhtml)とするならば、HTMLタグの名前空間を次のように指定する。 ただし、XML文書としての厳格なタグ運用が求められる(HTML Validatorで構文チェックする必要がある)。
<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要素には子要素として、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になって簡素に指定できるようになった。。
HTML文書の文字符号化は、head要素内で指定しさえすれば(かつ、ファイルがその文字コードで保存されていれば)、UTF-8以外の任意の文字符号化としてもよい。 しかし、一度に表示できる文字集合の大きさが大きければ、多くの言語を1つのページ内に記述できることを考えると、UTF-8が相応しい(ベターである)。
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>タグで指定する。
<itle>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> </html> <body> <h1>見出し1</h1> .... <h2>見出し2</h2> .... <h3>見出し3</h3> .... <h4>見出し4</h4> .... HTML本文 .... </body> </html>
Web色見本でWebブラウザで表示できる色を確認して、 CSSファイルmystyle.cssをダウンロードして演習2のように配置したうえで、好みの色になるように編集し、その結果をブラウザで確認しなさい。 mystyle.cssファイルでは、フォント色を color: white; とし、タグ<h1>の背景色を background-color: mediumorchid; などとしている。これらの色を好みに応じて変更するのである。
CSSファイルはpublic_htmlフォルダ内のどこに置いても構わないが、以下のように、head要素には目的のCSSファイルへのファイルパス記載が必要である(ファイル用途によって追加・使い分けるために複数のCSSファイルを用意してスタイルファイル用フォルダに収納するのが一般的である)。
<link rel="stylesheet" type="text/css" href="mystyle.cssのファイルパス" />
なお、このcssファイルでは body については { } と空白にしていている。 これを { background-color: 色; } として背景色を変更することもできる。 どぎつい色や配色は避けることが「読まれるWebページの鉄則」である。 実際に表示してから検討してみよう。 また、印刷した場合に(特にモノクロプリンター)見やすいことにも注意を払おう(この理由で筆者は、body の背景色を白のままにしている)。