[コーディングの基礎] htmlタグについて

なぜhtmlタグを使うのか?

コーディングにはなぜhtmlタグを使わなければいけないのか?に着目してhtmlタグに関しての解説を行います。

SEO

ここからは、検索結果の表示順を検索順位という言い方に統一し、
検索結果の1ページ目など、早い段階で掲載されているサイトは順位が高い、逆は順位が低い、として解説します。

Yahoo!やGoogleで検索を行った時に検索結果が表示されますよね。
検索結果の1ページ目・2ページ目に出てくる検索順位の高いサイトは開くけど、
3ページ目、4ページ目以降の検索順位の低いサイトはあまり開くことがありません。

つまり、検索順位が低いと多くの人に見てもらえる可能性はグンと下がってしまいます。
多くの人に見てもらうため、Yahoo!やGoogleなどの検索エンジンでの検索順位がより高くなるように対策をする検索エンジンへの最適化を行うことが、有名なSEO(Search Engine Optimization)と呼ばれる手法です。

クローラー(検索ロボット)とは?

ではこの検索順位はどうやって決まっているんでしょうか?

その答えは・・・

検索エンジンが、クローラーを使って収集したウェブサイトの情報をもとに、
検索した内容に最もふさわしい内容を、最もふさわしい順番で表示」しているというもの。

これは、検索内容からいち早くユーザーに答えを提供出来るように検索エンジンがとっている配慮です。

このネット上のウェブサイトの情報を集める仕事を担っているのがクローラー(検索ロボット)と呼ばれるもので、
Yahoo!やGoogleなどの検索エンジンが定期的にそれぞれのクローラーを使い、ネット上の巡回を行っています。

検索エンジンは、クローラーが巡回を行うことにより、
新しくオープンしたウェブサイトを追加したり、閉鎖してしまったウェブサイトがあれば検索結果から削除したり、
ページの内容が変わればそれを反映して検索結果を更新して、検索結果の様々な整理を行っています。

人間とクローラーの見え方の違い

そもそもなぜhtmlタグを使うんでしょう??
それは、閲覧する人間と、巡回するクローラーの、ウェブサイトの見え方の違いに理由があります。

人間が見ている状態は当然みなさんが今見ているページの状態です。
ではクローラーにはこのページはどのように見えているんでしょうか?

まさに記号や英数字などの文字情報だけのページです。
情報を集めるクローラーには、人間が見ているようなデザインは見えていないんです。
その代わりにhtmlタグを判別してサイトの構成や内容を判断し、検索エンジンに報告します。

つまり、「ここはページタイトル、ここはブロック、ここは段落」と、
クローラーが判別しやすいように最適なhtmlタグを使ってコーディングを行わなければ、
検索順位にいい影響を与えてはくれません。

使用頻度の高いhtmlタグ

開始タグと終了タグの理解

今回はウェブサイト制作において最も使用頻度の高いタグを紹介しますが、
各タグを紹介する前に、まず大原則として開始タグと終了タグの概念を理解してください。

開始タグと終了タグ

<p><!-- 〜これが開始タグ〜 -->
今日はウェブデザインAの第3回目の講義です。
</p><!-- 〜これが終了タグ〜 -->

こちらのマークアップの場合、
開始タグとは、「これからp(段落)を始めます」という記述で、
終了タグは「ここまででp(段落)を終わります」という記述になります。

タグのマークアップは原則、開始タグと終了タグの両方を記述してください。
ただタグは様々なものがあり、中には開始タグのみ記述して終了タグを記述しなくていいものもあります。
これに関しては下のimgタグのブロックで解説します。

使用頻度の高いhtmlタグまとめ

まずは先に使用頻度の高いhtmlタグをまとめたものを見ておきましょう。

使用頻度の高いhtmlタグまとめ

