HTML の概要

HTML の紹介

HTML（HyperText Markup Language）は、ウェブページを作成するために使用されるマークアップ言語です。HTMLはプログラミング言語ではなく、マークアップタグを使って文書を記述します。HTML文書はHTMLタグとテキストコンテンツを含んでおり、HTML文書はウェブページとも呼ばれます。

HTML の例

以下は、基本的なHTML文書の例です：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT チュートリアル (japanitguide.com)</title>
</head>
<body>

<h1>私の最初のタイトル</h1>

<p>私の最初の段落。</p>

</body>
</html>

例の解析

  1. <!DOCTYPE html> - HTML5文書であることを宣言します。
  2. <html> - HTMLページのルート要素です。
  3. <head> - ドキュメントのメタデータを含みます。例えば、<meta charset="utf-8"> はウェブページの文字エンコーディングをutf-8に設定します。
  4. <title> - ドキュメントのタイトルを記述します。
  5. <body> - ページの表示内容を含みます。
  6. <h1> - 大見出しを定義します。
  7. <p> - 段落を定義します。

注：ブラウザでF12キーを押すとデベロッパーツールが開き、タグの構成を確認できます。

HTMLとは何か？

HTMLはウェブページを記述するための言語です。以下はHTMLの基本的な特徴です：

  • HTMLは超文本標記言語（HyperText Markup Language）の略です。
  • HTMLはプログラミング言語ではなく、マークアップ言語です。
  • マークアップ言語はマークアップタグのセットです。
  • HTMLはマークアップタグを使ってウェブページを記述します。
  • HTML文書はHTMLタグとテキストコンテンツを含みます。
  • HTML文書はウェブページとも呼ばれます。

HTMLタグ

HTMLマークアップタグは通常、HTMLタグと呼ばれます。HTMLタグは角括弧で囲まれたキーワードで構成されています。例えば、<html> タグです。HTMLタグは通常、開始タグと終了タグのペアで構成されます。例えば、 <b> と </b> です。開始タグはオープンタグ、終了タグはクローズタグとも呼ばれます。

例：

<p>これは一つの段落です。</p>

HTML要素

"HTMLタグ" と "HTML要素" は同じ意味で使われることが多いですが、厳密にはHTML要素は開始タグと終了タグを含むものを指します。例：

<p>これは一つの段落です。</p>​

ウェブブラウザ

ウェブブラウザ（Google Chrome、Internet Explorer、Firefox、Safariなど）は、HTMLファイルを読み込み、それをウェブページとして表示するために使用されます。ブラウザは直接HTMLタグを表示しませんが、タグを使用してHTMLページのコンテンツをユーザーにどのように表示するかを決定します。

HTMLウェブページの構造

以下は、HTMLページの視覚的な構造の例です：

<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>これは一つのタイトルです</h1>
<p>これは一つの段落です。</p>
<p>これは別の段落です。</p>
</body>
</html>​

Note: <body> エリア（白い部分）のみがブラウザに表示されます。

HTMLのバージョン

初期のインターネットの誕生から、いくつかのHTMLバージョンが存在します：

バージョン 発行年
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

<!DOCTYPE> 宣言

<!DOCTYPE> 宣言は、ブラウザにウェブページを正しく表示させるために使用されます。インターネットには多くの異なるファイルが存在しますが、HTMLバージョンを正しく宣言することで、ブラウザはウェブページのコンテンツを正しく表示できます。DOCTYPE宣言は大文字と小文字を区別しません。以下のように記述できます：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

一般的な宣言

HTML5：

<!DOCTYPE html>

HTML 4.01：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">​

XHTML 1.0：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">