[HTML]簡単!見出しタグと段落タグを使う方法
今回は、初心者向けに、HTMLの基本操作である、見出しタグと段落タグを使う方法を簡単にご紹介します。
見出しタグ(hタグ)とは
見出しタグ(hタグ)とは、文字どおり、文書の見出しとして指定するタグのことを言います。Headlineの頭文字 h からとっています。hタグは<h1>から<h6>まで6段階あり、若い番号の方が見出しとして重要度が高くなります。
hタグの使い方
bodyの部分に、「見出し」としたいテキストを、各段階のhタグで囲みます。
↓
〈ブラウザ上の表示〉
この通り、重要度が高い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タグで囲ってみました。どのように見えるでしょうか。
↓
〈ブラウザ上の表示〉
この通り、文章が続いているため、見づらい内容になってしまっています。
では、pタグを使って段落分けしていきます。
↓
〈ブラウザ上の表示〉
pタグでいくつかに区切ったことにより、文章全体が読みやすくなりました。なお、pタグを使うと、</p>で終了したところが改行され、次の段落との間に一行分の空白が追加されます。
では、段落をつけて読みやすくなった文章に、見出し行として、<h1>タグで「段落とは」と追加してみます。
↓
〈ブラウザ上の表示〉
いかがですか?コンテンツとしてユーザーに伝わりやすくなったと思いませんか?
まとめ
1.見出しタグ
見出しにしたいテキストを<h></h>で囲む。6段階まであり、若い番号から重要度が高く、順にすようするのがルール。なお、<h1>が使えるのは文書の一番重要な一箇所のみである。
2.段落タグ
文章を<p></p>で囲むことにより、段落ができる。</p>で終了したところが改行され、一行分の空白が追加される。
今回は、見出しタグと段落タグについてご紹介しました。見出しタグと段落タグをうまく使い分けることで、ユーザーが読みやすいコンテンツになるようにしてみてくださいね♪