HTMLタグの適切な使い方。
こんにちは！ 湘南の小さなWeb製作所 S-Create Garageです。
「HTML」って皆さんどう使っていますか？？
今は「HTML5」なので、適切なタグをチョイスできるんですよね。
でも、WordPressの某テーマとか、アナライズしていると…
<div>ばっかりじゃん！
なんて場合も結構見受けられます。。(;^_^A
というわけで、今日はHTML５の規則にのっとった適切なタグの使い方を紹介しようと思います。
HTML5について
そもそも「HTML5」は何が違うの？？
というところから少し説明しようと思います。
大きな違いは「HTML5」ではタグに意味的な要素が追加されたという点です。
例えばヘッダー部分ですね。
HTML５以前では<div id=”header”>としていたものが<header>
に置き換わります。
divにid付けてるし良いんじゃないの？(・・?
って思うかもしれませんが、単なる入れ子であるdivタグと意味を持ったheaderタグでは全然違いますよね。。。！
このようにHTML5では「意味を持つ」ということが可能になっています。
- HTML5で追加された主な新しいタグ
- <header>
- <main>
- <article>
- <nav>
- <aside>
- <footer>
- <section>
ではdivタグを使うのと、上記のタグに置き換えるのでは何が違うのでしょうか？
そもそもdivタグとは？
divタグ便利ですよね。
とりあえず入れ子にしたい、何かで纏めたいって時にササっと使えますよね！
でもこのdivタグ、何の意味も持たないんです。
汎用的なコンテナとして、ブロックコンテンツ化することができるタグとして、たくさん使われています。
意味を持たないからどんなところにでも使える。
しかし裏を返せば、意味を持たないものをどんなところにも使っていいのか。。。？という疑問が出ます。
適切なタグの選び方
それではどうやって適切にタグを選べばよいか。
カンタンにご紹介していこうと思います。
例えば
<div id=”header”>ヘッダーです</div>
<div>メインコンテンツ
<div id=”content1″>コンテンツ1</div>
<div id=”content2″>コンテンツ2</div>
<div id=”content3″>コンテンツ3</div>
</div>
<div id=”footer”>フッターです</div>
このような記述でHTMLを打ったとしましょう。
これでもコンテンツは全く問題なく表示されます。
しかし、パッとソースコードを見たときに何が何かわかりづらいですよね。
これを以下のように置き換えてみましょう。
<header>ヘッダーです</header>
<main>メインコンテンツ
<section id=”content1″>コンテンツ1</section>
<section id=”content2″>コンテンツ2</section>
<section id=”content3″>コンテンツ3</section>
</main>
<footer>フッターです</footer>
このように一目見ただけで、どのコンテンツが何なのか？がわかるようになりました。
実はSEOにも強くなる！
先ほどのように適切なタグを用いることで、SEOにも強くなります。
現在推奨されているHTML5のルールに則った記述法で構築することにより、divばかりで構築されているページに比べて、クローラーが回ってきたときに有利であると言われています。（グーグルが公開していないので、あくまで憶測の範囲ですが…）
個人的には、しっかりとタグを選択して作成したものはサイトテストでもかなり点数は高く、オーガニック検索の順位もかなりアップしやすいと感じています。
推奨されているものを使用して良いことはあれど、悪いことはありません。
これから構築する際には意識してタグを選択してみるのもよいかと思います！
まとめ
・divは何にでも使えて便利！ だけれども意味のないタグ。
・セマンティックにタグを選択し、構築をすることによってコードが見やすくなる！
・しっかりと推奨されているやり方で構築しよう！
・HTML5で新設されたタグは意味を持っている。
・SEOにも強い。
皆さんも新規コーディングの際に少し意識してみると、まったく結果が変わってくるかもしれません。
一度お試しあれ ^^！
S-CreateGarageではデザインのみならず今回ご紹介した「適切なタグを用いたSEOにも強いWeb制作」を行っております。