見出しを使おう！構造と装飾以前にHTMLは構造をスタイルシートは装飾を定義すると書きました。
それにより、検索ロボットにも人にも分かりやすいページが作成できます。
検索ロボットに分かりやすいことはSEO対策にもなります。 ページは見出しと段落により作成されます。
人が見るだけなら、行幅を空けて文字を大きくすればそれが見出しだと判断できますが、頭の固いロボットには分かりません。また、文字の色を変えて目立つようにすれば人にはそれが重要な部分だと分かりますが、ロボットには分かりません。 ロボットにきちんと構造を伝えるためにはHTMLでの構成がとても重要になります。
見出しには見出しのタグを使い、段落には段落のタグを使い、重要な文字列には強調タグを使います。
こうすることにより、人にもロボットにもページの構成が分かるのです。
見栄えをよくするために装飾を行う場合はそれぞれのタグにスタイルシートを指定します。
ページの内容をロボットにきちんと拾って貰うためにはシンプルな方がよいので、スタイルシートは外部ファイルに置いた方が良いでしょう。
楽天広場では外部スタイルシートは使えないために、直接タグにstyle=""の形で指定する必要があります。
SEO的にはかなり不利ですが、きちんとしたページを作るなら別のホスティングサービスを利用するべきですね。 構造の具体例<h1>見出し１（タイトルなど）</h1><h2>見出し２（サブタイトルなど）</h2><h3>見出し３（通常の見出し）</h3><h4>見出し４（小さな見出し）</h4><p> 段落（内容）重要な箇所は<strong（またはb）>強調</strong></P> <h4>見出し４</h4><p> 段落（内容）</p> このような構成になります。（注：楽天広場の仕様により自動的に装飾されてしまう見出しがあります＞＜）
見出し１と見出し２は使わないことも多いですね。見出しは１～6までありますが、５や６を使うことはほとんど無いと思います。 装飾の例見出し２<h2 style="background-color: #CCFFFF">見出し２</h2> 見出し２ <h2 style="text-indent: 0.5em; border-left-color: #33CC00; border-left-style: solid; border-left-width: 0.5em">見出し２ </h2> 見出し２<h2 style="text-indent: 0.8em; border-left: 0.2em solid #33CCCC; border-bottom:2px dashed #33CCCC">見出し２</h2> | 
