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

 

見出しタグ(hタグ)とは

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

 

hタグの使い方

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

スクリーンショット 2016-05-29 19.04.53

 

〈ブラウザ上の表示〉

スクリーンショット 2016-05-29 19.07.55

 

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

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

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

 

段落タグ(pタグ)とは

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

 

pタグの使い方

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

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

 

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

スクリーンショット 2016-05-29 20.50.55

 

〈ブラウザ上の表示〉

スクリーンショット 2016-05-29 20.45.21

 

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

 

 

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

スクリーンショット 2016-05-29 20.49.26

 

〈ブラウザ上の表示〉

スクリーンショット 2016-05-29 21.26.16

 

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

 

 

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

 

スクリーンショット 2016-05-29 21.37.51

 

〈ブラウザ上の表示〉

スクリーンショット 2016-05-29 21.38.51

 

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

 


まとめ

1.見出しタグ 

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

2.段落タグ

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


 

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