Webページを作成する上で欠かせない技術の一つに「HTML(HyperText Markup Language)」があります。HTMLは、Webサイトの骨組みを作るための言語であり、インターネット上のあらゆるWebページがこのHTMLを基盤として作成されています。
この記事では、HTMLの基本概念や特徴、実際の使用例などを詳しく解説していきます。初心者の方にもわかりやすく説明するので、ぜひ最後までご覧ください!
[目次を開く]
1. HTMLとは?
HTML(エイチ・ティー・エム・エル)は「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略称であり、Webページを構成するためのマークアップ言語です。
マークアップ言語とは、文章の構造を定義するための言語のことで、HTMLでは「タグ」と呼ばれる記述を用いて、見出しや段落、リンク、画像の配置などを指定できます。
例えば、次のようなコードを書けば、Webページに「見出し」と「段落」を表示できます。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>HTMLとは?</h1>
<p>HTMLはWebページの構造を作るための言語です。</p>
</body>
</html>
下の画像のようにブラウザでは表示されます。

2. HTMLの基本構造
HTML文書は、以下のような基本的な構造で成り立っています。
(1) DOCTYPE宣言
<!DOCTYPE html>
は、その文書がHTMLで書かれていることをブラウザに伝えるための宣言です。
(2) <html>
タグ
Webページ全体を囲むタグであり、HTML文書の開始と終了を示します。
(3) <head>
タグ
Webページの情報(メタデータ)を記述する部分です。ここには、ページのタイトルやCSSのリンクなどが含まれます。
(4) <body>
タグ
実際にブラウザに表示される内容を記述する部分です。見出し、テキスト、画像、リンクなどが含まれます。
3. HTMLの主要なタグ
HTMLには、さまざまな要素を記述するための「タグ」が存在します。ここでは代表的なタグを紹介します。
(1) 見出しタグ (<h1>
~<h6>
)
Webページのタイトルやセクションの見出しを指定するタグです。
<h1>これは大見出し</h1>
<h2>これは中見出し</h2>
<h3>これは小見出し</h3>

(2) 段落タグ (<p>
)
文章を段落として表示するためのタグです。
<p>これは段落の文章です。</p>

(3) リンクタグ (<a>
)
他のページや外部サイトへ移動するためのリンクを作成できます。
<a href="https://ar-aca.tech/">このリンクをクリック</a>

(4) 画像タグ (<img>
)
Webページに画像を表示するためのタグです。
<img src="image.jpg" alt="画像の説明">
image.jpgというファイル名の画像を表示するコードです。
(5) リストタグ (<ul>
/ <ol>
/ <li>
)
箇条書きリストや番号付きリストを作成できます。
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<ol>
<li>番号付き項目1</li>
<li>番号付き項目2</li>
</ol>

4. HTMLとCSS・JavaScriptの関係
HTMLだけではWebページのデザインや動きを表現することは難しいため、一般的に以下の技術と組み合わせて使用されます。
- CSS(Cascading Style Sheets): デザインやレイアウトを調整する言語
- JavaScript: Webページに動きをつけるためのプログラミング言語
例えば、CSSを使って見出しの色を青くする場合、以下のように記述します。
<style>
h1 {
color: blue;
}
</style>
また、JavaScriptを使ってボタンをクリックしたときにアラートを表示することもできます。
<script>
function showAlert() {
alert("ボタンがクリックされました!");
}
</script>
<button onclick="showAlert()">クリック</button>
5. HTMLを学ぶメリット
HTMLを学ぶことで、以下のようなメリットがあります。
(1) Web制作の基礎が身につく
HTMLはWeb開発の基本であり、学ぶことでサイトの構造を理解しやすくなります。
(2) 自分でWebサイトを作れる
基本的なHTMLの知識があれば、簡単なWebページを作成できるようになります。
(3) プログラミングの第一歩として最適
HTMLは初心者向けの言語として学びやすく、プログラミングの入門として最適です。
まとめ
HTMLは、Webページの基本的な構造を作るためのマークアップ言語です。タグを使って、見出しや文章、画像、リンクなどを配置し、CSSやJavaScriptと組み合わせることで、より魅力的なWebページを作成できます。
これからWeb制作を始めたい方は、まずHTMLの基本をしっかり学び、実際に手を動かしてコードを書いてみることをおすすめします!