見出しタグを適切に使う

見出しタグを適切に使う

見出しタグ (heading tags) (HTML タグの <head> や HTTP headers とは混同しないようにしてください) は、ユーザーにページの構成を示すために使用されます。最も重要であることを示す <h1> から順に、重要度の最も低いことを示す <h6> まで、6 種類のサイズがあります。

ニュース記事を含むページでは、<h1> タグにサイト名を入れ、<h2> タグに記事のトピックを書くことが一般的です
ニュース記事を含むページでは、<h1> タグにサイト名を入れ、<h2> タグに記事のトピックを書くことが一般的です

見出しタグは通常、このタグで囲まれたテキストを普通のテキストに比べて大きく表示させるのでユーザーがその重要性に気づく視覚的なきっかけとなり、その下に続くコンテンツがどのようなものであるかを理解しやすくなります。複数の見出しタグのサイズを使い分けてコンテンツに階層構造を持たせると、ユーザーがページを読み進めやすくなります。

良い見出しタグの付け方

  • アウトラインを書くことを想像する ―― 目次を作るように、そのページのコンテンツの何が主要なポイントで次に何が重要なのかを考え、見出しタグを使うのに適切な場所を判断しましょう。

    注意点
    • ページ構成とは関係なくテキストを見出しタグで囲むことはしない
    • <em> や <strong> のほうが適切だと思われる箇所で見出しタグを使わない
    • 見出しタグのサイズの使い分けを不規則にしない
  • ページ全体を通して見出しタグは慎重に利用する ―― 見出しタグは使用する意義がある場所で使いましょう。見出しタグがページ内に多すぎると、ユーザーにとってコンテンツが読みづらくなり、 ひとつのトピックがどこで終わって次のトピックがどこから始まるのかわかりにくくなります。

    注意点
    • ページ内で見出しタグを使いすぎない
    • ページにあるすべての文章を見出しタグに入れない
    • 見出しタグを構造を示すためではなく、スタイルを整える目的で使用しない
次のページへ
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

Google爆弾
Googleに限らず、検索エンジンでネガティブな言葉を入力すると特定のホームペー ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]