HTML入門 - div と span は囲む相手が違う

同じ文章でも、内側が div なら段が分かれる

外側の div は変えず、名前を囲む内側のタグだけ切り替えます。

span は文章と同じ行の中で、囲んだ文字ぶんだけをまとめる
内側の div は1段を使い、前後の文字も別の段へ分ける

1 / 3

写真と段落は div、名前だけは span

自己紹介の img と p を外側の div に入れ、p の文章のうち名前だけを span で囲みます。

<div>

<div>写真と段落をまとめる

<img

src="https://yumesaku.tech/course-assets/profile-sample.svg"

alt="山田太郎のプロフィール写真"

width="160" height="160">

<p>

こんにちは。<span>山田太郎</span>です。<br>

<span>山田太郎</span>名前だけを囲む

2026 年から <strong>HTML</strong> と <em>CSS</em> を学びはじめました。

いまはプロフィールサイトを自分の手でつくっています。

</p>

</div>

<div>

写真と段落をまとめる

<img

src="https://yumesaku.tech/course-assets/profile-sample.svg"

alt="山田太郎のプロフィール写真"

width="160" height="160">

<p>

こんにちは。<span>山田太郎</span>です。<br>

名前だけを囲む

2026 年から <strong>HTML</strong> と <em>CSS</em> を学びはじめました。

いまはプロフィールサイトを自分の手でつくっています。

</p>

</div>

2 / 3

考えてみよう外しても進めます

自己紹介の img と p を1つにまとめ、p の文章のうち名前だけを囲むには、外側と内側にどのタグを使いますか。

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 3