HTMLの基本構造
2012年3月29日：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ファイルのテキスト形式を指定しています。
- http-equiv=”Content-Type”：HTMLファイルの種類が何かを以下に定義する
- text/html：HTMLファイルを指定
- charset=”UTF-8″：UTF-8というテキスト形式でファイルを作っていることを指定
text/htmlのようにファイル形式はMIME(Multipurpose Internet Mail Extensions,マイム)タイプと呼ばれています。
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 | 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のバージョンは主に
- HTML5：主流になりつつあるHTMLバージョン
- XHTL 1.0
- HTML 4.01
があります。
また、HTML4.01やXHTML1.0ではDTDに
- Strict：非推奨の要素や属性を含まない
- Transitional：非推奨の要素や属性を含む
- Frameset：非推奨の要素や属性・フレーム設定用の要素や属性を含む
の３種類があります。この番号順に、縛りがゆるくなります。
HTMLのバージョン移行の過程で、互換性を持たせるためにこのようなことが起こっています。
もっとも新しいHTMLのバージョンはHTML5です。
この場合は、
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>タイトルです。</title> </head> <p>ここに本文がきます。</p> <body> </body> </html>
と簡単にDTDやテキスト形式を記述できます。今後は徐々に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ファイルをすべてコピーすることは著作権に反するのでしてはいけません。
あくまでも参考にする程度にしておきましょう。
著者：安井 真人(やすい まさと)
@yasui_masatoさんをフォロー