HIMLの基本文法

HTML (HyperText Markup Language) の基本文法を解説します！

1. HTML の基本構造

HTML ドキュメントは、<!DOCTYPE html> から始まり、<html>, <head>, <body> などのタグで構成されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLの基本</title>
</head>
<body>
    <h1>見出し</h1>
    <p>これは段落です。</p>
</body>
</html>

2. HTML の基本要素

(1) 見出しタグ (`<h1>` 〜 `<h6>`)

見出しを表すタグで、<h1> が最も大きく、<h6> が最も小さいです。

<h1>大見出し (h1)</h1>
<h2>中見出し (h2)</h2>
<h3>小見出し (h3)</h3>

(2) 段落 (`<p>`)

文章を表示するときに使います。

<p>これは段落です。</p>

(3) リスト (`<ul>`, `<ol>`, `<li>`)

・順不同リスト (箇条書き)

<ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>ぶどう</li>
</ul>

🔹 <ul> (unordered list) は「順番なしのリスト (箇条書き)」です。

・番号付きリスト

<ol>
    <li>朝起きる</li>
    <li>朝ごはんを食べる</li>
    <li>仕事に行く</li>
</ol>

🔹 <ol> (ordered list) は「順番ありのリスト (番号付き)」です。

(4) 画像 (`<img>`)

画像を表示するためのタグ。src 属性で画像ファイルのパスを指定します。

<img src="image.jpg" alt="説明文">

src="image.jpg" → 画像ファイルのパス
alt="説明文" → 画像の説明 (アクセシビリティ向上のため)

(5) リンク (`<a>`)

別のページに移動するリンクを作成できます。

<a href="https://example.com">リンクのテキスト</a>

🔹 href に移動先の URL を指定します。

(6) テーブル (表)

<table> を使うと表を作成できます。

<table border="1">
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>太郎</td>
        <td>25</td>
    </tr>
</table>

<tr> → 行 (row)
<th> → 見出しセル
<td> → 通常のセル

(7) フォーム

ユーザーからの入力を受け取るための要素です。

<form action="submit.php" method="post">
    <label for="name">名前：</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="送信">
</form>

<input> → 入力欄
<label> → 入力欄のラベル
<form> → フォーム全体
action="submit.php" → データを送信する先

3. HTML のポイント

✅ タグは基本的に開始 (<tag>) と終了 (</tag>) で囲む
✅ <img> や <input> などの「空要素」は閉じタグが不要
✅ タグは入れ子にできるが、正しく構造化することが重要
✅ class や id を使うと CSS でデザインを変更しやすい

📌 まとめ

HTML はタグで構成される
基本的なタグ (見出し, 段落, 画像, リンク, リスト, テーブル, フォーム) を覚えよう
構造を意識してコーディングすると、見やすくなる

HTML を理解すれば、Web ページ作成の基礎が身につきます！ 🚀

よかったらシェアしてね！

1. HTML の基本構造

2. HTML の基本要素

(1) 見出しタグ (<h1> 〜 <h6>)

(2) 段落 (<p>)

(3) リスト (<ul>, <ol>, <li>)