簡単で正しいHTMLの書き方

Lesson 1

まずは骨格を作る <HTML> <HEAD> <BODY>

とにかく、HTMLで何かを作ってみたいと焦っているあなた。そんなに焦らずに、まずはここからお読みください。闇雲にHTMLを書くのもいいですが、理屈がわかってから書くと、とてもスムーズに書けます。

まずは、<HTML>と</HTML>で文章全体を囲みます。そして、その中に<HEAD>と</HEAD>、<BODY>と</BODY>で囲んだものを入れます。こんな感じです。

<HTML>

  <HEAD>
  </HEAD>

  <BODY>
  </BODY>

</HTML>

HTMLの文章の構成として、上記のように大きくは<HEAD>の部分と<BODY>の部分に分けられます。HTMLの文章は、大きく分けてヘッダー(Document Head)と本文(Document Body)の構成に分かれているということです。これをツリー図で表すと、

[ツリー図]

ですね。これから、このガイドの中でしつこいくらいにツリー図を登場させますが、お互いのタグがどのような関係にあるのかを意識しながらHTMLを書くと、簡単に書けるようになります。

それでは、次に<HEAD>と<BODY>の中身を書いていきましょう。こんな感じです。

<HTML>

  <HEAD>
    <TITLE>Web is useful.</TITLE>
  </HEAD>

  <BODY>
    <H1>Webは便利だよ</H1>
    <P>Webはとても便利なものです。なぜなら、</P>
    <UL>
      <LI>ブラウザーが豊富
      <LI>世界中に情報発信が可能
      <LI>ページ作成もとても簡単
    </UL>
    <P>だからです。</P>
  </BODY>

</HTML>

こんな感じです。それでは、タイトルから付けてみましょうか。