1日目：HTMLって何？

こんにちは！今日は、ウェブページを作るための「HTML」という言葉について学んでいこう！HTMLは、テキストや画像、リンクなどを組み合わせてウェブページを作るための言語なんだ。

📘 HTMLって？

HTMLはウェブページを作成するための基本的な言語で、ウェブ上の内容を構造化するために使われるよ。例えば、文字の大きさを変えたり、画像を貼ったり、リンクを作ったりすることができるんだ！

🧩 HTMLの基本構造

HTMLファイルは、こんな感じで書くんだ。

<!DOCTYPE html> 
<html> 
  <head> 
    <title>はじめてのページ</title> 
  </head>
  <body> 
    <h1>こんにちは！</h1> 
    <p>これが最初のHTMLページです。</p> 
  </body>
</html>

🔍 それぞれの意味は？

<html>：HTMLページの始まりと終わりを教えてくれるタグ
<head>：ページのタイトルや、画面に表示されない情報を含む部分
<title>：ブラウザのタブに表示されるページのタイトル
<body>：実際にウェブページで表示される内容（テキストや画像など）
<h1>：ページの最も重要なタイトルに使うタグ
<p>：段落を作るためのタグ。文章を区切るときに使うよ

📌 タグって何？

タグは、ブラウザにページの内容や構造をどのように表示するか指示するための「命令文」だよ。タグを使うことで、ブラウザに「ここに見出しを表示してね」とか、「ここに段落を作ってね」といった指示を出すことができるんだ。

🔍 タグの基本

HTMLでは、ほとんどのタグは2つの部分からできているよ：

開始タグ（始まりのタグ）
終了タグ（終わりのタグ）

例えば、段落を作るときはこんなふうに書くんだ：

<p>ここに文章が入ります。</p>

<p> は開始タグ（段落を始める）、</p> は終了タグ（段落を終わらせる）だよ。

❓ 終了タグがないタグもある

タグはペアで使うことが多いけれど、中には終了タグがいらないものもあるよ。終了タグがないもの（自己閉じタグ）は、タグを閉じる必要がないため、そのまま使えるんだよ。例えば、画像を表示するタグはこんなふうに書くんだ：

<img src="image.jpg" alt="画像の説明">

ここには終了タグがないけれど、ちゃんと画像を表示してくれるよ。

🔗 どうしてタグを使うの？

タグを使うことで、ウェブページに次のような要素を追加できるよ：

見出し：ページのタイトルや重要な部分に大きな文字を使う
段落：文章を区切って読みやすくする
リンク：クリックして別のページに移動できるようにする
画像：ページに画像を表示する
リスト：項目を並べて表示する

💡 例

例えば、見出しと段落を使ってこんなページを作ることができるんだ：

<h1>私のウェブページ</h1>

<p>これは私のウェブページです。ここに色々な情報を載せていきます。</p>

<h1>は見出し1というタグで、ページの一番大きなタイトルを作るんだ。

<p>は段落のタグで、文章を区切って表示するよ。

💻 自分で書いてみよう！

さあ、実際にHTMLファイルを作ってみよう！以下のステップを試してみてね：

まずはテキストエディタ（メモ帳やテキストエディット）を開こう
上に書いたコードをコピーして貼り付けてみよう
ファイルを保存しよう！ファイル名は hello.html にしよう
保存したファイルをブラウザで開いてみよう！うまく表示されるかな？もし表示されない場合は、タグが正しく閉じられているか、スペルミスがないかを確認してみよう

⚙️ タグの使い方をもっと知ろう

HTMLでは、さまざまなタグを使うんだ。例えば、<p>タグを使って段落を作ったり、<a>タグでリンクを作ったりできるよ。どんどんいろんなタグを使って、ページをカスタマイズしてみよう！

✨ 今日のまとめ

HTMLはウェブページの「骨組み」を作るための道具だよ！
タグを使って、ページの内容や構造を作るんだ。
まずは簡単なHTMLファイルを作ってみよう！

📚 もっと学ぼう！

HTMLの基本を覚えたら、次はもっと楽しいことに挑戦してみよう！例えば、画像をページに追加したり、リンクを作ったりすることができるよ。次回のレッスンもお楽しみに！