はじめに
HTML（HyperText Markup Language）は、ウェブサイト制作の基本となる言語です。「ウェブサイトを作りたい！」と思ったとき、最初に学ぶべきものがHTMLです。この記事では、HTMLを全く知らない初心者でもわかりやすく、基礎を徹底的に解説していきます。安心して学んでください！
ふくろう「ねこ君、HTMLの基本って、何だと思う？」
ねこ「名前は聞いたことあるけど、正直何なのかよくわかりません……。」
ふくろう「なるほど。HTMLはウェブページを作るための言語なんだ。今日はその基礎を学んでみよう。」
ねこ（ウェブページを作れるって、なんだかカッコいい気がする！でも、本当にできるかな……？）
HTMLとは何か？
HTMLの役割とは？
HTMLは、ウェブサイトの構造を決める言語です。以下のような要素を定義するために使います。
- 見出しや段落の設定
- リストやリンクの作成
- 画像や動画の挿入
- フォームの設置
ウェブサイトは、HTMLで骨組みを作り、その上にCSSやJavaScriptでデザインや機能を追加します。
HTMLの基本構造
HTML文書は、以下のような基本構造で成り立っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
</body>
</html><!DOCTYPE html>: HTML5を使用していることを宣言します。<html>: HTML文書の始まりと終わりを示します。<head>: メタ情報（タイトルやCSSのリンクなど）を記述します。<body>: 実際にブラウザに表示される内容を記述します。
マークアップ言語の意味
「マークアップ言語」とは、テキストに「タグ」を使って構造を与えるものです。HTMLでは次のようにタグを使います。
<h1>これは見出しです</h1>
<p>これは段落です。</p>このように、見出しや段落を簡単に定義できます。
HTMLの役割と重要性
HTMLはウェブ制作において絶対に欠かせない言語です。その理由は、ウェブサイトの「骨格」を形成する役割を担っているからです。CSSやJavaScriptだけでは成り立たないウェブページも、HTMLがあれば基礎を築けます。
HTMLの基本タグ
見出しタグ <h1> ～ <h6>
見出しタグは、ページの構造をわかりやすくするために使います。
<h1>: 最も重要で大きな見出し<h6>: 最も小さな見出し
例：
<h1>これは一番大きな見出し</h1>
<h2>これは次に大きな見出し</h2>これを使えば、文章にメリハリがつき、読みやすくなります。
段落タグ <p>
段落を定義するために使用します。すべての文章を1つの段落に詰め込むのではなく、適切に区切ることで読みやすくなります。
例：
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>リストタグ <ul> と <ol>
リストを作るために使います。順序付きと順序なしの2種類があります。
- 順序付きリスト（番号付き）:
<ol>
<li>最初の項目</li>
<li>次の項目</li>
</ol>- 順序なしリスト（箇条書き）:
<ul>
<li>最初の項目</li>
<li>次の項目</li>
</ul>リストを使うと、情報を整理して見やすくできます。
初めてのHTMLを書いてみよう
サンプルコード
以下のコードを実際に試してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは私の初めてのHTMLページです。</p>
</body>
</html>実際にファイルを作る手順
- テキストエディタを開く（例: Visual Studio Code）
- 上記のコードをコピーして貼り付ける
index.htmlという名前で保存- 保存したファイルをブラウザで開く
自分で試してみるメリット
- 理解が深まる
- エラーが発生したときの対応力がつく
- コーディングの楽しさを実感できる
最初は小さな成功体験を積み重ねることが大切です！
まとめ
HTMLは、ウェブ制作の第一歩です。この記事で紹介した基本を覚えれば、シンプルなウェブページを作ることができます。次はCSSやJavaScriptを学んで、さらに高度なページ制作に挑戦してみましょう！
ふくろう: 「ねこ君、どうだい？自分でもHTMLが書けそうな気がしてきたかい？」
ねこ: 「はい！思ったより簡単そうで、自信がつきました！」
ふくろう: 「それはよかった。この調子で学び続ければ、君も立派なウェブ制作者になれるよ！」
ねこ（心の声）: （ふくろう先生、ありがとう！次回も楽しみだな！）
ふくろう「ねこ君、どうだい？自分でもHTMLが書けそうな気がしてきたかい？」
ねこ「はい！思ったより簡単そうで、自信がつきました！」
ふくろう「それはよかった。この調子で学び続ければ、君も立派なウェブ制作者になれるよ！」
ねこ（ふくろう先生、ありがとう！次回も楽しみだな！）
コメント