HTMLファイルの基本構造

HTMLとは”Hyper Text Markup Language”の略でWebページの土台となるファイルを作成する言語です。Webページに表示したい文章などを「<」と「>」で挟まれた「タグ」と呼ばれる特殊な文字列で囲んで書いていきます。

「タグ」には様々な種類があり、種類によって「これは見出しです」「これは文章です」「これはリンクで、クリックすると指定したページに移動します」などいう指示をしています。

Webサイトは、このようにコンピューターがページを表示させるための言語（HTML）を使って作られています。

HTMLファイルの構造

HTMLファイルには、Webブラウザー上に表示させるためのコード（コードと文字など）と、コンテンツを正しく表示させるためのコードがあります。

これらには一定の決まりに基づいて配置されています。前回「“Visual Studio Community”の使い方」で最後にコピペした「コード」をもとに説明します。

上の図がHTMLファイルの基本的な構造で、<html>と</html>の間がHTMLの文章だということを表しています。

HTMLの文章の中は大きく分けて<head>と<body>があり、<head>内には情報、<body>内には実際に表示したいコンテンツを書きます。（Webブラウザー上に表示に表示されるのは<body>内に書き込んだコンテンツで、<head>内の書き込みは表示されません）

「!DOCTYPE」とは文書の解釈に使うDTD（Document Type Definition：文章型定義）を宣言するもので、<!DOCTYPE html>は、これからDTDを宣言することを示し、その文書タイプが「HTML」であるという意味です。

HTML文書を作成するとき、HTMLタグよりも先頭にまず書くべきなのが<!DOCTYPE html>でドクタイプ（doctype）宣言と言います。

現在主流になっているバージョン「HTML5」で解説していきます。

ドクタイプ宣言のすぐ後に記述し、<html>から始まり</html>で閉じます。「lang」はWebページの言語を表し「ja」は日本語の文章であることを示しています。

“Visual Studio”のデフォルトは「en」（英語）になっているので、日本語の文章を書く場合は「ja」に変更しましょう。

言語設定のすぐ後ろに記述してある「xmlns=”http://www.w3.org/1999/xhtml”」はデフォルトのままにしておきましょう。

hesd(ヘッド）はページのタイトルや説明文、使用する外部ファイルのリンクなど、ページの情報を記述します。

ここの記述はブラウザーに表示されません。

「charset=”utf-8″」とは、文字コードを「UFT-8」に指定するもので、これが正しく表記されていないと文字化けの原因になります。

日本では「UTF-8」、「Shift_JIS」、「EUC-JP」の３つがよく使われている文字コード（文字エンコーディング）ですが、HTMLではUTF-8を使用することが推奨されています。

ページのタイトルを記述します。「○○○〇」の部分は日本語でも英語でもかまわず記述すれば、そのままブラウザーのタブの部分にタイトルとして表示されます。

“○○○”はページの説明文を書くところで、メタディスクリプション(meta description)といいます。100文字程度の文章で表した「概要」や「要約」を記述すると、検索エンジンの検索結果一覧に表示されます。（書き込んだ文字がそのまま表示されない場合があります）

HTML文章の本体部分で、ここに文章を入力したり画像を挿入することでブラウザーに表示されます。

基本的には「<」と「/>」で挟まれた「タグ」と、いくつかの属性を用いて記述していきます。

次回からは、<body>～</body>のHTMLのかき方について説明します。