HTMLの基礎知識
2007/05/22 Tue [Edit]
FC2ブログ
運営者の方を対象に、ブログテンプレートのカスタマイズに必要な HTML（エイチ・ティー・エム・エル）の基礎知識をご紹介いたします。
本当に基礎の基礎と言いますか、ブログをご自分でカスタマイズする際に最低限必要な知識ですので、もっと詳しく知りたいと思われた方は、おのおの HTML の入門サイトや専門書籍をご覧頂きお勉強してください。
それでは１つ１つ HTML の基礎知識を理解して行きましょう！
まず、HTML（エイチ・ティー・エム・エル）とは何でしょうか？
HTML とは、Web ページを記述するためのマークアップ言語です。
Web ページとは今ご覧頂いているページもそうですし、皆さん１度は訪問したことがあると思われる Yahoo! なども Web ページです。
つまり、インターネットに接続し IE や Safari（サファリ）などの Web ブラウザで閲覧可能なページのことです。
話しを HTML に戻し簡単に説明すると、HTML とは Web ページを書くための言語です。 たとえるなら、日本人が日本語を理解できるように HTML とは Web ブラウザが理解できる言語のことです。
ここ迄は多くの方がなんとなく知っていたか、一読でおおよそはご理解頂けたのではないでしょうか？
おそらく頭の中に小さな疑問符を浮かばせているのはマークアップ言語だと思います。
ほとんどの方達が日常生活でマークアップなんて言葉は使わないと思います。しかし、Web ページの世界では現在マークアップ言語無しでは何も始まらないと言っても過言ではないほど重要な役割を持っています。
それでは実際にマークアップとは何か下の図１ HTML の基本構造をご覧ください。
上の図１で、まず注目して頂きたいのが <html> です。
図中の上部「←開始タグ」の左にあります。見つかりましたか？
見つけられた方は、次に図中の最下部にある <⁄html> を見てください。「←終了タグ」の左にあります。
見つかりましたか？
<html> と <⁄html> を見比べて違いがあるのが分かりますか？
そうです。下のものには「 ⁄ 」が html の前にあり、上のものには「 ⁄ 」がありません。
この２つを html タグ（tag）と言います。図１にも書かれているように、基本的にはタグには開始タグと終了タグ（閉じタグ）があります。
そして終了タグにはタグの名前の前（左側）に「 ⁄ 」スラッシュが付きます。
この html タグが何を意味しているかは取り敢えず置いときまして、次に図中の A の青い部分に注目してください。
左上にhead（ヘッド）の開始タグがありますね。その真下に少し間を空けて終了タグも見つかると思います。head タグの間に title（タイトル）の開始タグがあるのが分かりますか？ 終了タグもあるので探して見てください。
見つかりましたか？
当ブログの名前「はじめてのブログデザイン」の右側に見つかったと思います。 この title タグが何を意味しているかを説明すると、この HTML のタイトル（表題）です。本にたとえるなら本の名前にあたります。
とても重要なタグだと言うことがお分かり頂けるでしょうか。Web ブラウザで「お気に入り（ブックマーク）」に追加された時、Google などで検索された時など、この title タグの間に書かれた言葉が表示されます。
逆に言うなら「はじめてのブログデザイン」がこの HTML（ Web ページ）の名前だと Web ブラウザに教えているのが title タグです。
このように、title タグを使い「はじめてのブログデザイン」と言う言葉が、この Web ページの名前ですよとタグ付けすることをマークアップと言います。
冒頭の「 HTML とは、Web ページを記述するためのマークアップ言語です。」がおおむねご理解頂けたのではないでしょうか。
もう一度タグに話しを戻しますと、title タグに囲まれた部分は Web ページの名前だと Web ブラウザに分からせる意味があったように、その他のタグにも意味があります。
また、想像つくことと思いますがタグは私達が勝手に決めては駄目ですし、タグのスペルを間違えると機能しません。
ここ迄の説明を読まれると、html タグが何を意味するか分かった人も多いのではないでしょうか？
タグについての知識の補足つきで説明させて頂くと、html タグとは「この文章は HTML 文章ですよ」と Web ブラウザに教えています。
つまり html タグで囲まれている部分は html タグの内容（要素）になります。なので、html タグは他のタグの一番外側、つまり一番上と一番下に開始タグと終了タグを記述し、その他のタグを内包し Web ブラウザに HTML 文章だと言う事を認識させています。
※正確には HTML ソースの一番上では文書型宣言を記述しますが、今回は説明を単純化するため割愛させて頂きます。
それではまた、head タグの意味はひとまず置いときまして、図中の B の緑の部分に注目してください。
！）上の図１と同じものです。
左上に body（ボディ）の開始タグがあります。そのまま垂直に目線を下げていくと終了タグも見つけられると思います。
その body タグの間に h1 タグ、p タグ、img タグが順々にあります。それぞれのタグの意味の説明は省きますが、いずれも body の開始タグと終了タグの間に記述されるタグです。
まさに今、読んでいるこのテキストや上の図１の画像なども body タグの間に記述されています。さて、body タグとはどんな意味を持ったタグでしょうか？
答えは、body タグこそが HTML の本体と言うべきか、Web ページの内容が書かれていますよと Web ブラウザに教えているタグなのです。 つまり、Web ブラウザで閲覧（ブラウズ）される領域です。
そうすると先ほど説明を飛ばした head タグはどんな要素を内包するタグだと思いますか？
答えを簡単に説明すると、ページの概要、検索エンジン向けのキーワード、ページ作者など、ページに関する情報が書かれていますよと Web ブラウザに教えているタグです。
先述した title タグは Web ブラウザの最上部やタスクバーなどに表示されますが、基本的にはそのページに訪れた一般ユーザー向けの情報ではなく、Web ブラウザや開発者向けの情報などが記述されます。
つまり、広義にとらえると Web ブラウザで閲覧（ブラウズ）されない領域です。
※ HTML では実現不可能な機能拡張を目的としたスクリプト言語（ JavaScript ）を記述したり、HTML のレイアウトや装飾などの視覚的構造を目的とした CSS などを記述することも可能ですが、最近の流れとしては双方とも外部ファイルで用意し、head タグ内で読み込む方法が取られています。
少しだけ難しい話しになりますが、HTML には論理構造だけを記述すると言う本来の目的を考えると、上記した JavaScript や CSS は HTML と分けたほうが望ましいです。
また、上記した２つ（ JavaScript と CSS ）は body 内にも記述することが可能ですが、HTML 内に論理構造以外のソースが増えることは、HTML の概念からも、SEO 的な観点からも望ましくないことを補足として記述しておきます。
さて、HTML とはマークアップとは何なのか、大分理解できてきたのではないでしょうか？
ここ迄の説明を一度まとめると、HTML とは Web ページを記述するためのマークアップ言語であり、マークアップとは HTML 内に記述された内容を開始タグと終了タグを使い、ブラウザにどんな要素かを教えることでした。
また、html タグの中には head タグと body タグがあり、head タグ内の情報はブラウズされず、body タグ内の情報はブラウズされることもご理解頂けたと思います。
ちなみに Web ブラウザは上から下、左から右に HTML ソースを読み込み解釈していきます。なので、開始タグは終了タグよりも上もしくは左に必ず記述されます。
また、head タグと body タグの上下関係が入れ替わることもありません。head タグは body タグよりも上に必ず記述します。この２つのタグは HTML で Web ページを記述する上で必ず必要なタグです。
head（ヘッド）の下に body（ボディ）を記述する。頭（ヘッド）の下に体（ボディ）がくると考えれば簡単に覚えられます。
ここ迄の説明をご覧頂き、図中に１つ疑問が残っている方、あなたは私の拙い説明を真剣に読んで頂けたのだと思います。ありがとうございます。
それではもう一度だけ下の図１をご覧ください。
！）上の図１と同じものです。
赤いアンダーラインの引いてある img（イメージ）タグに注目してください。
他のタグと違いますよね。開始タグはあるのに終了タグはなく、良く見るとタグの右側★の付近に「 ⁄ 」スラッシュが見つかります。
別に私が図１の作成で手を抜いた訳ではありませんよ＾＾
このような終了タグを持たないタグを空要素と言います。具体的に説明すると、img タグは写真や画像などの外部にある Image（イメージ）データーを HTML 内に読む込むために用意されたタグです。タグの右側にある「 ⁄ 」スラッシュについては一概には言えないのですが、FC2ブログ運営者の方は「 ⁄ 」スラッシュを挿入しておいて良いのかも知れません。HTML ソースの一番上の文書型宣言で XHTML とされているようでしたら、空要素タグの右側に「 ⁄ 」スラッシュを挿入しておくことをお勧めします。HTML 4.01 と書かれているテンプレートでも表示がおかしくなったりはしませんのでスラッシュを付けておくと XHTML に準拠されたテンプレートを使用した時に規格に沿ったソースの記述方法となります。時代が進むにつれ、おそらく XHTML に準拠されたページが増えて行くと思われます。
説明が前後してしまいますが、img タグには必須属性が２つあります。１つは、読み込むイメージデーター迄の URL を記述する src 属性と、イメージデーターを Web ブラウザが読み込めなかった時に表示する代替えテキスト alt 属性です。
タグの名前と属性の間、属性同士の間は半角スペースで区切ります。先ほど説明した「 ⁄ 」も挿入する際は、属性との間に半角スペースをはさみます。
img タグの他にも空要素タグはありますが説明は省きます。今回、ご覧の方に img タグから学んで頂きたいのは、終了タグを持たない空要素があること、HTML 内に外部データーを読み込める（ハイパーリンク）こと、タグには属性を与えられて機能するものがあることの３点です。
タグには沢山の種類とそれぞれ用途があります。しかし、このページでご説明した基本的なことを覚えてしまえば、後は分からないタグはその都度ご自身でお調べになり理解して頂ければ良いと思い、タグの種類より HTML の基礎的なことに触れてみました。
もし、タグについてもっと知りたいと思った方は HTML が持つ最大の特徴とも言える a（アンカー）タグについてお調べになってみてください。
以上で、HTML（エイチ・ティー・エム・エル）の基礎知識の説明を終わりたいと思います。
FC2ブログ運営者の方は「管理画面へログイン」→「環境設定の中からテンプレートの設定」→「使用中のテンプレートを編集」でご自身のブログの HTML をカスタマイズすることが可能です。
注意点としては、カスタマイズの前にはテンプレートを複製しバックアップをしてから作業するようにしましょう。
ブログをカスタマイズする上で知っておきたいCSSの基礎知識とセットでご覧頂くことで、FC2ブログの簡単なカスタマイズが可能になると思いますのでご覧頂けたらと思います。
最後に、もしこのページをご覧頂いた方の中に Web デザイナーを目指している方や、本気で HTML の知識を深めて行きたいと考えられている方は、Web 上でタグや用語などを検索し知識を深めるのではなく、なるべく新しく発刊された専門書籍を購入した方が良いでしょう。
HTML を XML 準拠に更新されている XHTML を中心に見据え、同時にCSS の知識を深めていくことが、最良の勉強方法だと思います。
古本屋に置かれているような書籍でテーブルレイアウトなどを勉強しても先がありませんし、Web 上で鮮度や信頼性のあやふやな情報で学ぶより、なるべく新しい専門書でしっかりとした基礎知識を身につけることが確実であり、長い目で見ると結局効率的でもあります。
私が上で説明した基礎知識は、あくまで HTML の予備知識が何もない方に向け、運営中のブログのテンプレートの簡単なカスタマイズを行ってもらえるような HTML の基礎の基礎を、必要最低限で説明したものです。
Comments
Track Backs
TB URL
で良いと思うに一票。
