見出しタグを適切に使う

見出しタグを適切に使う

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

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

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

良い見出しタグの付け方

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

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

    注意点
    • ページ内で見出しタグを使いすぎない
    • ページにあるすべての文章を見出しタグに入れない
    • 見出しタグを構造を示すためではなく、スタイルを整える目的で使用しない
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

モバイル広告
インターネット広告のひとつ。モバイル端末(携帯、PDA、タブレット、スマートフォ ...→用語集へ

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

インフォメーション

RSSフィード


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