html Hタイトルタグの使い方_HTML/Xhtml_Webページ制作-htmlチュートリアル-php.cn

html Hタイトルタグの使い方_HTML/Xhtml_Webページ制作

WBOY

リリース： 2016-05-16 16:41:38

オリジナル

1885 人が閲覧しました

H タグの使用法、特に h1 の使用法は常に物議を醸す問題であり、私たちが研究する価値のある問題でもあります。この記事は、これまでの経験を要約し、H タグについての私自身の理解と組み合わせて書きました。この記事が皆さんのお役に立てれば幸いです。

H タグとは何ですか?

W3C は、h1 ～ h6 タグでタイトルを定義できることを指摘しています。 h1 は最大の見出しを定義します。 h6 は最小の見出しを定義します。

h1、h2、h3、h4、h5、h6 をタイトルタグとして重要度の降順に並べます。ページの階層関係がより明確になり、検索エンジンがページの主題コンテンツなどをより適切にクロールおよび分析できるようにするために、この原則に従う必要があると思います。よりよく理解するために、以下のコードを見てください:

<span style="COLOR: #339933"><</span>body<span style="COLOR: #339933">></span>
   <span style="COLOR: #339933"><</span>h1<span style="COLOR: #339933">></span>一级标题<span style="COLOR: #339933"></</span>h1<span style="COLOR: #339933">></span>
   <span style="COLOR: #339933"><</span>p<span style="COLOR: #339933">></span>段落<span style="COLOR: #339933"></</span>p<span style="COLOR: #339933">></span>
   <span style="COLOR: #339933"><</span>div<span style="COLOR: #339933">></span>
      <span style="COLOR: #339933"><</span>h2<span style="COLOR: #339933">></span>二级标题<span style="COLOR: #339933"></</span>h2<span style="COLOR: #339933">></span>
      <span style="COLOR: #339933"><</span>p<span style="COLOR: #339933">></span>...<span style="COLOR: #339933"></</span>p<span style="COLOR: #339933">></span>
      <span style="COLOR: #339933"><</span>div<span style="COLOR: #339933">></span>
         <span style="COLOR: #339933"><</span>h3<span style="COLOR: #339933">></span>三级标题<span style="COLOR: #339933"></</span>h3<span style="COLOR: #339933">></span>
         <span style="COLOR: #339933"><</span>p<span style="COLOR: #339933">></span>...<span style="COLOR: #339933"></</span>p<span style="COLOR: #339933">></span>
         <span style="COLOR: #339933"><</span>div<span style="COLOR: #339933">></span>
            <span style="COLOR: #339933"><</span>h4<span style="COLOR: #339933">></span>四级标题<span style="COLOR: #339933"></</span>h4<span style="COLOR: #339933">></span>
            <span style="COLOR: #339933"><</span>p<span style="COLOR: #339933">></span>...<span style="COLOR: #339933"></</span>p<span style="COLOR: #339933">></span>
         <span style="COLOR: #339933"></</span>div<span style="COLOR: #339933">></span>
      <span style="COLOR: #339933"></</span>div<span style="COLOR: #339933">></span>
   <span style="COLOR: #339933"></</span>div<span style="COLOR: #339933">></span>
<span style="COLOR: #339933"></</span>body<span style="COLOR: #339933">></span>

ログイン後にコピー

ブラウザのデフォルトのスタイルも重要度の低下に基づいており、フォントサイズは h1 から h6 まで小さくなります。ブラウザごとにスタイルが異なる場合があるため、通常は CSS を使用してレイアウトを統一します。

どうやって使うの？

現在、多くの Web サイト (淘宝、新浪、捜狐、その他の有名な Web サイトを含む) は、図に示すように、ロゴに h1 を使用することを好みます。

誰もがこの方法で使用しており、実際、これには多くの利点があります。ページ全体のコンテンツが要約され、ロゴが本文のすぐ近くにあるため、検索エンジンがクロールしやすくなります。さらに、意味論的な観点から見ても、より正確です。

もちろん、すべての Web サイトがロゴに h1 を使用しているわけではありません。NetEase の使用法は特殊な例です。

NetEase は、h1 を非表示にするために、display:none スタイルを設定します。これにより、h1 をどこに配置すればよいかわからないという問題が解決されるだけでなく、SEO の最適化にも一石二鳥と言えます。。

テンセントのホームページの h1 は、図に示すようにヘッドラインニュースです:

上記の例から、主要な Web サイトでは h1 をどこに配置するかが異なることがわかります。これは常に物議を醸す質問ですが、どこに置くべきかについての絶対的な答えはないと思います。 Webページの位置付けや種類、ユーザーの検索傾向などを踏まえて総合的に考えるべきだと思います。たとえば、ニュース Web サイトの場合は見出しに h1 を配置できます。総合的なポータル Web サイトの場合はロゴに h1 を配置できます。ユーザーは一般的に企業を検索することが多いため、ロゴに h1 を配置することもできます。会社名。Web サイトのスローガンがある場合は、スローガンに h1 を付けることもできます。これも良い選択です。要するに、最も適切なものを選択するのが最善です。

h2 については、次の図に示すように、通常、ホームページの大きな列で使用するのが好きです。