ホームページ作成の基礎-HTMLファイルの書き方

      2017/05/24

今回はホームページ作成の基礎中の基礎「HTMLファイルの書き方」についてお話ししようと思います。ホームページを作成する場合、メモ帳などのテキストエディタを使ってタグを記述していくのですが、ここではHTMLファイルの基本をしっかり押さえて頂ければと思います。タグについては数も多いので、またの機会でご紹介させて頂きます。

HTMLの種類・バージョンを指定する

<!DOCTYPE HTML PUBLIC "">

まず、HTMLファイルを作成するにあたり、そのHTMLファイルがどのような決まり(HTMLの種類やバージョン)に基づいて書かれたHTMLファイルであるか、文頭(タグよりも前)でドキュメントタイプを宣言する必要があります。

この宣言を行うのが、<!DOCTYPE HTML PUBLIC "~~~">の部分です。HTML 4.01のルールではこの宣言は必須となっているので、必ず記述しなくてはいけません。また、このDTD(文書型定義)には、Strict(厳密型)、Transitional(移行型)、Frameset(フレーム設定用)の3種類あり、それぞれの記述方法や意味は以下のようになります。

Strict … HTML4.01のルールに厳密かつ正確に従う指定

非推奨の要素や属性は使用できません。また、要素の配置に関しても細かい決まりがあります。
フレームも使用することができません。

URIを含めた指定

URIを省いた指定

Transitional … Strictより緩やかな指定(フレームは使用不可)

非推奨の要素や属性の使用はできますが、フレームは使用することができません。

URIを含めた指定

URIを省いた指定

Frameset … Transitionalにフレームを加えた指定

Transitionalに加え、フレームを使用できるようにした指定です。フレームを設定する文書では、このDOCTYPE宣言を記述します。

URIを含めた指定

URIを省いた指定

HTML5での記述例

現在、主流とも言えるHTML5ではこれらの記述の必要がなくとてもコンパクトになりました。

これまでは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
と記述していたところが、HTML5では
<!DOCTYPE HTML>
たったこれだけで良いのです。

HTML文書であることを示す

<html></html>

<html>は、ここからHTML文書が始まることを示しています。<html>は開始タグなので、文書の最後に</html>でタグを閉じる必要があります。

また、この<html>タグに「lang=""」という属性を付けることで、HTMLファイル内の文章がどこの国の言語で書かれているかを指定することができます。日本語の場合、「lang="ja"」となります。この属性は省略しても、ブラウザの表示には影響しませんが、本来は記述すべき属性です。

サイトのヘッダー情報であることを示す

<head></head>

HTMLの<head></head>の中に記述された情報は、ブラウザの表示にはあまり関係のない部分ですが、サイトのタイトルやメタ情報など、とても重要な役割を持っている部分なので記述した方が良いです。
位置は<html>タグ直下に記入します。

<head>内に記述しているタグの説明は今回は割愛させて頂きます。

ホームページの本文の始まりを示す

<body>

本文の始まりを表すタグです。このタグによって囲まれた部分が、実際にブラウザで表示されます

以上がHTMLファイルの基礎の部分になります。次回は<head></head>の中に記述するメタ情報や<body></body>の中の本文でよく使用されるタグについて解説したいと思います。

 - HTML・CSS