htmlタグ	開始タグ	終了タグ	役割
divタグ	<div>	</div>	レイアウト用のブロックを作る
h1〜h6タグ	<h○>	</h○>	見出しを作る
pタグ	<p>	</p>	段落を作る
aタグ	<a>	</a>	リンクさせる
imgタグ	<img>	なし	画像を表示させる

一つずつ解説していきましょう。

divタグ

htmlタグ	開始タグ	終了タグ	役割
divタグ	<div>	</div>	レイアウト用のブロックを作る

まず基本となる、div(ディヴ)タグ(=<div></div>)を覚えましょう。
「div」とは、「division(分けること、分割すること)、divide(分ける、分割する)」の略で、
そのままの意味で「分割したブロックのこと」だと考えてください。

divタグは単体では特に意味を持ちませんが、主に各ブロックのレイアウトの役割を持っています。
特に意味を持っていないので逆に自由度が高く、大半のことに対応できる万能なhtmlタグです。

以下の画像を見てください。

龍弥デザインのクライアントの倉敷市児島の女性向け鍼灸院 はりきゅう処 群青様のウェブサイトです。
さて、この画像の見える範囲で、どれくらいのdivタグ(分割したブロック)をどのあたりに仕込んでいるのか??
正解は下の画像です。

正解は「ほぼ全部」でした。
実は全体を見ると、これらのdivタグのさらに外側に、この画像の範囲すべてを囲うdivタグがあります。
逆に細かいもの、今回で言えばメッセージブロックの枝のイラストなどもdivタグで実装しています。

divタグは箱のようなもの(以下:ブロック)だと考えてください。
ウェブサイトはレイアウトを行うためにブロックを生成してパズルのように組み立てる必要があり、
その際の使用頻度が最も高いものがdivタグです。

また、このdivタグは、後述するhタグやpタグなどを入れ子にするカタチで包括(囲う)し、
さらにこのdivタグを入れ子にすることで複雑なレイアウトを実現しています。
この入れ子の原理によって、様々なレイアウトが可能になります。

hタグ(h1〜h6)

htmlタグ	開始タグ	終了タグ	役割
h1〜h6タグ	<h○>	</h○>	見出しを作る

h(エイチ)タグは、サイト内の見出しの役割を持っています。
hの後に1〜6の文字が入り、数字が小さいほど重要な見出しになり、
適切に使用すればクローラーへのアピールポイントとして非常に有効になります。

一目でわかる使い方で言えば以下のようになります。

html

<h1>最も重要な要素(ページタイトルなど)</h1>
<h2>2番目に重要な要素(各ブロックのセクションタイトルなど)</h2>
<h3>3番目に重要な要素(小見出しなど)</h3>
・
・
・
<h6>6番目に重要な要素</h6>

下の画像に、h1タグとh2タグを表示していますので見てみましょう。

はりきゅう処 群青様のウェブサイトでは、
ページタイトルにh1、ブロックのタイトルにh2を使っています。

ただし上にも書いた通り、hタグは「適切に使用する」ことが重要です。

hタグの1〜6の順番付けでクローラーが判別を行っているため、乱用すると何が重要か判別ができなくなってしまいます。
アピールに有効だからといってh1タグを乱用すると検索エンジンからペナルティを受け、
最悪の場合、検索結果から削除されてしまうor検索順位を下げられてしまうこともあります。

pタグ

htmlタグ	開始タグ	終了タグ	役割
pタグ	<p>	</p>	段落を作る

p(ピー)タグは以前にも少しだけ解説しましたが、文章の段落のための役割を持っています。
ウェブサイトはそのほとんどを文章によって構成されています。
文章が多ければその分段落が増えるので、自然とpタグが最も使用頻度の高いhtmlタグになってきます。

使い方は以下のように段落ごとにpタグを使って囲います。

html

<p>舞台は先生のかっこうしずかげがへんにおどかしとんとんましです。それからしばらくだめたでしというおいましう。</p>
<p>気の毒たたんございはたまたざとじぶんのの生意気屋のままとはとうとう愉快でしまして、何などセロに見ろられる方ですまし。なっすぎ君は子でいいたながらこんどのねずみの野ねずみ汁をし第一ゴーシュたちの活動に見て来だた。子どもははじめ走っていまし。糸は万見るかっこうのようをあげてしまいた。</p>
<p>扉は手あとやそれをくわえながらしまえない。</p>

