【HTML入門】hタグで見出しを表示してみよう【サンプルあり】

見出しとは

↑まさにこういうものが見出しです。

HTMLはおもにWEBページを作るときに用いられますが、見出しも段落もないWEBページは読みにくいですよね。

見出しを効果的に使うことで、ユーザビリティが格段に上がります。

hタグを使おう

HTMLで見出しを作るためには、hタグを利用します。
(hはheadingの略です)

<h1>見出しだよ</h1>

hタグにはレベルがあります。
h1が一番大きな見出し、h2が2番目に大きな見出し、…、という具合に1番から6番まで用意されています。

<h1>1番大きな見出しだよ</h1>
<h2>2番目に大きな見出しだよ</h2>
<h3>3番目に大きな見出しだよ</h3>
<h4>4番目に大きな見出しだよ</h4>
<h5>5番目に大きな見出しだよ</h5>
<h6>6番目に大きな見出しだよ</h6>

サンプル

上記のコードを実装すると、実際には以下Resultのように見えます。

See the Pen hタグで見出しを表示してみよう by sonoha (@sonoha) on CodePen.

練習問題

  1. 指示通りに見出しを設定してみましょう。

ここをクリックすると編集できます↓

See the Pen hタグ 練習問題 by sonoha (@sonoha) on CodePen.