こんにちは、Ryohei（@ityryohei）です！

HTMLとは、ウェブページを作成するためのマークアップ言語の一つです。

正式には HyperText Markup Language といいます。

マークアップ言語というのは、文書の一部をタグと呼ばれる文字列で囲い、文書の構造、段落、文字の修飾等を記述していく言語です。

マークアップ言語には多くの種類がありますが、その中で最も広く使用されているのがHTMLになります。

まとめると、

  • HTMLはHyperText Markup Languageの略
  • HTMLはマークアップを使用して、Webページの構造を記述する言語

となります。

HTMLのタグ

マークアップ言語は文書の一部をタグと呼ばれる文字列を使って記述していく言語であることは上の方でお話しましたね。HTMLは装飾したいコンテンツをタグ囲います。具体的には以下のように記述します。

<タグ名>コンテンツ</タグ名>

コンテンツの前にあるタグを開始タグ、後ろにあるスラッシュが付いたタグを終了タグと言います。開始タグと終了タグに囲まれた内容が装飾対象となります。

HTMLの構造

HTMLの構造を簡単な図で表すと以下のようになっています。

<html>

<head>

<title>ページタイトル</title>

</head>

<body>

<h1>ページの見出し</h1>
<p>段落</p>
</body>

</html>

<html>は、この文書がHTMLで記述された文書であることを宣言するタグです。文書の始まりと終わり部分に記述します。
<head>の間には、文書のタイトルやメタ情報といったヘッダに持たせたい情報を記述します。
<body>の間には、実際にページに表示される文書を記述します。

上の図をHTMLで記述すると以下になります。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <h1>ページの見出し</h1>
    <p>段落</p>
  </body>
</html>

また、上の図では触れなかった部分ですが、HTML文書の前に<!DOCTYPE>を宣言する必要があります。
DOCTYPEとは、HTMLの文書がどのバージョンを利用して、どの文書型定義（Document Type Definition）で記述されているかを表しています。
HTMLはバージョンによって表示方法や使えるタグが異なります。そのため、作成者が意図していなかった表示になる場合があります。ブラウザは最初に文書型定義を読み込んでDOCTYPEにしたがって表示するようになっているので、レイアウトの崩れを防ぐためにも必ず宣言しておきましょう。

ちなみにHTML4.01の一般的なDOCTYPEの宣言は以下です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5では簡略化され、よりシンプルになっています。
<!DOCTYPE html>

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら