HTMLはとても簡単な言語なのでサッサとマスターしてJavaScriptしましょう。

HTMLとはマークアップ言語

HTMLは文書に意味をつける(=マークアップする)言語です。例えば数学の論文を書く時、「ここは見出し、ここは数式、ここは段落」という風に文書をマークアップ(意味づけ)しますよね。

HTMLを書いてみる

ではさっそくHTMLを書いてみましょう。

目次

・はじめに
・HTMLとは
・おわりに

はじめに

HTMLとはマークアップ言語です。

あれ、ただの文章じゃん、と思ったあなた。その通りです。 HTMLのベースはふつうの文章なのです 。この文章にHTMLらしく意味をつけていきます。

まずこの文章が「HTML文書」であるという意味をつけてみましょう。

<html>
目次

・はじめに
・HTMLとは
・おわりに

はじめに

HTMLとはマークアップ言語です。
</html>

HTMLタグ

HTMLではタグと呼ばれるもの(今回でいうと<html>と</html>)で文章を囲むことで意味をつけていきます。上の例ではhtmlタグで文章全体を囲んで「HTML文書」という意味をつけています。

タグは2種類あって、開始タグと終了タグです(厳密にはさらに空要素タグというものがありますがそれは後述します)。スラッシュがない方が開始タグ、ある方が終了タグです。『「』と『」』で囲むことで会話文を表現するような感じです。「が開始タグ、」が終了タグにあたります。

開始タグと終了タグで囲まれた部分を要素と呼びます。

実はまだ先ほどのものではHTMLとしては間違えています。なぜかというと、html要素内にはhead要素とbody要素という二つがなければならないからです。

head要素

head要素は、「この文書に関する情報」を意味します。例えば「このページの作者は〇〇です。このページのキーワードは××です」というような、画面に直接表示させない情報はheadタグ内に書かねばなりません。

他にもJavaScriptやCSSをここに書き込みます(いろいろな書き方がありますが、僕は分かりやすいしHTMLとしてはhead内にあるべきだと思うのでJavaScript、CSSはhead内に置いてあります)。

body要素

文書本体がbody要素です。つまり先ほどの例はhtmlタグだけでなく、bodyタグでも囲まなければならないのです。

<html>
  <head>
  </head>
  <body>
    目次

    ・はじめに
    ・HTMLとは
    ・おわりに

    はじめに

    HTMLとはマークアップ言語です。
  </body>
</html>

余談: インデントについて

ブラウザはHTMLの行の始めのスペースを無視して表示するので、入れ子構造が見やすいように行頭にスペースを置いています。このように見やすくすることを「インデントする」といい、行頭のスペースを「インデント」といいます。

他にもあるタグたち

もちろんHTMLのタグはhtml、head、bodyだけではありません。

「見出しをつける」、「箇条書きをする」、「段落を区切る」、「強調する」、「引用部分である」、などなど様々な意味付けができます。

これらも使い、さっきの例をHTMLとしてさらに正しくしてみます。

<html>
  <head>
  </head>
  <body>
    <h1>目次</h1>

    <ul>
      <li>はじめに</li>
      <li>HTMLとは</li>
      <li>おわりに</li>
    </ul>

    <h1>はじめに</h1>
    <p>
      HTMLとはマークアップ言語です。
    </p>
  </body>
</html>

おまけ: HTML文書内でタグを書きたい

例えば<h1>HTML</h1>とHTML文書内に書きたくなった時、どうしたらいいのでしょうか?このまま書くと見出しになってしまいます。

答えは<を<に、>を>に書き換えます。それぞれLower ThanとGreater Thanの略です。ちなみに >と表示するときは&を&と直して、&gt;とすればOKです(ややこしい…)

例外的な「空要素タグ」

今までは文章を開始タグと終了タグで囲むことで意味づけをしていました。しかし、HTMLには「空要素タグ」と呼ばれる特殊なタグがあります。

空要素タグには <br>、 <img>などがあります。<br>は改行、<img>は画像の要素です。改行や画像は文章では表せないので空要素タグになっています。

色をつけたりするのはHTMLではない

HTMLはあくまで「文書に意味をつける」だけの言語です。ここにさらに色をつけるといった「装飾」を行うのはCSSです。

昔はHTML単体で色付けまで出来ましたが、今は「HTMLは文書に意味をつけるにとどめるべき」という意見が広まっているので、HTMLで色をつけるのは非推奨です(過去に作られたHTMLとの互換性のため、今でも色をつけること自体はできます)。

文章を中央寄せにする、アンダーバーを引く、文字を太文字にする、なども装飾に当たります。ただし、文字を太文字にする、は「強調する」という意味がある場合はOKで、強調以外の装飾を目的とするときはCSSで行うべきです。

Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

HTML入門