[HTML]簡単！見出しタグと段落タグを使う方法

• 更新：2017/12/05
• ライター：IBC

Tweet

今回は、初心者向けに、HTMLの基本操作である、見出しタグと段落タグを使う方法を簡単にご紹介します。

見出しタグ（hタグ）とは

見出しタグ（hタグ）とは、文字どおり、文書の見出しとして指定するタグのことを言います。Headlineの頭文字 h からとっています。hタグは<h1>から<h6>まで６段階あり、若い番号の方が見出しとして重要度が高くなります。

hタグの使い方

bodyの部分に、「見出し」としたいテキストを、各段階のhタグで囲みます。

↓

〈ブラウザ上の表示〉

この通り、重要度が高いhタグほど、大きく表示されます。

hタグは、大項目、中項目、小項目と、文書の階層構造に合わせて使うものであり、<h1>から<h2>…<h3>…と順に使っていくのがルールです。

なお、<h1>タグは、そのページで最も重要なテキストに対して使用するタグであり、１ページにつき、１項目使うのが基本です。

段落タグ（pタグ）とは

文章にはいくつかの段落があります。htmlにおいて、段落はpタグとして、文章を囲みます。その<p>～</p>で囲まれた文章が一段落となります。PとはParagraph(段落)の略です。

pタグの使い方

下記の文章を、pタグを使い段落分けしていきます。

段落は英語ではパラグラフ（paragraph）といいHTMLのpタグ、p要素（p element）もパラグラフに由来する。マークアップ言語(Markup Language)一種、HTML(HyperText Markup Language)では<p></p>の間に挿入する文章が段落である。

まず、文章全体をpタグで囲ってみました。どのように見えるでしょうか。

↓

〈ブラウザ上の表示〉

この通り、文章が続いているため、見づらい内容になってしまっています。

では、pタグを使って段落分けしていきます。

↓

〈ブラウザ上の表示〉

pタグでいくつかに区切ったことにより、文章全体が読みやすくなりました。なお、pタグを使うと、</p>で終了したところが改行され、次の段落との間に一行分の空白が追加されます。

では、段落をつけて読みやすくなった文章に、見出し行として、<h1>タグで「段落とは」と追加してみます。

↓

〈ブラウザ上の表示〉

いかがですか？コンテンツとしてユーザーに伝わりやすくなったと思いませんか？

まとめ

１．見出しタグ　

見出しにしたいテキストを<h></h>で囲む。６段階まであり、若い番号から重要度が高く、順にすようするのがルール。なお、<h1>が使えるのは文書の一番重要な一箇所のみである。

２．段落タグ

文章を<p></p>で囲むことにより、段落ができる。</p>で終了したところが改行され、一行分の空白が追加される。

今回は、見出しタグと段落タグについてご紹介しました。見出しタグと段落タグをうまく使い分けることで、ユーザーが読みやすいコンテンツになるようにしてみてくださいね♪

この記事を書いた人：IBC

IBC

ITブートキャンプ運営事務局です。 随時ブログを更新していきます。