htmlタグ使用するとき、タグの意味を把握しておく必要があります。私自身、覚えたての頃は何がなんだかわかりませんでしたが、htmlタグにはh1、div、p、spanなど色々な種類があって、それぞれ役割や意味があります。
私が最初に覚えたのはpタグやfontタグでしたが、それこそフォントの色指定だとか、サイズ指定の変更程度で、ほぼほぼタグの意味などわかっていませんでした。
目次
意味を持つタグ
ブラウザがhtmlタグを読み取り、意味を判別して人の目にわかるように画面上に表示しますが、
例えば、
<font size="16px">タイトル</font>
と記載すると
タイトル
16pxの大きなサイズで表示されます。
このタグを使い、文章の見出しとして使っていました。（笑）
確かにブラウザを通して見ている限り、大きな文字で表示されるので見出しのようになります。フォントサイズを大きくはしてくれますが、文章の中で使うにはありだとしても、本来の見出しとしては意味をなしません。
SEO上、検索順位を意識してWEBサイトを作るなら、見出し専用のhtmlタグを使う必要があるわけです。
これですね。
<h1>タイトル</h1>
hタグにはh1~h6まであり検索順位を決めるGoogleはh1を最も重要視していて、その次に重要なのがh2、h3、h4、h5、h6という順番に、重要度が変わっていく。という意味合いがあります。
Googleからするとh1に記載された文字がその記事のタイトルなんだなと判断します。そういう意味で記事のタイトルにはh1タグ、見出しにはh2タグを使うことになります。
WordPressの場合、記事のタイトルがそのままh1にセットされるのでh2を使って文章を作り、見出しだとアピールすることになります。
Googleは文章そのものの意味は理解していませんので、タグを使って役割を与える必要があるのです。
意味を持たないhtmlタグ
意味を持たないと言うと語弊があるかもしれません。特定の役割を持たないタグと言ったほうが良いかも。（笑）
h1タグだと、これはタイトルと言う意味だよ。
h2タグはこれは見出しという意味だよ。
と表現できるのはお伝えしましたが、divやp、spanといったタグはh1、h2のような意味を持っていません。
これも表現を変えると何でも屋さんみたいなタグで、h1、h2のような決まった役割があるわけではないんです。
divもpもspanもよく使うタグではありますが、意味より働きで違いがあります。
htmlのルールではdivの中でpを使い、pの中でspanを使います。
<div class="contents"> <p class="inline-center"> <span class="inline-block">意味のないタグ（笑）</span> <p> </div>
こういう感じです。
そして、divとpはブロック要素と呼ばれ、縦にも横にもスタイルを持たせることができますが、spanにはインライン要素と呼ばれ文字の色や大きさ以外だと、左右にしかスタイルを持たせることができません。
テキストのアライメント（左寄せ、中央寄せ、右寄せ）の調整といえばイメージしやすいと思います。spanの中には文字だけでなく、画像を入れることもできます。
これといった意味や役割を持たないdiv、p、spanですが、これらを組み合わせることで、いろいろなスタイルを併せ持つサイトを作ることができます。
スポンサードリンク