HTMLとは？

Webサイトを見ているとき、その裏側でどのような技術が使われているか考えたことはありますか？私たちが日々目にするWebページは、HTMLという言語によって構築されています。今回は、Web制作の基礎となるHTMLについて、初心者の方でも理解できるように詳しく解説していきます。

HTMLとは何か？その特徴と役割

HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略称です。まずは、HTMLがどのような言語で、どんな特徴を持ち、どんな役割を果たしているのかを理解しましょう。

HTMLの3つの重要な特徴

1. マークアップ言語である

HTMLはプログラミング言語ではなく、「マークアップ言語」です。プログラミング言語が「処理や計算を行う」のに対し、マークアップ言語は「文書の構造や意味を示す」ことが目的です。つまり、HTMLは複雑な計算や処理を実行するのではなく、「ここは見出しです」「ここは段落です」「ここは画像です」といった情報の意味や構造を定義する言語なのです。

2. タグベースの言語である

HTMLは「タグ」と呼ばれる記号を使って、文書の各部分に意味を付けていきます。タグは<タグ名>という形式で記述し、多くの場合は<タグ名>内容</タグ名>のように開始タグと終了タグで囲んで使用します。このシンプルな仕組みにより、初心者でも比較的習得しやすい言語となっています。

3. すべてのWebページの基礎である

どんなに複雑で美しいWebサイトも、その根底にはHTMLがあります。JavaScriptで動的な機能を追加しても、CSSで華やかなデザインを施しても、それらはすべてHTMLという土台の上に成り立っています。HTMLはWeb開発における「共通言語」であり、Webの世界への入り口なのです。

HTMLが果たす3つの役割

1. Webページの骨組みを作る

HTMLの第一の役割は、Webページの構造を定義することです。家を建てるときに柱や梁で骨組みを作るように、HTMLはWebページの基本的な構造を作り上げます。どこにヘッダーがあり、どこにメインコンテンツがあり、どこにフッターがあるのか、こうした構造をHTMLで定義します。

2. 情報に意味を持たせる

HTMLは単に文字を表示するだけでなく、その文字に「意味」を持たせます。例えば、同じ「大きな文字」でも、それが見出しなのか、強調なのか、単に装飾なのかでは意味が異なります。HTMLはこうした意味の違いを明確に区別し、コンピューターやブラウザ、検索エンジンが正しく理解できるようにします。

3. 異なる環境での表示を可能にする

HTMLで適切にマークアップされたページは、デスクトップPC、スマートフォン、タブレット、スクリーンリーダー（音声読み上げソフト）など、様々な環境で適切に表示・利用できます。これは、HTMLが構造と意味を定義し、見た目はCSSに任せるという役割分担があるからこそ実現できることです。

HTMLの歴史と進化

HTMLは1989年にティム・バーナーズ=リーによって開発されました。当初はシンプルな文書共有のための言語でしたが、時代とともに進化を続け、現在ではHTML5という最新バージョンが広く使われています。HTML5では、動画や音声の埋め込み、より豊かなグラフィックス表現、モバイル対応など、多様な機能が追加されています。

インターネットの発展とともにHTMLも成長し、今では世界中の何十億というWebページがHTMLで書かれています。この普遍性こそが、HTMLを学ぶ価値を高めているのです。

HTMLの基本構造を理解しよう

HTMLファイルには決まった基本構造があります。すべてのHTMLファイルは以下のような構造を持っています。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
</head>
<body>
    ここにコンテンツを記述
</body>
</html>

この構造の各部分には重要な意味があります。DOCTYPE宣言は「このファイルはHTML5で書かれています」という宣言です。htmlタグはHTML文書全体を囲む最も外側のタグで、headタグ内にはページのメタ情報やタイトルを記述し、bodyタグ内に実際にブラウザに表示される内容を記述します。

見出しと段落：文書構造の基本

見出しタグ（h1〜h6）

見出しはWebページの構造を示す重要な要素です。HTMLでは6段階の見出しレベルを使用できます。h1が最も重要な見出しで、h6が最も小さな見出しです。

見出しは単に文字を大きくするためのものではなく、文書の論理的な構造を示すために使います。検索エンジンも見出しタグを重視してページの内容を理解するため、適切に使用することがSEO（検索エンジン最適化）の観点からも重要です。

一般的に、1ページにh1タグは1つだけ使用し、それがページ全体のテーマを表します。h2はh1の下位見出し、h3はh2の下位見出しというように、階層構造を意識して使用します。

段落タグ（p）

pタグは段落を表すタグです。文章をpタグで囲むことで、その部分が一つの段落であることをブラウザに伝えます。pタグを使わずに文章を書いても表示はされますが、適切な余白が生まれず、可読性が低下してしまいます。

段落と段落の間には自動的に余白が挿入されるため、読みやすい文書構造を作ることができます。

改行（br）

段落内で改行したい場合は、brタグを使用します。brタグは終了タグが不要な「空要素」と呼ばれるタグです。詩や住所など、段落を分けずに改行したい場面で使用します。

ただし、brタグを連続して使って余白を作るのは推奨されません。余白の調整はCSSで行うのが適切です。

テキストの装飾と強調

強調表現

HTMLにはテキストを強調するためのタグがいくつかあります。strongタグは重要な内容を示すために使用し、通常は太字で表示されます。これは単に見た目を太くするだけでなく、「この部分は重要です」という意味を持ちます。

