タグを使う目的って？

みなさまどうもこんにちは。

続きましてタグを使う目的についてもう少し掘り下げて解説していきたいと思います。

こちらの記事でタグを使う目的について少し触れました。文字を表示させるだけならばタグを使わなくても表示できる、タグを使う目的は『要素を特定するため』というお話でしたね。

要素を特定する、というのはどういう事なのか視点を変えて考えていきましょう。まずはみなさんがこれから勉強するであろうCSSの視点から見てみたいと思います。

CSSを使うとHTMLを装飾することができます。色を変えたり大きさを変えたりといった様々なスタイルを適用させることが可能です。ではちょいとCSSを使ってp要素の文字色を赤色に変えたいと思います。以下のサンプルコードを見てみてください。

HTMLの記述はこんな感じで

<p>ここを赤色に変更するよ！</p>

CSSの記述はこのようになります。

p {
    color: red;
}

さてこうするとp要素の文字色が赤色に変更できるわけですが、もしタグを使っていなかったらどうなるでしょうか。

人間ならば「ここを赤色に変更するよ！っていう文字色を赤色にして！」とお願いすればできると思いますが、コンピューター相手ではそうはいきません。

CSSには「ここを赤色に変更するよ！」という文字列を検索し、そこに装飾を加える、という機能はありません。

つまりタグを使用しない場合、CSSで装飾を加えられなくなってしまうということです。CSSで装飾を加える際は必ず要素を特定できるようにする必要があります。なのでCSSを組み込みたい場合はタグの使用は必須です。

次にJavaScriptの視点から考えてみましょう。

JavaScriptとはブラウザに実装されているプログラム言語です。プログラム言語ですので装飾を加えたり通信させたり要素の中身を変更したりと様々なことができます。

JavaScriptではHTML要素を特定できる処理が沢山用意されています。逆に考えるとタグを全く使用しなかった場合はそれらの処理が全く使えなくなってしまい、ちょっとした処理を構築するのも一苦労になってしまうということです。

なのでJavaScriptで処理を構築する場合もCSSと同じようにタグを使用して綺麗なHTMLソースを作成したほうが無難です。

では次に検索エンジンからの視点で考えてみましょう。

検索エンジンもコンピューターです。人間と違って書いてある内容は理解していません。

人間ならば文章を読んで内容を考え「ここがタイトルだな」とか「ここは重要だな」ということを判断できますがコンピューターでは文章を読み込んでも内容を理解している訳ではないのでそういう判断はできません。

そこで昨今の検索エンジンでは使用している要素の情報から判断を下します。

h1要素が使われていれば重要なタイトルなんだなと判断しp要素が使われていれば文章の段落なんだなと判断し、img要素のalt属性を読んでここはこういう意味の画像なんだなと判断しています。

そういった情報をかき集めて検索ワードに合致したページに優先度をつけて順番に表示している感じですね。なので検索エンジン的にも的確なタグを使った方が有利です。

タグを入れていく作業はかなり時間がかかります。しかし、検索エンジン対策、デザインなどの装飾、見やすさを考えたインターフェースなどを考えていくとやはりタグを使って綺麗なHTMLソースを構築していく作業は必須事項となっています。

というわけでタグを使用する目的とメリットについてはこんな感じになりますね。

続いての記事ではdivタグとspanタグについて解説していきます。引き続き頑張っていきましょう。ではまたお会いしましょう。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア