マークアップ言語 - title_HTML/Xhtml_web ページの作成

標準化されたデザイン ソリューション - マークアップ言語とスタイル ハンドブック
Web 標準ソリューション マークアップとスタイル ハンドブック
パート 1: マークアップ構文から始めるマークアップの概要
第 2 章のタイトル
概要:
すべての Web ページにタイトルが必要なだけでなく、正しくマークアップされていれば、Web デザインと使いやすさを向上させることができます。
見た目の点では、Web ページのタイトルには通常、大きなフォント サイズが使用され、本文とは異なる色やフォントが使用される場合があります。タイトルの機能は「説明されているトピックを簡潔に説明する」ことです。 「次の章」では、W3C ではこのように説明しています - Web ページの各段落の概要を表示します。
表示したい情報を最も効果的に使用するページ タイトルを作成するにはどうすればよいですか? この章では、タイトルの処理に一般的に使用されるいくつかの方法を検討し、その中で最も役立つものを 1 つ見つけてから、CSS のヒントとコツを使用して最適な方法を装飾します。文書のタイトルを作成するにはどのような方法がよいでしょうか?
この質問に答える前に、文書の先頭にタイトルを配置していると仮定して、同様の効果を達成する 3 つの方法を見てみましょう。
方法 A: 意味はありますか?
超クールなページ タイトル
< ;span> タグは一部で使用されますが、ページ タイトルの場合はあまり意味がありません。このメソッドを使用する唯一の利点は、見出しクラスに CSS スタイルを指定できることです。
.Heading {
font-size: 24px; font-weight: 太字;
color: blue;
}

これで、見出しクラスでマークされたすべてのタイトルが大きくなり、太くなり、青色になります。これは素晴らしいことですよね。しかし、CSS をサポートしていないブラウザを使用してこのページにアクセスした場合はどうなるでしょうか? たとえば、ブラウザがサポートしていない外部スタイル シート ファイルに古い CSS スタイルを挿入すると、障害のあるユーザー向けにスクリーン リーダーがページを読み取ったときに何が起こりますか。これらの手段でページにアクセスするユーザーは表示できなくなります。 ) タイトルと本文テキストの違いです。
class="Heading" などの注釈メソッドはタグの内容をわずかに説明しますが、 は単なる汎用コンテナです。デフォルトの表示スタイルを変更します。
検索エンジンはこのページをクロールするときに、 タグが存在しないかのようにスキップし、そこに含まれる可能性のあるキーワードの重みを増やしません。これについては、この章で後ほど説明します。
最後に、 タグは、メソッド A のコンテンツを別の要素に配置する必要があります。

や

などのブロックレベルのコンテナーを使用すると、必要なコンテナーを追加した場合でも、CSS をサポートしていない場合に大量の不要なコードが生成されます。タイトルとテキストに違いはありません。
                                                                        #p#

方法 B: P と B の組み合わせ

超クールなページ タイトル
方法 B では、段落タグを使用します。これにより、必要なブロックレベルの要素が表示され、 タグによってテキストが太字になります (ほとんどのブラウザーで)。ただし、この方法で重要なタイトルをマークすると、 方法 A とは異なり、CSS スタイルの定義がない場合でも、テキストは太字で表示されます。ただし、 タグと同様、検索エンジンは段落内の太字テキストのキーワードの重みを増やしません。

の単純な組み合わせを使用します。 p タグと b タグを使用すると、このタイトルに他の段落とは異なるスタイルを追加できなくなります。おそらく、独自の方法でタイトルを強調し、ページのコンテンツに定義と構造を追加したいと考えますが、このメソッドを使用した後に太字で表示する必要があります。
方法 C: スタイルと内容

超クールなページタイトル笑ここで、私たちの良き友人である title タグが登場します。title タグは最初から存在していますが、多くの Web デザイナーは依然としてそれらを一貫した方法で使用できていません。適切に使用すると、title タグはページ コンテンツにアンカー ポイントを提供し、
タグ自体の観点から見ると、追加のコンテナ タグが必要ないため、この方法はバイト数を節約できるとさえ言えます。最初の 2 つのメソッドは無視できますが、バイトが小さくなるごとに変更されます。

から

は、最も重要な

から最も重要でない

まで、それぞれ 6 つの見出しを表します。これらは、追加のコンテナーを必要とせずに自己完結型です。 1 行でシンプルで効率的 - この仕事に最適なツールです。
スタイルの定義が簡単です

タグは、 とは異なり、独自の意味を持っています。

タグはテキスト内で複数回使用されるため、CSS を使用してさまざまなスタイルを追加できます (この章の「その他のテクニック」で詳しく説明します)。
さらに重要なのは、タグを使用しなくてもです。スタイル定義を追加すると、タイトル タグは明らかにタイトルのように見えます。すべてのスタイル定義がページから削除された場合でも、ブラウザは大きなフォントと太字のフォントを使用して

のコンテンツを表示します。正しいタイトル タグはプレゼンテーションではなくコンテンツの意味を説明するためです (図 2-1)

図 2-1: スタイルから離脱した後のタイトル タグの使用 ページ コンテンツ。
スクリーン リーダー、PDA、携帯電話、その他のビジュアル ブラウザや非ビジュアル ブラウザも、タイトル タグのコンテンツを認識して正しく処理し、ページ上の他のコンテンツよりもその重要性を強調できます。 CSS がサポートされていない (またはサポートできない) と、CSS はそれが特別なものだとは考えません。
迷惑なデフォルト スタイル
Web デザインの歴史において、デザイナーはタイトル タグの使用を避けるのは単に次の理由からです。スタイルを設定しないと、タイトル タグはモンスターのように見えます。デフォルトのフォント サイズが大きすぎるため、タイトル タグの一部は使用を避けます。または、代わりに小さいフォント サイズと大きなラベル タイトルを使用します。
ただし、強調しておきたい重要な点があります。たとえば、CSS を定義することで、これらのタイトル タグのスタイルを簡単に変更できます。これは画面の半分を占めます。後で、

に対する恐怖心を克服するために CSS スタイルを使用してタイトル タグを定義する方法を説明します。
検索エンジンに優しい
これが最大の利点です。 タグや段落内の太字フォントは、検索エンジンにとってあまり意味がありません。時間はかかりますが、検索エンジンがページのインデックスを作成し、ユーザーがページを見つけやすくするのに役立ちます。
検索エンジンのロボットは、タイトル タグのコンテンツを非常に重視します。おそらく、いくつかのキーワードを組み込むとよいでしょう。