プログラムやウェブ制作に初めて触れる方の中には、HTML について詳しく理解していない方も多いかもしれません。
この記事では、HTML の基本、CSS との違い、さまざまなタグ、使用方法などもわかりやすく説明しますので、ぜひ参考にしてください。
HTML とは
HTML は、ウェブサイトを作成する際に、コンピューターに表示したいテキストや画像などの指示を出すための言語です。
ウェブサイトを美しく装飾する役割を担う CSS とは異なり、HTML はコンテンツの骨となる構造を定義します。
HTML と CSS は、単体では動作しません。必ず HTML と CSS を一緒に使います。
HTML を使う主なメリットは、専用のウェブ制作ツールが不要であり、基本的なウェブページを手動で作成できることです。
ただし、HTML の誤った記述はウェブページの表示に問題を引き起こす可能性があるため、注意が必要です。
また、HTML には現在までにいくつかのバージョンが制定されています。HTML のバージョンは、Web で使用される技術を標準化する団体である W3C によって定められていました。（2023 年 9 月現在では WHATWG となっています。）
現在、多くのウェブサイトで使用されているバージョンは、2014 年に勧告された HTML5 です。
ここでは、HTML5 以前のバージョン（1999 年に勧告された 4.01 を含む）を単に HTML と呼び、HTML5 との主な違いについて説明します。
HTML と HTML5 の違い
HTML5 は、4.01 のバージョンに比べて新しい要素や属性が追加されています。
例えば、video タグや audio タグ、canvas タグが導入され、文章構造をより明確に示すために header タグや footer タグなどの構造化タグが追加されました。
さらに、フォーム関連の属性が拡充され、入力補助やチェック機能が向上し、ドラッグ&ドロップ機能などが導入され、ウェブページの構築が容易になりました。
たとえば、以前の HTML4 では DOCTYPE（DTD）宣言を含む長大な記述が必要でしたが、HTML5 では次のように簡略化されました。
<!DOCTYPE html>HTML の主要なタグ
HTML の主要なタグは以下の通りです。
- a タグ
- br タグ
- div タグ
- h タグ
- img タグ
- table タグ
- p タグ
- span タグ
- リストタグ（ul・ol・li）
a タグ
ハイパーリンク（リンク）を作成するために使用されます。リンクの先は href 属性で指定され、表示テキストは a タグ内に配置されます。
<a href="https://example.com">サンプル</a>br タグ
テキスト内で改行を行うために使用されます。改行したい箇所に br タグを挿入します。
<p>こんにちは<br />今日はいい天気ですね。</p>div タグ
ウェブページ内のコンテンツをグループ化するために使用されます。主に CSS と組み合わせて使用され、特定のデザインスタイルを適用するのに便利です。
<div>
<p>こんにちは<br />今日はいい天気ですね。</p>
</div>
<div>
<p>はい、そうですね。</p>
</div>h タグ
見出しを定義するために使用されます。h1 から h6 までのタグがあり、見出しのレベルに応じて使用します。
<h1>この記事のタイトル</h1>img タグ
画像を表示するために使用されます。画像のファイルパスは src 属性で指定され、alt 属性には画像の説明を記述します。
<img src="https://sample.jpg" alt="画像の説明" />table タグ
テーブルを作成するために使用されます。テーブルは行（tr タグ）、見出しセル（th タグ）、データセル（td タグ）などで構成されます。
<table>
<tr>
<th>タイトル1</th>
<th>タイトル2</th>
<th>タイトル3</th>
</tr>
<tr>
<td>コンテンツ1</td>
<td>コンテンツ2</td>
<td>コンテンツ3</td>
</tr>
<tr>
<td>コンテンツ4</td>
<td>コンテンツ5</td>
<td>コンテンツ6</td>
</tr>
</table>p タグ
段落を定義するために使用されます。文章の区切りを明確にします。
<p>こんにちは</p>
<p>はい、こんにちは</p>
<p>いい天気ですね</p>
<p>そうですね</p>span タグ
テキストの一部分にスタイルや属性を適用するために使用されます。文中の特定のテキストを強調するのに役立ちます。
<p>文章の<span style="color:red;">ここ</span>だけ赤くしたい</p>リストタグ（ul・ol・li）
項目のリストを作成するために使用されます。ul は順序のないリスト（箇条書き）、ol は順序のあるリスト（番号付きリスト）、li はリストアイテムを表します。
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>HTML を使って Web サイトを作る方法
HTML を使用してウェブサイトを作成する基本的なステップは次の通りです。
- ツールの用意
- HTML の記述
- ファイルの保存
- プレビュー
- 公開
1.ツールの用意
HTML を書くためのテキストエディタと、ウェブページを保存するためのフォルダやファイルを用意します。
2.HTML の記述
テキストエディタで HTML コードを記述します。ウェブページの見出しや本文、リンクなどの要素を配置します。
3.ファイルの保存
HTML コードを保存し、拡張子を「.html」に設定します。
4.プレビュー
保存した HTML ファイルをウェブブラウザで開き、ウェブページが適切に表示されるか確認します。
5.公開
ウェブホスティングサービスを利用して、ウェブサイトをインターネット上に公開します。
HTML はウェブ開発の基盤であり、初心者にとっても手軽に学べる言語です。各タグや要素を理解し、実際にコーディングを行うことで、ウェブデザインの世界に足を踏み入れる第一歩となります。
