今回はホームページ作成の基礎中の基礎「HTMLファイルの書き方」についてお話ししようと思います。ホームページを作成する場合、メモ帳などのテキストエディタを使ってタグを記述していくのですが、ここではHTMLファイルの基本をしっかり押さえて頂ければと思います。タグについては数も多いので、またの機会でご紹介させて頂きます。
HTMLの種類・バージョンを指定する
<!DOCTYPE HTML PUBLIC “”>
まず、HTMLファイルを作成するにあたり、そのHTMLファイルがどのような決まり（HTMLの種類やバージョン）に基づいて書かれたHTMLファイルであるか、文頭（タグよりも前）でドキュメントタイプを宣言する必要があります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> </body> </html>
この宣言を行うのが、<!DOCTYPE HTML PUBLIC “～～～”>の部分です。HTML 4.01のルールではこの宣言は必須となっているので、必ず記述しなくてはいけません。また、このDTD（文書型定義）には、Strict（厳密型）、Transitional（移行型）、Frameset（フレーム設定用）の3種類あり、それぞれの記述方法や意味は以下のようになります。
Strict … HTML4.01のルールに厳密かつ正確に従う指定
非推奨の要素や属性は使用できません。また、要素の配置に関しても細かい決まりがあります。
フレームも使用することができません。
URIを含めた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
URIを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Transitional … Strictより緩やかな指定（フレームは使用不可）
非推奨の要素や属性の使用はできますが、フレームは使用することができません。
URIを含めた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
URIを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Frameset … Transitionalにフレームを加えた指定
Transitionalに加え、フレームを使用できるようにした指定です。フレームを設定する文書では、このDOCTYPE宣言を記述します。
URIを含めた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
URIを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
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”」となります。この属性は省略しても、ブラウザの表示には影響しませんが、本来は記述すべき属性です。
<html lang="ja"> <head> </head> <body> 本文ここから </body> </html>
サイトのヘッダー情報であることを示す
<head></head>
HTMLの<head></head>の中に記述された情報は、ブラウザの表示にはあまり関係のない部分ですが、サイトのタイトルやメタ情報など、とても重要な役割を持っている部分なので記述した方が良いです。
位置は<html>タグ直下に記入します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>ホームページ作成の基礎－HTMLファイルの書き方 - フリーランスWEB屋の備忘録</title> <link type="text/css" media="all" href="https://column.noith.com/style.css" rel="stylesheet" /> <link rel="canonical" href="https://column.noith.com/html-kakikata"> ・ ・ ・ </head> <body></body> </html>
<head>内に記述しているタグの説明は今回は割愛させて頂きます。
ホームページの本文の始まりを示す
<body>
本文の始まりを表すタグです。このタグによって囲まれた部分が、実際にブラウザで表示されます
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head></head> <body> この部分が実際の本文 </body> </html>
以上がHTMLファイルの基礎の部分になります。次回は<head></head>の中に記述するメタ情報や<body></body>の中の本文でよく使用されるタグについて解説したいと思います。
コメント