【初心者向け】HTMLでの見出し・段落のつけ方

2021.09.15
html 段落

自分のwebサイトで段落を分けて文章をすっきり見せたいけどやり方が分からない・・・」「見出しと段落って何が違うの?

こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。

  • HTMLでの段落の分け方がわかる

基本的なことのやり方が分からず途方に暮れる経験は誰しもあると思います。是非本記事をお読みいただき、HTMLでの段落の分け方を理解してください。

HTMLでの見出し・段落

webサイトを作ったり文章を作るとき、「見出しと段落の違い」がよくわからない方も多いと思うので、簡単に解説していきます。

(1)HTMLでの見出し

HTMLでの見出しとは、本で言うと「章のタイトル」に当たります。本サイトでは上記タイトルの「HTMLでの見出し・段落」の部分が見出しになります。

見出しはサイトを読みやすくするために欠かせない要素なので、自身のwebサイト等で文章を書く際は見出しをつけることをおすすめします。

(2)HTMLでの段落

段落は敢えて説明する必要はないかと思いますが、文章をまとまりごとに分けることでユーザにとって読みやすい構成を作ることができます。1点注意点としては、改行と段落分けは異なります。改行はただ行を変えるだけですが、段落分けは改行よりも行と行の間のスペースが少しあくので、意味のまとまりごとに文章を分けることに適しています。こちらは、段落の分け方の章で詳しく解説します。

ただし、あまりに段落を分けすぎるとかえって読みにくい文章になるため、バランスを見ながら調節することをおすすめします


アプリケーションWEBサービス作成に興味のある方へ!
DMM WEBCAMP】は、独学では挫折率の高いプログラミング学習を徹底サポートします。
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる!
✔基礎知識をゼロから丁寧に学習できるコースを用意!

あなたに合ったカリキュラムを紹介

HTMLでの見出しのつけ方

それでは、まずは見出しのつけ方から解説していきます。

見出しは階層ごとに「h1~h6要素」を使い分けることで簡単につけることができます。”h”はheadingの略で、h1が最も上位の階層、h6が最も下位の階層です。具体的なコードを見ていきましょう。

HTML
<h1>h1タグ(記事タイトル)</h1>

<h2>h2タグ見出し</h2>

<h3>h3タグ見出し</h3>

<h4>h4タグ見出し</h4>

<h5>h5タグ見出し</h5>

<h6>h6タグ見出し</h6>

上記のように見出しタグだけのコードを書くと、このような見え方になります。

いかがでしょうか。設定したタグの階層に応じて見出しがついていますね(もちろん、見出しのフォントや色も設定ができますが今回は初心者の方向けですので割愛します)。

hタグを使うだけで非常に簡単に見出しが付けられることがお分かりいただけたと思います。

HTMLでの段落の分け方

続いて、段落の分け方を解説していきます。見出しはhタグを使いましたが、段落分けではpタグを使います。pはParagraphの略です。

先ほどの見出しをつけたコードのh2タグの続きに、以下のようにpタグを使って段落を設定してみましょう。

HTML
<h1>h1タグ(記事タイトル)</h1>

<h2>h2タグ見出し</h2>
<p>これは1段落目の文章です。</p>
<p>これは2段落目の文章です。<br>ここで改行を入れます。</p>

<h3>h3タグ見出し</h3>

<h4>h4タグ見出し</h4>

<h5>h5タグ見出し</h5>

<h6>h6タグ見出し</h6>

上記のようにコードを書くと、以下のオレンジ枠のように段落分けが反映されます。

ここで注目していただきたいのは、2段落目の中で<br>を使って改行していることです。本記事の中でも「改行と段落分けは違う」ということを説明しましたが、上記を見ると改行と段落分けは行と行の間のスペースの広さが異なるということが一目瞭然だと思います


未経験からホームページWEBアプリケーションが作れるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔︎実践的なスキルが身に付くカリキュラムを用意!
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能!
✔通学不要!スキマ時間でプログラミング学習ができる!

生活スタイルに合わせて選べる3コース

まとめ

いかがでしたでしょうか。HTMLで見出しのつけ方と段落の分け方を紹介しました。「見出し・段落・改行」は初心者の頃は少し分かりにくいですが、適切に使い分けることでユーザにとって読みやすい記事・サイトを構成することができます。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5