emタグは強勢を表し、通常は斜体で表示されます。これも意味的な強調を示すタグです。見た目だけを変えたい場合はCSSを使用するのが適切ですが、意味的な強調にはこれらのタグを使用します。

引用

他の文献や発言を引用する場合は、blockquoteタグやqタグを使用します。blockquoteは長い引用文に使用し、qタグは短い引用に使用します。これらのタグを使うことで、引用元を明確にし、著作権的にも適切な表示ができます。

リスト表示：情報を整理する

順序なしリスト（ul）

箇条書きを表示する場合は、ulタグとliタグを組み合わせて使用します。ulは「unordered list（順序なしリスト）」の略で、項目の順序が重要でない場合に使用します。デフォルトでは各項目の頭に「・」（ビュレット）が表示されます。

リストは単に見た目を整えるだけでなく、関連する項目をグループ化するという意味的な役割も持っています。ナビゲーションメニューや特徴のリストなど、様々な場面で使用されます。

順序付きリスト（ol）

手順や順位など、順序が重要な情報を表示する場合は、olタグを使用します。olは「ordered list（順序付きリスト）」の略で、各項目の頭に自動的に番号が振られます。

料理のレシピや操作手順など、順番通りに実行する必要がある情報に最適です。

定義リスト（dl）

用語とその説明をセットで表示する場合は、dlタグ、dtタグ、ddタグを組み合わせて使用します。dtは用語（term）を、ddは説明（description）を表します。

用語集や営業時間の表示、Q&A形式のコンテンツなどに適しています。

テーブル：データを表形式で表示

テーブルは、データを行と列で整理して表示する際に使用します。tableタグで全体を囲み、trタグで行を、thタグで見出しセル、tdタグでデータセルを定義します。

複雑なテーブルを作る場合は、theadタグでヘッダー部分、tbodyタグで本体部分を明示的に区別することで、構造が明確になります。これは検索エンジンやスクリーンリーダーがテーブルの構造を正しく理解するためにも重要です。

テーブルはかつてページレイアウトにも使われていましたが、現在ではレイアウトはCSSで行うのが標準です。テーブルは純粋にデータの表示にのみ使用すべきです。

画像の表示方法

Webページに画像を表示するには、imgタグを使用します。imgタグはsrc属性で画像ファイルのパスを、alt属性で画像の説明文を指定します。

alt属性は非常に重要です。画像が表示されない場合や、視覚障害者がスクリーンリーダーを使用している場合に、この説明文が読み上げられます。また、検索エンジンも画像の内容を理解するためにalt属性を参照します。

パスの指定方法

画像のパスには「相対パス」と「絶対パス」の2種類があります。

相対パスは、現在のHTMLファイルからの相対的な位置を示します。同じフォルダ内の画像なら「image.jpg」、一つ上の階層のimgフォルダ内なら「../img/image.jpg」のように指定します。サイト内の画像には相対パスを使用するのが一般的です。

絶対パスは、「https://example.com/images/photo.jpg」のように、完全なURLを指定します。外部サイトの画像を参照する場合や、ルートからの絶対的な位置を示したい場合に使用します。

figureとfigcaption

画像に説明文を添えたい場合は、figureタグとfigcaptionタグを使用します。これらを使うことで、画像とその説明が関連していることを意味的に示すことができます。

画像の重なり表示（z-index）

CSSのz-indexプロパティを使用することで、複数の画像や要素を重ねて表示できます。z-indexの数値が大きいほど、手前に表示されます。これはHTMLだけでなくCSSの知識も必要になりますが、視覚的に豊かな表現を可能にします。

リンクの作成

Webページの最も重要な特徴の一つが「ハイパーリンク」です。aタグを使用することで、他のページや同じページ内の別の場所へのリンクを作成できます。

href属性にリンク先のURLを指定します。外部サイトへのリンクの場合は、target属性に「_blank」を指定することで、新しいタブでページを開くことができます。ただし、ユーザーの意図しない動作になる可能性もあるため、使用する際は注意が必要です。

画像にリンクを設定する場合は、aタグの中にimgタグを入れます。これにより、画像をクリックしてリンク先に移動できるようになります。

動画と音声の埋め込み

HTML5では、videoタグとaudioタグが導入され、プラグインなしで動画や音声を再生できるようになりました。

videoタグのsrc属性に動画ファイル（MP4など）のパスを、controls属性を追加することで再生コントロールバーを表示できます。同様に、audioタグで音声ファイル（MP3など）を埋め込むことができます。

複数のファイル形式に対応させるため、sourceタグを使って異なる形式のファイルを指定することもできます。これにより、ブラウザが対応している形式を自動的に選択して再生します。

フォーム要素：ユーザー入力を受け取る

Webサイトで問い合わせや申し込みを受け付けるには、フォーム要素が必要です。

基本的なフォーム構造

formタグで全体を囲み、その中にinput、textarea、selectなどの入力要素を配置します。各入力要素にはlabelタグを付けることで、何を入力すべきかを明示します。

inputタグはtype属性によって様々な入力形式に対応します。テキスト入力（type=”text”）、パスワード入力（type=”password”）、ラジオボタン（type=”radio”）、チェックボックス（type=”checkbox”）、送信ボタン（type=”submit”）など、多様な入力方法を提供できます。

textareaタグは複数行のテキスト入力に使用し、selectタグとoptionタグの組み合わせでドロップダウンリストを作成できます。