前回紹介した主要タグですが、

そもそも「タグ」って何よ??・・・・っということで。

ざくっと説明します！

目次

1. htmlタグのタグってなんだろ？
   1. 「段落」を意味するpタグ
   2. 「見出し」を意味するh1タグ
   3. 「画像」を格納するimgタグ
2. なぜ、タグは意味を持ち合わせているのか？
3. SEO対策を考慮してコーディングしよー
4. まとめ

Youtubeで動画解説しています。

このブログをベースに、解説動画を作りましたので、併せてご覧ください。

チャンネル登録、宜しくお願いします。

htmlタグのタグってなんだろ？

意味のある単語を、「<」と「>」で囲ったものを「タグ」といいます。

たとえば、段落を意味するpタグは＜ｐ＞、画像を指定するimgタグは＜img＞と記述します。

タグで囲った要素に、「意味を持たせる役割」がタグです。

「段落」を意味するpタグ

<p>ここは段落です</p>
<!--
<p> 開始タグ
</p> 終了タグ・閉じタグ
-->

これは「Paragraph」の略です。意味は、「段落」。

つまり、Pタグで囲まれた部分は、「ひとつの段落」という意味になります。

　

　

コップの中にネコが入ってますね。

　

タグの基本構造は、「開始タグ」+「値」+「閉じタグ」です。

コップがPタグ、値がネコとイメージしてください。

ちょっと無理やりだったかな・・・・。

「見出し」を意味するh1タグ

<h1>最上位の見出し</h1>

<h2>次に重要な見出し</h2>

<h3>その次の見出し</h3>

ｈは、「heading」の略で、意味は「見出し」です。

h1タグで囲まれた部分は、「見出し」という意味になります。

そして、見出しタグの中でも「h1」は最上位。

・・・・最上位？

　

　

食物連鎖ピラミッドと似てます。

一番上、最上位がh1タグ、下に行くほどに数字が増えてh2タグh3タグと続きます。

h1タグは、ページの中で一番重要な箇所に使いますが、唯一無二的なことではなくて、重要な見出しが複数あるときは、複数回使ってもOKです。

「画像」を格納するimgタグ

<img src="sakuweb.png" alt="さくうぇぶ" >

imgは、「image」の略です。イメージファイルを格納します。

　

　

imgタグのsrc属性を見ると、png形式のファイルが指定されていますよ。

これは、外部にある「sakuweb.png」を読み込む指示となります。

フリーダカーロ・・・・です。

このimgタグ、Pタグ・h1タグとどこが違うかわかりますか？

Pタグ・h1タグには、「閉じタグ」がありますが、

imgタグには・・・・ないですねー。

以前はありましたが、HTMLのバージョンが5になってからはなくなりました！

他にも不要なタグがあって、たとえば、ul要素とol要素の中に入るタグはli要素だけなので、閉じタグ不要。なんてのもあります。

このようにタグには、Pタグのようなシンプルなタグと、

h1タグのような増殖していくタグ、

imgタグのような、外部ファイルを読み込むタグもある。

また閉じタグが必須なタグと、不要なタグもあるんです。

今回紹介したのはほんの一部のタグです。

覚えておいてほしいのは、

タグの意味を理解してマークアップしていく必要があるってことですね。

なぜ、タグは意味を持ち合わせているのか？

WEBページを見たいとき、皆さん「検索」しますよね。

検索キーワードにあうページを、検索エンジンが提案しますが、

この時、私のページはここが見出し！ここが内容！というように、検索エンジンに示しておくことで、検索エンジンはユーザーが知りたい内容のドンピシャの記事を表示できるようになります。

つまり検索エンジンに、サイトを正確に認識してもらうために、タグの意味を理解してマークアップすることが、とても大事なんです！

このように検索エンジンへの対策を「SEO対策」と言います。

SEO対策を考慮してコーディングしよー

「Search Engine Optimization」 の頭文字をとって「SEO」と呼びます。

つまり、「検索エンジン最適化」です。

検索エンジンは、サイトを評価するためのアルコリズムを考慮して結果に反映させています。

検索結果の上位に表示させるためには、検索エンジンに対して最適化しておかなければなりません。

「最適化」はなかなか目に見えないので、Googleがいろんなツールを提供しています。

サイト制作者は、そのツールを利用して最適化を図っているんです。

なので、ただ好きなタグを使って作ればよいではなく、SEO対策として、タグの意味を理解して制作する必要があるんです。

慣れるまでは厄介ですが、必須なので覚えておきましょう。

次回は、もうちょっとわかりやすく図解でタグを学びましょう！