1. HTML とは

HTML（HyperText Markup Language）は、ウェブページを作成するための標準的なマークアップ言語です。HTML は、ウェブページの構造を定義し、コンテンツをブラウザにどのように表示するかを決定します。ここでは、HTML の基本的な概念とその重要性について説明します。

1.1 HTML の概要

HTML は、ウェブページの基礎を形作る言語です。以下のような役割があります：

文章の構造化：見出し、段落、リストなど、コンテンツを意味的に整理することができます。
メディアの組み込み：画像、音声、動画などのメディアファイルをページに配置することができます。
リンクの作成：他のページや同じページの別の部分へのナビゲーションを提供します。

1.2 HTML の歴史

HTML は 1991 年にティム・バーナーズ＝リーによって最初に提案され、以後、何度も仕様が更新されています。最新の HTML5 は、音声や動画の要素、新しいセマンティック要素を追加し、さらに強力で直感的な言語となっています。

1.3 なぜ HTML を学ぶのか

HTML を学ぶことは、ウェブ開発の基本となる技能を身につけるために重要です。HTML の知識があれば、以下のような利点があります：

ウェブページの作成・デザイン：自分のウェブサイトやブログを作成する際に役立ちます。
キャリアの幅広さ：フロントエンド開発者、バックエンド開発者、デザイナーなど、様々な職種で HTML の知識が求められます。

1.4 HTML の基本的な使い方

HTML の基本的な使い方を学ぶために、簡単なウェブページを作成してみましょう。以下は、基本的な HTML 文書の構造です：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTMLの基本</title>
  </head>
  <body>
    <h1>HTMLへようこそ</h1>
    <p>これは、HTMLの基本構造を示す例です。</p>
  </body>
</html>

1.4.1 各部分の説明

<!DOCTYPE html>: これはドキュメントのタイプを宣言するもので、HTML5 を使っていることをブラウザに示します。
<html lang="ja">: このタグはドキュメントのルート要素で、lang="ja"はドキュメントの言語を日本語に設定しています。
<head>: メタデータ（ドキュメントの情報）を含むセクションです。タイトルや文字エンコード設定を行います。
<meta charset="UTF-8">: ドキュメントが UTF-8 文字エンコードを使用していることを指定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: レスポンシブデザインをサポートするための設定です。
<title>: ブラウザのタブやブックマークで表示されるドキュメントのタイトルを指定します。
<body>: 実際のコンテンツを含むセクションです。ここには見出し、段落、画像などが含まれます。

1.4.2 実践

上記のコードをテキストエディタにコピーし、「index.html」という名前で保存してください。その後、ブラウザでこのファイルを開くと、簡単なウェブページが表示されるはずです。実際に試してみて、自分で HTML の基本構造を拡張してみましょう。

1.5 まとめ

HTML はウェブページの基礎を作るための重要なマークアップ言語です。基本的な構造や役割、歴史について理解することが、ウェブ開発の第一歩となります。実際に手を動かして、簡単な HTML ページを作成することで、その仕組みをより深く理解することができます。今後の章では、さらに詳細なタグや要素について学んでいきましょう。