ただいまHTML5勉強真っ最中のゴロドクです。どうも。
未だまともにコーディングの指導というものを人から受けたことがなくもっぱら書籍とウェブ上の情報で自習しているわりとグダグダな感じの私ですが、覚えたことを備忘録的に書いたら同じように独学で勉強始めたい人にも役に立つかなーとふと思い「いまからHTML5」と銘打ってちょこちょこと小出しに書き残しておくことにしました。不定期ですけど。
本業の方には「いまから」というより「いまさら」という情報が多いと思いますので読み飛ばしてもらってかまいませんが、思い込みや勘違いで書いてることも多分にあると思いますので「もうドクはヴァカだなー」と生暖かい目で見守ってご指摘などいただけるとうれしいです。
それではさっそく。まず始めにHTMLファイルの骨子となる部分についてから。
HTML文書、DOCTYPE宣言と全ての基本のタグ
HTML文書とは
「HyperText Markup Language」の略です。いわゆるウェブページというものはウェブブラウザが人間に理解できるようにこのHTML文書というものを解釈して画面に表示されたものです。
ご存知の通りテキスト文書とは「.txt」という拡張子をともなったファイルで、中身は単なる文字列のかたまりです。HTML文書も同様に文字列のかたまりに過ぎないんですが、ちょっと違うのは「タグ」と呼ばれる記号（マーク）でその文中のパートごとに「文章構造の意味」を追記して「要素ごとのかたまり」にしたものなのです（これが「Markup」と言われる所以）。
実際にHTML文書を書くには特に専門のツールなどは必要ありません。テキストエディタがあれば十分です。Windowsのメモ帳でも構いません。タグによって意味づけされた文書をテキストデータとして保存するだけなのですが、拡張子だけは「.html」または「.htm」として保存します。実際にHTML文書の中身がどうなっているのか見てみましょう。
<!DOCTYPE html>
<html>
<head>
この文書自身に関するメタ情報
</head>
<body>
この文書の本文
</body>
</html>
どんなHTMLファイルも一般的にはこのような形をとっています。ではここに書かれていることはそれぞれどんな意味を持つのでしょうか。
DOCTYPE宣言
冒頭の<!DOCTYPE html>はDOCTYPE宣言と呼ばれるもので「このファイルが○×バージョンのHTML文書ですよ」ということを示します。
HTMLにも様々なバージョンがありこの宣言の書き方によってそのバージョンを示すのですが、HTML5では上記のようなシンプルなものとなっています。過去のバージョンでの書き方はここでは割愛。これから覚える方はあまり深く考えずにまずこれを覚えましょう。
<html>タグ
DOCTYPE宣言以降は全体が<html>と</html>で囲まれています。この囲まれた範囲がHTML文書の本体です。本体であって「本文」ではありませんので注意。
この中は大きく分けて2つのパートに分かれています。「この文書自身に関するメタ情報」を示した部分と「この文書の本文」です。
<head>タグ
<head>と</head>で囲まれた本体の前半は「この文書自身に関するメタ情報」を記述するパートです。
メタ情報というと難しく聞こえますが、ようするにこの文章の属性を示したものです。言語は何語で書かれているか、ページのタイトルは、筆者は誰か、ブラウザに表示するときのルール(スタイル)はどのファイルを適用するか…etc…といったようなことです。
<body>タグ
<body>と</body>で囲まれた本体の後半は「この文書の本文」を記述するパートです。実際に書きたい文章の中身そのものですね。
今回のまとめ
雰囲気は掴んでいただけましたか？ここまでは
- DOCTYPE宣言でHTML5文書であることを明示
- 以降は<html>タグで全体を囲む
- 本体は<head>タグと<body>タグによってメタ情報と本文に分けられる
ということが理解できれば良いかと思います。
上に書いた通り、どんなHTML文書もこの形が基本ですので、新たな文書起こすたびに書いてると大変なので決まりきった部分についてはひな形として保存しておくといいと思います。
マークアップについては以前の「ブログの書き方を工夫して読者とグーグル先生に気持ちを伝える基本的な3つの施策」のほうでもざっと説明してるのであわせて読んでいただければと思います。
さてこの[いまからHTML5]シリーズですが出来るだけ冗長にならずに細かくエントリを区切って端的に説明していきたいと思います（今回はちょっと長くなっちゃったけど）。そうしないと読むほうも途中で飽きそうだし、何より私もしんどくなりますので。
コメント