方法 1: 意味はありますか?
<span class="Heading">記事タイトル</span>
<span> は状況によっては便利なタグですが、タイトルの完全な意味を伝えるものではありません。このメソッドを使用する利点の 1 つは、CSS ルールをアタッチし、見出しクラスを割り当ててテキストをタイトルのように表示できることです。
.見出し {
フォントサイズ: 24px;
フォントの太さ: 太字;
色: 青;
}
OK、これで、すべての見出しに見出しクラスが大きな太字フォントで青色でマークされます。素晴らしい！しかし、これは正しいことなのでしょうか? CSS をサポートしていないブラウザで閲覧するとどうなりますか?
たとえば、設定した外部スタイル シートのルールが古いバージョンのブラウザでサポートされていない場合はどうなりますか?あるいは、視覚障害のある人がスクリーン リーダーを使用してこのページを読んだ場合はどうなるでしょうか?これらの手段を通じて訪問者が見る (または聞く) ものは、ページ上の通常のテキストと変わらないはずです。
class="Heading" はタグに少し意味を追加しますが、<span> は依然として、ほとんどのブラウザのデフォルトのスタイルで変更できる通常のタグです。
検索エンジンは、このページをクロールするときに、あたかも存在しないかのように <span> タグを無視し、そこに含まれるキーワードについては特に注意を払いません。検索エンジンとタイトルの関係については後ほど詳しく説明します。
最後に、<span> タグはインライン要素であるため、別の行を形成するために、<p> タグや <div> タグなどの追加のブロックレベル要素内にネストする必要がある場合があります。 , これにより、タグが不要なコードでさらに乱雑になります。これらの追加タグは、CSS をサポートしていないブラウザでも同じテキストを表示できるようにするために必要です。
方法 2: <p> と <b> の組み合わせ
<p><b>記事のタイトル</b></p>
段落タグを使用するとブロックレベルで表示され、<b> を使用するとテキストが太字になります。しかし、この方法を使用して重要なタイトルをマークすると、同じ無意味な結果に直面します。
方法 A とは異なり、<b> タグを使用すると、CSS をサポートしていないブラウザであっても、ビジュアル ブラウザでテキストを太字にすることができます。ただし、<span> タグと同様、段落内で太字になっているからといって検索エンジンが優先順位を高くすることはありません。
スタイリングが難しい
<p> と <b> の通常の組み合わせを使用すると、別の欠点も生じます。このタイトルを他の段落と異なるようにデザインすることは不可能です。ページのコンテンツをより明確で構造化するために、特別なスタイルを使用してタイトルを強調表示したい場合がありますが、この方法では太字にしか見えません。
方法 3: スタイルと内容
<h1>記事のタイトル</h1>
まあ、なんと素晴らしいタイトルの定義でしょう。ほとんどの Web デザイナーはこれに精通しています。実際、<Hn> を適切に使用すると、ページ コンテンツに柔軟でインデックス付け可能、スタイル設定可能な構造を提供できます。
これは定義するための賢い方法でもあり、非常に簡単であることがわかるでしょう。追加のタグはもう必要ありません。これにより、他の 2 つの方法よりもわずかに多くのバイトが節約されるだけであると主張することもできます。これは無視できる程度ですが、節約は重要です。
<h1> ～ <h6> は、最も重要な見出し (<h1>) から最も重要でない見出し (<h6>) まで、6 つのレベルの見出しを表します。これらはそれ自体がブロックレベルであり、個別に並べるために他の要素を追加する必要はありません。シンプルで効果的、まさに素晴らしいツールです。
スタイルを簡単にカスタマイズ
<h1> タグは独自に使用し、<b> または <p> タグはページ全体での使用に適しているため、さまざまな CSS メソッドを使用してスタイルを設定できます。
さらに、タイトル タグは、スタイルをまったく必要とせずに、タイトルを明確に示すことができます。ビジュアル ブラウザでは、<h1> がより大きな太字フォントで表示されます。スタイルのないページには、意味を伝えるための適切な見出しタグが付いた、期待どおりの文書構造が表示されます。
スクリーン リーダー、PDA、携帯電話、ビジュアル ブラウザーと非ビジュアル ブラウザーはすべて、タイトル タグに遭遇したときに何をすべきかを理解し、タイトル タグを正しく処理し、ページ上の通常のテキストよりも真剣に扱います。 <span> タグを使用すると、CSS をサポートしていないブラウザはそれを特別に扱いません。
煩わしいデフォルトのスタイル
以前は、ブラウザーのデフォルトが非常に醜かったため、デザイナーはタイトル タグの使用を完全に避けていたかもしれません。または、デフォルトのサイズが巨大なため、<h1> または <h2> の使用を避け、代わりに大きい番号の見出しタグを使用してサイズを小さくします。
ただし、CSS を使用してこれらのタイトル タグを簡単に変更できることを強調することが重要です。たとえば、< ;h1> は画面の半分を占める巨大なタグである必要はありません。後ほど、CSS を使用してタイトル タグのスタイルを設定することがいかに簡単であるかを説明します。これで、皆さんの圧倒的な不安が少しでも軽減されることを願っています。
検索エンジンに優しい
これは大きなメリットです。検索エンジンはタイトルタグを好みます。一方、<span> タグや通常の太字の段落タグは、それほど意味がありません。タイトルに <h1> から <h6> を適切にマークすると、ユーザー側での労力はわずかですが、検索エンジンがページをクロールしやすくなり、最終的にユーザーがページを見つけられるようになります。
検索エンジンのボットはタイトル タグに特別な注意を払います。ここにキーワードを入力します。 <title> と <meta> が取得されるのと同じように、title タグに沿ってページを下方向に検索します。これらのタグを使用しない場合、タグ内に含まれるキーワードは価値があるとは見なされず、無視されます。
したがって、ほんの少しの努力で、ページのコンテンツに基づいて人々がサイトを見つけてくれる可能性を高めることができます。いいですね。
タイトルの並び順について
この例では、この特定のタイトルはドキュメントのタイトルであるため、ページ上で最も重要です。したがって、最も重要なタイトルタグである <h1> を使用します。 W3C 仕様に従って、いくつかの見出しレベルをスキップすることは悪い習慣であると考える人もいます。たとえば、次のページにいると想像してください。
<h1>記事のタイトル</h1>
次の見出しは (別の <h1> で繰り返されない場合)、<h2>、次に <h3> になります。おそらく、<h1> の後のレベルを 1 つスキップして、直接 <h3> に進むべきではありません。私も上記の観点に同意し、テキストに沿ったレベルの連続性を維持してレイアウト構造を構築する傾向があります。こうすることで、既存のページにタイトルやスタイルを追加するのが簡単になり、余分な番号の使用によって発生するエラーが減ります。
前述したように、デフォルトのフォント サイズが <h1> ほど不快なほど大きくないという理由だけで、デザイナーは <h4> を使用してページ上の最も重要な見出しにタグを付けることがあります。ただし、構造が先で、デザインは後であることを忘れないでください。 CSS を使用すると、いつでも見出しのスタイルを好みのテキスト サイズに設定できます。