HTMLを、コードを書いて実行結果を試しながら学んでいくページです。
各項目で、右下にある「Run Pen」を選択すると実行結果を見ることができます。

段落

段落(paragraph)を作るためのタグが p タグです。

<p> と </p> の間に文章を入れることで、段落を定義することができます。
試しに、p タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen 段落 by Y Miyamoto (@fnsxsbvk-the-encoder) on CodePen.

見出し

見出し(header)を作るためのタグが h タグです。h1からh6まで使用でき、数字が小さいほど大きな見出しになります。

<h●> と </h●> の間に挟まれたフレーズが、見出しとなります。

See the Pen 見出し by Y Miyamoto (@fnsxsbvk-the-encoder) on CodePen.

見出しの使い分け

h1からh6までの見出しの大きさの違いによって、文書構造を整理します。

See the Pen 見出しの使い分け by Y Miyamoto (@fnsxsbvk-the-encoder) on CodePen.

グループ化

 グループ化するためのタグが div タグ(分割:division)と span タグです。グループ化することで、文章構造がより見やすくなったり、CSS で制御をしやすくなります。
div タグの内外には他のタグを入れることができます。div タグの前後には改行が入りますが、span タグの前後には何も入りません。そのため、span タグは文章中に入れることが多いです。
 試しに、div タグと span タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen グループ化 by Y Miyamoto (@fnsxsbvk-the-encoder) on CodePen.

改行

 HTML では普通に改行しても改行がされません。改行するためのタグが br タグ(改行:line break)です。
 試しに、br タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen 改行 by Y Miyamoto (@fnsxsbvk-the-encoder) on CodePen.