HTMLで見出しタグと段落タグを使う方法【初心者向け】

初心者向けに、HTMLで「見出しタグ」と「段落タグ」を使う方法を解説した記事です。HTML5を使用。見出しは【hタグ】を、段落は【pタグ】をそれぞれ使います。初めてでもわかるようにサンプルコードもあります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。
今回は、HTMLの「見出しタグ」と「段落タグ」について解説します。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

HTMLの見出しと段落

HTMLはもともとスイスの物理学研究所の研究員だったティム・バーナーズ=リーという人物が、数千人規模の研究者たちと研究や仕事のやりとりをするためにつくられました。初期のHTMLは学術文書を共有するシステムとして開発されたため、論文の書き方に沿うように、タイトル・本文・引用と文書の構造が明確に定義されています。

今回は見出しと段落を分けることにより、ちょっとしたウェブページを作ってみましょう。

 

見出し(hタグ)

見出しはHeadlineの頭文字hを意味するhタグを使います。

body の部分にh1タグをつかって「はじめてのHTML」と記述してみましょう。

<h1>はじめてのHTML</h1>

はじめてのHTML

大きな文字で見出しが表示されました。

 

hタグには見出しが6段階あり、一番重要な大見出しがh1、中見出しがh2、小見出しがh3と数字が大きくなるにつれ、深い階層にある見出しとなります。

html見出しと段落

論文を書くときに、章・節・項と文書の構造があるように、HTMLでも見出しはh1→h2→h3…と数の小さなものから順番につけるのがルールです。h2の見出しで書かれた文章のなかにh1の見出しを入れることは、深い階層の文章の中に浅い階層の文章を入れることとなり、文の構造を崩してしまうことになるので気をつけましょう。

 

大石ゆかり

6個もあって、どうやって使ったらいいんですか?

田島悠介

見出しタグは、ページ内で一番言いたいことなので、h1タグはページのtitleタグと同じになってることもあるよね。

大石ゆかり

h1タグは何回も使用してもいいんでしょうか?

田島悠介

h1タグを複数回利用する人もいるでしょうが、一般的には1回のみの利用に留めておいたほうがSEO上良いかと思うよ。

 

複数の見出しタグ(hタグ)を使用した例

先程の例では、h1からh6までそれぞれ1回づつ利用したHTML構造でした。

実務では、複数の見出しタグを組み合わせて利用します。

 

コード例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>複数の見出しタグ(hタグ)を使用した例</title>
  </head>
  <body>
    <h1>h1タグ</h1>
    <p>h1タグ内のp要素</p>
      <h2>h2タグ</h2>
      <p>h2タグ内のp要素</p>
        <h3>h3タグ</h3>
        <p>h3タグ内のp要素</p>
          <h4>h4タグ</h4>
          <p>h4タグ内のp要素</p>
          <h4>h4タグ</h4>
          <p>h4タグ内のp要素</p>
        <h3>h3タグ</h3>
        <p>h3タグ内のp要素</p>
          <h4>h4タグ</h4>
          <p>h4タグ内のp要素</p>
          <h4>h4タグ</h4>
          <p>h4タグ内のp要素</p>
  </body>
</html>

 

コードの解説

h1タグとh2タグに関してはこれまで通りです。

今回は、2つのh3タグと4つのh4タグが記載されています。

ここでは次のイラストのように、h3の中に2つのh4タグが記載される設計になっています。

複数の見出しタグを利用する場合はこのように利用することができます。

 

段落(pタグ)

文章はParagraphの頭文字pをとったpタグで表します。文の段落を区切る機能を持ち、pタグの中に文章を記述することで一つの段落がつくられます。

pタグを使って下の文章を段落分けしてみましょう。

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。現在は、WHATWG により仕様が作られ、それを元に W3C により勧告が行われるという流れになっている。W3C は、XML ベースの規格である XHTML の勧告も行っている。

 

まず文章全体をpタグで囲んでみました。
見出しと段落2

文章がそのまま一つのかたまりになっています。このままでは少し見づらいですね。

 

pタグを使って文を3つに分けてみましょう。

pタグの使い方

段落をつくったことにより文章全体がすっきりして見やすくなりました。

pタグの機能は文章を段落に分けることです。pタグを使うと段落と段落の間に一行空白が開きます。改行をしたい場合には別のタグ(<br/>)を使うので注意しましょう。

 

段落分けした文章に、先ほどの見出しをつけてみましょう。

見出しと段落の使い方
かなりシンプルですが、ぐっとWebページらしくなりましたね!

 

質の高い文章と適切な見出しをつけることにより、Web上での文書の価値を高めることができます。HTMLはWebブラウザが解読・表示するものなので、コンピューターが文書構造を正しく理解できるようにページを記述することが肝心です。

 

今回はHTMLで見出しタグと段落タグを使う方法をご紹介しました。

 

大石ゆかり

pタグを使わなくても、brタグ2個でも良さそうなんですけど?

田島悠介

細かいかもしれないけど、brタグは行の改行を行うために利用する必要があるんだ。

大石ゆかり

段落にはpタグ。行の改行はbrタグになるんですね!

田島悠介

そうだよ!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長

開発実績:PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。

その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ!を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。