さとまたwiki

要素とタグ

HTMLの基本単位を理解しよう

「要素」と「タグ」の違い

よくある混乱：「要素」と「タグ」は同じ意味？

タグ（tag）

<p> や </p> のこと。
目印のようなもの。「ここから」「ここまで」を示す。

要素（element）

開始タグ + 中身 + 終了タグ の全体。
<p>こんにちは</p> 全部で1つの要素。

<p> こんにちは </p>

↑ 開始タグ ↑ 内容 ↑ 終了タグ

← これ全体が「p要素」→

タグの書き方

基本のタグ

開始タグと終了タグで内容を挟む

html 
<!-- 基本の形：開始タグ → 内容 → 終了タグ -->
<p>これは段落です</p>

<!-- div: 「まとまり」を作る箱 -->
<div>これはdiv要素です</div>

<!-- span: 文章の一部を囲む -->
<span>これはspan要素です</span>
プレビュー

これは段落です

これはdiv要素です
これはspan要素です

終了タグがいらない要素

なぜ終了タグがいらない？

「中身を挟む」必要がない要素は、終了タグが不要です。
例えば画像（img）は「画像を表示する」だけで、中にテキストを入れることはありません。

空要素（からようそ）

開始タグだけで完結する

html 
<!-- img: 画像を表示（中に何も入れない） -->
<img src="image.jpg" alt="画像の説明">

<!-- br: 改行（強制的に次の行へ） -->
改行の<br>例です

<!-- hr: 水平線（区切り線） -->
<hr>

<!-- input: 入力欄（ユーザーが文字を入力） -->
<input type="text" placeholder="名前を入力">
プレビュー
画像

改行の
例です

ブロック要素とインライン要素

日常での例え：

ブロック要素 = 段ボール箱

1つ置くと、その下には別のものを置くしかない。
縦に積み重なる。

インライン要素 = 文字や単語

文章の中で自然に並ぶ。
横に流れる。

なぜこの区別が大事？

「横に並べたい」のに縦に並んでしまう、という問題を解決するため。
要素の種類を知っていれば、思い通りのレイアウトが作れます。

ブロック要素の特徴

  • • 横幅いっぱいに広がる
  • • 前後で改行される（縦に並ぶ）
  • • 例: div, p, h1〜h6, ul, li

インライン要素の特徴

  • • 中身の分だけ幅を取る
  • • 改行されない（横に並ぶ）
  • • 例: span, a, strong, em, img

ブロック要素の動き

それぞれが横幅いっぱいに広がり、縦に並ぶ

html 
<!-- divは横幅いっぱいに広がる -->
<!-- 次のdivはその下に配置される -->
<div style="background: lightblue; padding: 10px;">
  1つ目のdiv
</div>
<div style="background: lightgreen; padding: 10px;">
  2つ目のdiv（下に配置）
</div>
プレビュー
1つ目のdiv
2つ目のdiv（下に配置）

インライン要素の動き

文章の中で自然に横に並ぶ

html 
<p>
  これは
  <span style="background: yellow;">黄色い部分</span>
  と
  <strong>太字の部分</strong>
  と
  <a href="#">リンク</a>
  の例です。すべて横に並びます。
</p>
プレビュー

これは黄色い部分と太字の部分とリンクの例です。すべて横に並びます。

属性（Attribute）

属性とは？

タグに追加情報を付けるもの。
例：リンクタグ <a> だけでは「どこにリンクするか」が分からない。
→ href="URL" という属性で「リンク先」を指定する。

よく使う属性

それぞれの役割を理解しよう

html 
<!-- href: リンク先のURL -->
<a href="https://google.com">Googleへ</a>

<!-- src: 画像ファイルの場所 -->
<!-- alt: 画像が見えない時の説明文 -->
<img src="photo.jpg" alt="海の写真">

<!-- id: このページで1つだけの名前（識別用） -->
<div id="header">ヘッダー</div>

<!-- class: グループ名（同じスタイルを適用） -->
<p class="warning">警告メッセージ</p>
<p class="warning">別の警告</p>

<!-- style: 見た目を直接指定 -->
<span style="color: red;">赤い文字</span>
プレビュー
Googleへ
海の写真
#header

.warning

赤い文字

id と class の違い
• id：ページ内で1つだけ。「このボタン」を特定したい時に使う
• class：何度でも使える。「警告メッセージすべて」に同じスタイルを適用したい時

テキスト関連の要素

見出し（h1〜h6）

数字が小さいほど重要な見出し

html 
<!-- h1: 一番重要。ページのタイトル（1ページに1つ） -->
<h1>サイトのメインタイトル</h1>

<!-- h2: 章のタイトル -->
<h2>第1章：はじめに</h2>

<!-- h3: 節のタイトル -->
<h3>1-1. 基本の説明</h3>

<!-- h4〜h6: さらに細かい見出し -->
<h4>補足情報</h4>
プレビュー

サイトのメインタイトル

第1章：はじめに

1-1. 基本の説明

補足情報

テキストに意味を付ける

見た目だけでなく「意味」も伝える

html 
<!-- strong: 重要なテキスト（太字になる） -->
<p><strong>締め切りは明日です！</strong></p>

<!-- em: 強調（イタリックになる） -->
<p>これは<em>とても</em>重要です</p>

<!-- mark: ハイライト（蛍光ペン） -->
<p>テストに<mark>ここが出ます</mark></p>

<!-- del: 削除された内容（取り消し線） -->
<p>価格: <del>10,000円</del> → 8,000円</p>

<!-- code: プログラムコード -->
<p><code>console.log()</code>で出力できます</p>
プレビュー

締め切りは明日です！

これはとても重要です

テストにここが出ます

価格: 10,000円 → 8,000円

console.log()で出力できます

リスト要素

ul と ol はいつ使い分ける？
• ul（unordered list）：順番が関係ない → 買い物リスト、機能一覧
• ol（ordered list）：順番が大事 → 手順、ランキング

順番なしリスト（ul）

・で始まる箇条書き

html 
<!-- ul: unordered list（順番なし） -->
<!-- li: list item（リストの項目） -->
<h3>好きな果物</h3>
<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>
プレビュー

好きな果物

  • りんご
  • バナナ
  • オレンジ

順番ありリスト（ol）

1, 2, 3... と番号が付く

html 
<!-- ol: ordered list（順番あり） -->
<h3>カレーの作り方</h3>
<ol>
  <li>野菜を切る</li>
  <li>肉を炒める</li>
  <li>水を入れて煮る</li>
  <li>ルーを入れる</li>
</ol>
プレビュー

カレーの作り方

  1. 野菜を切る
  2. 肉を炒める
  3. 水を入れて煮る
  4. ルーを入れる

まとめ

覚えておくこと

  • • タグは目印、要素は全体
  • • ブロック = 縦に並ぶ
  • • インライン = 横に並ぶ
  • • 属性で追加情報を付ける

よく使うタグ

  • • div, p, h1〜h6（ブロック）
  • • span, a, strong（インライン）
  • • img, input, br（空要素）
  • • ul/ol + li（リスト）
前へ：基本構造 次へ：フォーム