引用元:宮沢賢治「セロ弾きのゴーシュ」

aタグ

htmlタグ	開始タグ	終了タグ	役割
aタグ	<a>	</a>	リンクさせる

a(エー)タグは、内部や外部へのリンクの役割を持っています。
aタグを使用するときは「href=”〇〇”」の〇〇部分にリンク先を記述します。

html

<!-- 〜href="〇〇"と書くと、〇〇にリンクする〜 -->
<a href="https://ryu-ya.jp">リンクテキストを記述します</a>

また、現在開いているページを残したままブラウザの別タブなどで表示させたい場合は、
href=”〇〇”の後に半角スペースで半角1文字分あけて「target=”_blank”」と記述します。

html

<!-- 〜target="_blank"と書くと、ブラウザの別タブでリンクを開く〜 -->
<a href="https://ryu-ya.jp" target="_blank">リンクテキストを記述します</a>

また、aタグは基本的にpタグなどの文章内に使用することが多くなります。
上のものを少し改変すると・・・

html

<!-- 〜aタグはpタグなどの中に記述する〜 -->
<p>私は<a href="https://ryu-ya.jp">龍弥デザイン</a>の脇坂と申します。</p>

といった記述になります。

imgタグ

htmlタグ	開始タグ	終了タグ	役割
imgタグ	<img>	なし	画像を表示させる

img(イメージ)タグとは、その名の通り、画像を読み込む役割を持ったhtmlタグです。
このブログでも画像を結構使っていますが、その全てでimgタグを使って画像を表示させています。

開始タグと終了タグの理解の項で、「終了タグが必要ないhtmlタグがある」と言いましたが、imgタグには終了タグは必要ありません。
終了タグの代わりに、開始タグの最後に/(スラッシュ)を入れます。

html

<img src="画像のURL" width="画像の横幅" height="画像の縦幅" alt="画像の内容を示す文章" />

終了タグを記述しないものは他にもありますので、今後詳しく紹介します。

使用頻度の高いhtmlタグまとめ

使用頻度の高いhtmlタグまとめ

htmlタグ	開始タグ	終了タグ	役割
divタグ	<div>	</div>	レイアウト用のブロックを作る
h1〜h6タグ	<h○>	</h○>	見出しを作る
pタグ	<p>	</p>	段落を作る
aタグ	<a>	</a>	リンクさせる
imgタグ	<img>	なし	画像を表示させる

htmlタグはまだまだあります

今回は頻繁に使用するであろうhtmlタグを紹介しました。
次回からは実際にウェブサイトのコーディングを行うための必須のhtmlタグを紹介し、少しずつコーディングに慣れていってもらおうと思っています。

本日のまとめ

• ネット上のウェブサイトの情報を集める仕事は、
  各検索エンジンのクローラーと呼ばれる検索ロボットが行っている、
• 人間が見るウェブサイトとクローラーが見るウェブサイトは違い、
  クローラーは文字情報だけを見ている。
• htmlタグを使うのは、クローラーにページの構成や内容を判別させるため。
• クローラーが収集してきた情報をもとに、検索エンジンが表示順を決定する。
• 表示順を少しでも上に持っていくために行うのがSEOと呼ばれる手法。
• htmlタグには開始タグと終了タグがあり、文字を囲うことで使用する。
  またimgタグなど、中には終了タグが存在しないhtmlタグもある。
• divタグは箱のようなもので、いろいろな要素を入れることができる。
• hタグは見出しで、数字が少ないほど重要な見出しになる。
• pタグは段落で、最も使用頻度の高いhtmlタグ。
• imgタグはページに画像を読み込むhtmlタグで、終了タグが必要ない。