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の基本をしっかり学び、実際に手を動かしてコードを書いてみることをおすすめします！
