第1回 HTMLとは？基礎と概要 – HTMLの基本的な役割とウェブページの構造

はじめに

ウェブサイトを作るためには、いくつかの技術を理解する必要があります。その中でも、最も基本的で重要なのが HTML です。HTMLは「HyperText Markup Language」の略で、ウェブページの構造を記述するための言語です。HTMLを使うことで、テキストや画像、リンクなどをウェブページに配置し、ユーザーに見せることができます。

この講座では、HTMLの基本的な考え方や、最初のシンプルなHTMLファイルの作成方法について学んでいきましょう。

HTMLの役割

HTMLはウェブページの「骨組み」を作る役割を果たします。例えば、HTMLでは次のような要素を定義します：

テキストの見出し（タイトル）
段落（文章の区切り）
画像（ウェブページに表示する写真やイラスト）
リンク（他のページやウェブサイトに移動するためのボタン）

他の技術（CSSやJavaScript）と連携することで、ページにデザインや動きを加えることもできますが、まずはこの「骨組み」を作るHTMLの役割に集中しましょう。

HTMLファイルの基本構造

HTMLファイルは、基本的にいくつかの「タグ（tag）」と呼ばれる要素で構成されています。タグは < と > で囲まれた部分に記述され、HTMLの要素を定義します。

例: シンプルなHTMLファイルの構造

以下は、最も基本的なHTMLファイルの例です。これを実際に書いてみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>初めてのHTMLページ</title>
  </head>
  <body>
    <h1>こんにちは、世界！</h1>
    <p>これは初めてのHTMLページです。</p>
  </body>
</html>

それぞれの部分について詳しく説明していきます。

HTMLタグの解説

<!DOCTYPE html>

この行は、HTML文書の「宣言」です。現在使われているHTMLのバージョン（HTML5）をブラウザに伝える役割を果たしています。これを必ず最初に書くことで、ブラウザは文書を正しく解釈します。

<html> と </html>

このタグは、HTML文書の始まりと終わりを示します。すべてのHTMLコードはこのタグの中に書きます。

<head> と </head>

<head> タグの中には、ウェブページの「見えない部分」の情報を記述します。たとえば、ページのタイトルや文字エンコーディング、SEO（検索エンジン最適化）に必要なメタデータなどです。

<meta charset=”UTF-8″>

このタグは、文字コードを指定しています。UTF-8 は日本語を含む多くの言語に対応しているため、通常はこの設定を使います。

<title>

このタグは、ウェブページのタイトルを指定します。ブラウザのタブに表示されるタイトルです。検索結果に表示されることもあるため、適切なタイトルを設定することが重要です。

<body> と </body>

<body> タグは、ページの「見える部分」を定義します。ユーザーが実際にブラウザで見る内容はすべてこのタグの中に記述します。

<h1> と <p>

<h1> は「見出し」を表します。見出しは重要な部分を強調するために使います。<h1> が最も大きな見出しで、<h2> や <h3> と続きます。
<p> は「段落」を表します。テキストを1つのまとまりとして記述するときに使います。

実際にHTMLファイルを作成してみよう

では、実際に手を動かして簡単なHTMLファイルを作ってみましょう。

テキストエディタを開く

まず、HTMLを編集するためのテキストエディタを使います。Windowsなら「メモ帳」、Macなら「テキストエディット」でも構いませんが、より使いやすい無料のエディタとしては Visual Studio Code や Sublime Text がおすすめです。

HTMLファイルを保存する

テキストエディタで上記のコードを入力したら、index.html という名前で保存します。ファイルの拡張子（.html）が重要です。

ブラウザで開く

保存したファイルをダブルクリックすると、デフォルトのウェブブラウザ（ChromeやFirefoxなど）でファイルが表示されます。「こんにちは、世界！」という見出しと、その下に「これは初めてのHTMLページです。」というテキストが表示されるはずです。

HTMLの特徴

HTMLの特徴をいくつか挙げてみましょう。

簡単に始められる

HTMLは他のプログラミング言語に比べて非常にシンプルで、特別なソフトウェアがなくても始めることができます。テキストエディタさえあれば、すぐにウェブページを作成できます。

ウェブ標準

HTMLはすべてのウェブサイトで使われており、すべてのブラウザが対応しています。HTMLを学べば、自分でウェブサイトを作成したり、既存のサイトをカスタマイズするための基礎をしっかりと身に付けることができます。

階層構造

HTMLの要素は「入れ子」構造をとります。タグの中にさらに別のタグを入れることで、階層的にページを構成できます。これは、文書が見やすく、整理されやすくなるため重要な特徴です。

まとめ

今回の講座では、HTMLの基礎的な概念と、簡単なHTMLファイルの作成方法について学びました。HTMLはウェブページの基礎を作るための言語であり、シンプルな構造を持っています。

次回は、HTMLの基本構造をさらに深く掘り下げて、<html> タグや <head> タグ、そして <body> タグの詳細を学んでいきます。まずは今回の内容をしっかり理解し、簡単なウェブページを作る練習をしてみましょう！

HTML入門講座

1. HTMLとは？基礎と概要

2. HTMLの基本構造と要素

3. テキストの装飾とフォーマット

4. リンクを作成する: ハイパーリンクの基礎

14. IFrameを使って他のページを埋め込む

15. HTMLとCSSの連携: スタイルの基礎