HTMLの基本構造

HTMLの基本構造

HTMLの基礎について解説します。

HTMLとは 「HyperText Markup Language」 の頭文字を取ったものです。

HyperTextとは、「文字にURLを埋め込むことのできる文章」のことです。

「HyperTextに目印を付ける(Markup)言語」がHTMLの日本語訳となります。

 

要するにホームページをつくる言語がHTMLです。

HTMLを使うことで画像を埋め込んだり、リンクを埋め込んだりしたりできるわけです。

ここではHTMLの基本構造について説明します。

HTMLの基本構造

HTMLの基本構造は以下のようになっています。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトルです。</title>
<head>
<body>
<p>ここに本文がきます。</p>
</body>
</html>

実際に、メモ帳に以上の文章を書いて、ファイル名を「○○○.html」として保存してブラウザ(Internet Explorerなど)で開いてみてください。

以下のようにタイトル部分に「タイトルです。」が表示されて、本文に「ここに本文がきます。」が表示されます。

サンプル

このようにHTMLを使えば簡単にホームページを作成することができます。

上記のHTMLファイルにでてくる「<html>とか<body>とかいうのはなに?」   と思われる方もいるでしょう。そこで、これらの文法について簡単に説明します。

タグとは

はじめにHTMLの基本概念であるタグについて解説します。

<html>とか、<body>とかはタグと呼ばれます。

タグは<命令>ではじまり</命令>で終わる

という構造になっています。 例えば<html>タグなら、<html>ではじまり</html>で終わります。

 

タグの基本を理解していただいたところで、htmlタグ、headタグ、titleタグ、bodyタグについてそれぞれ解説します。

htmlタグ

<html>タグは、HTMLの文章であることを意味します。

この<html>タグにより、<html>から</html>で囲まれた部分はHTML文章であることがわかります。 まあ、おまじないのようなものです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトルです。</title>
<head>
<body>
<p>ここに本文がきます。</p>
</body>
</html>

headタグとtitleタグ

headとは日本語で「頭」という意味です。 HTMLでもHTMLの頭の部分にきます。

headの部分には、文章の補足部分が書かれます。

たとえば、タイトルがその例です。 titleタグはheadの中に書かれて、タイトルを指定することができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトルです。</title>
<head>
<body>
<p>ここに本文がきます。</p>
</body>
</html>

ここで、4行目に出てくるmetaタグはHTMLファイルの補足情報を与えるタグです。

今回の場合は、このHTMLファイルのテキスト形式を指定しています。

  1. http-equiv=”Content-Type”:HTMLファイルの種類が何かを以下に定義する
  2. text/html:HTMLファイルを指定
  3. charset=”UTF-8″:UTF-8というテキスト形式でファイルを作っていることを指定

text/htmlのようにファイル形式はMIME(Multipurpose Internet Mail Extensions,マイム)タイプと呼ばれています。

MIMEタイプにより、ファイルの種類を指定できます。以下に一覧表を表記しておきます。

 MIMEタイプ
MIMEタイプ 拡張子 ファイルの種類
text/plain  .txt 普通のテキストファイル
text/html .html .htm HTMLファイル
text/css .css CSSスタイルシートファイル
text/javascript .js JavaScriptファイル
image/gif .gif GIFファイル
image/png .png PNGファイル
image/jpeg .jpg .jpeg JPEGファイル
video/mpeg .mpeg .mpg MPEGファイル
video/quicktime .qt .mov Quicktimeファイル
application/pdf .pdf Adobe PDFファイル
application/msword .doc Microsoft Wordファイル
application/zip .zip zipファイル

bodyタグ

bodyタグは文章の本文を指定します

ホームページをつくる際は、このbodyタグの中身を主につくることになります。

bodyタグ内の情報がブラウザに表示されます。

そして、pタグは文章の段落を示すタグです。<p>と</p>で囲むことで指定できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトルです。</title>
<head>
<body>
<p>ここに本文がきます。</p>
</body>
</html>

 

DTD

最後に一番初めにでてくる

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

について説明します。

この文章はDocument Type Declaration(DTD、文章型宣言)と呼ばれています。

ファイルの種類や、HTMLのバージョンを記述するものです。

ここでは、バージョンがHTML4.01で、DTDがTransitionalであることを示しています。

 

HTMLのバージョンは主に

  1. HTML5:主流になりつつあるHTMLバージョン
  2. XHTL 1.0
  3. HTML 4.01

があります。

 

また、HTML4.01やXHTML1.0ではDTDに

  1. Strict:非推奨の要素や属性を含まない
  2. Transitional:非推奨の要素や属性を含む
  3. Frameset:非推奨の要素や属性・フレーム設定用の要素や属性を含む

の3種類があります。この番号順に、縛りがゆるくなります。

HTMLのバージョン移行の過程で、互換性を持たせるためにこのようなことが起こっています。

 

もっとも新しいHTMLのバージョンはHTML5です。

この場合は、

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>タイトルです。</title>
</head>
<p>ここに本文がきます。</p>
<body>
</body>
</html>

と簡単にDTDやテキスト形式を記述できます。今後は徐々にHTML5へ移行すると思うので、HTML5でサイトを作成していくのもありだと思います。

ただし、

古いブラウザの場合、HTML5をうまく表示できない

というリスクも頭にいれておいてください。

 

以下、様々なHTMLのバージョンと指定方法を示しておきます。

HTMLのバージョンと指定方法
バージョン DTD doctype宣言
HTML5 <!DOCTYPE html>
XHTML 1.0 Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 Frameset <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Strict//EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

サイトのhtmlファイルを見る方法

以上のような基本構造によって、ホームページを作成します。

実際に、様々なホームページのhtmlファイルを見るとそうなっています。

「どうやってhtmlファイルを見るの?」   と思われるかたもおられるかもしれませんが、右クリックして「ページのソースを表示」を選べば見ることができます。

いろいろなサイトのhtmlファイルを見て研究するのもいいと思います。

ただし、

htmlファイルをすべてコピーすることは著作権に反するのでしてはいけません。

あくまでも参考にする程度にしておきましょう。

著者:安井 真人(やすい まさと)