[Sponsor]「プログラミングに興味はあるけど難しそう」
という方のための無料講座を渋谷で開催!
はじめてのWebデザイン『HTML・CSS』入門

2-3. 文章の見出しと段落のタグ(h1〜h6・p)

Webページ上で「見出し」を意味するh1〜h6タグ、「段落」を意味するpタグの使い方を解説します。

  • HTML・CSS
  • Webデザイン

公開日:2019/05/08最終更新日:2019/05/08

1.見出しタグ:h1〜h6の使い方

文章に見出しをつける際は、見出しタグを使います。

見出しは<h1>〜<h6>と6段階用意されており、大見出し・中見出し・小見出しのような段階を付けることができます。

サンプルのコード:

<h1>HTML5</h1>

2.段落タグ:pの使い方

<p>タグは段落を示すタグです。通常の文章を示すときに使います。

サンプルのコード:

<p>HTML5がどのように使われるか説明します。</p>

3.見出しタグと段落タグをindex.htmlに記述する

index.htmlの<body>〜</body>の中に以下の内容を記述します。

<h1>HTML5</h1>
<p>HTML5がどのように使われるか説明します。</p>

上書き保存をして、ブラウザを更新します。
※更新はブラウザのボタンをクリックするか、Ctrl + R(WindowsはF5)

以下のようにブラウザで表示されます。

見出し、段落要素の表示

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

このレッスンの著者