Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- HTML5入門編 - タグを使う目的って?
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
運営及び開発費用ご支援のお願い
当サイト(wp-p.info)の情報はお役に立ちましたでしょうか。当サイトでは運営及び開発費用ご支援の募集をさせて頂いております。よろしければご支援についてご検討頂けませんでしょうか。何卒宜しくお願い致します。
タグを使う目的って?
みなさまどうもこんにちは。
続きましてタグを使う目的についてもう少し掘り下げて解説していきたいと思います。
こちらの記事でタグを使う目的について少し触れました。文字を表示させるだけならばタグを使わなくても表示できる、タグを使う目的は『要素を特定するため』というお話でしたね。
要素を特定する、というのはどういう事なのか視点を変えて考えていきましょう。まずはみなさんがこれから勉強するであろう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 HarutoISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。 |
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
TechAcademy(テックアカデミー)
当サイト著者の桜舞春人もメンター(先生)としてちょろりと参加しているTechAcademyさんです。爆速で技術を習得して結果を出したいと考える方に超絶おすすめです。
紹介記事はこちらへどうぞ。
Introduction
当サイトでは有料会員様の募集をしております。現在約431本の記事を公開中です。
有料会員になるとこれら全ての記事が読み放題となります。
お申込み頂ける際はログインまたはアカウント作成後、有料会員件をご購入下されば幸いです。有料会員権はまとめ買いがお得です。
現在の有料会員権一覧sale中!!
30日分980円
月額約980円、日額約32円
90日分通常2940円のところ1980円 (960円OFF)
月額約660円、日額約22円
180日分通常5880円のところ2980円 (2900円OFF)
月額約496円、日額約16円
360日分通常11760円のところ4980円 (6780円OFF)
月額約415円、日額約13円