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.