- <div>や<p>って何のために使うの？
- <div>や<p>で囲う必要あるの？
とあなたは思いながら、htmlのコードを書いてませんか？
たぶんこれ、勉強しはじめの方ならだれもが感じる疑問です。
cssは何となく分かるけど、htmlってどんな意味があるのかあいまいですよね。
そんな人のためにhtmlの役割についてまとめてみました。
いったい、htmlとは何なのか。
このへんを明らかにしていきます。
html/cssを使ってコーディングする目的
html/cssを使って、コーディングする目的は２つあります。
- デザインの装飾(css)
- 機械にホームページの中身を伝える(html)
装飾とは、文字や画像の大きさを調整したりデザインを整えたりすることです。
これはcssで行えます。
一方、コードを書くもう1つの理由として、「機械(コンピューター)にホームページの中身を伝える」があります。
その役割を担っているのがhtmlです。
htmlでは<h1> <h2> <p>といったタグを使って、文字や文章を囲みますね。
<h1>ページタイトル</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<p>文章</p>こんなふうに。
しかし、
「じゃあなぜ、タグでわざわざ囲まないといけないの?」
「<h1>や<p>って、そんなに大事なの？」
という人もいるはずなので、次で解説していきます。
※htmlタグの正しい書き方を知りたい方は、以下の記事をご覧ください。
>>【html】タグの書き方について
htmlの役割
文書の意味を機械に伝える
人間だと文字を見れば、これがタイトルだとか、ここがひとかたまりの文章だと分かりますよね。
例えば、この記事のタイトルは「htmlの役割とは？」ですね。
じゃあ、読者の皆さんはなぜそう思ったのか。
たぶん記事の1番上に書いてあり、文字も大きいから。
また、「htmlの役割とは？」という文章がタイトルっぽいと感じたからだと思います。
機械は文字の意味が分からない
一方、機械(コンピューター)は文字の意味を読みとれません。
どんなにすごいコンピュータでも、どれがページのタイトルで、どれがひとかたまりの文章なのかは判断がつきません。
ページの1番先頭に書いてあっても文字が大きくても関係ないんです。
「htmlの役割は？」がタイトルふうなものかも分からない。
だから<h1>や<p>といったタグを使って、機械に意味を伝える必要があるのです。
- <h1> → タイトル
- <p> → 文章
そして、機械は<h1>や<p>で、それがタイトルなのか文章なのか判断しているんですね。
ページエリアを機械に伝える
また、ホームページは
- ヘッダー
- メインコンテンツ
- フッター
といった大きなエリアで成り立っています。
そして、その範囲を示す目的で<header> <main> <footer>などのタグが使われます。
<header>
ヘッダーエリア
</header>
<main>
メインエリア
</main>
<footer>
フッターエリア
</footer>タイトルや文章、あるエリアを囲っているタグは、すべて機械にその役割を伝えることを目的としています。
少しむずかしく言うと、ページの構造を知らせるためにタグをつけています。
htmlとcssの役割の違い
| html | → | タグを使い、タイトルやエリアなど、ページの構造を機械(コンピューター)に伝える |
| css | → | ホームページのデザインを装飾し、整えて見やすくする |
機械とはwebブラウザや検索エンジン
htmlで文書の意味や構造を伝えている機械には２つあります。
- ウェブブラウザ(Google ChromeやSafariなどのこと)
- 検索エンジン(GoogleやYahoo)
ホームページにアクセスした人にそれを見せてくれるのがウェブブラウザです。
なので、ユーザーが見たいホームページをいつでも提供できるよう、ウェブブラウザに文書構造を伝えなければいけません。
一方、ホームページの文書構造を把握し検索結果に活かすのが検索エンジン。
このため、<h1>や<header>などを使い、正しい構造で書かれたホームページであることを検索エンジンに伝える目的があります。
| ウェブブラウザ | インターネットを使う人に、いつでもホームページを見せてくれる |
| 検索エンジン | GoogleやYahooなどで検索した人に、検索結果という形で答えを提供してくれる |
ある特定の部分をデザインできるようにする
さいごにもう1つ。
htmlでタグをつけるのは機械に文書構造を知らせるためですが、実はほかにも役割があります。
それは、cssである特定の部分をデザインできるようにするためです。
以下をご覧ください。
見出し
文章
クリック見出し
文章
クリック
<h2>や<a>といったタグがついていないと、例えば「クリック」を赤色にしたくても指定できません。
一方、タグがあると<a>に文字色を指定し、色をつけれるようになります。
<h2>見出し</h2>
<p>文章</p>
<a href="#">クリック</a>a {
color: red;
}見出し
文章
クリック
また、「見出し」〜「クリック」の背景にまとめて色をつけるなら、例えば<div>で囲むと背景色を指定できます。
<div>
<h2>見出し</h2>
<p>文章</p>
<a href="#">クリック</a>
</div>div {
background-color: aliceblue; /* うすい青色 */
}見出し
文章
クリック
このようにタグは、デザインするのにもなくてはならないものなんです。
参考サイト
この記事は「HTML Living Standard」をもとに書きました。
「HTML Living Standard」はhtmlのルールブックの最新版です。
1つ前は、「HTML5」でした。
どちらも翻訳があります。
やや専門的に書かれてるので、余裕のある方だけチラッとご覧ください。
まとめ
今回は、htmlの役割について解説しました。
ポイントは以下です。
【html】
- タイトルやエリアなど、ページの構造をウェブブラウザや検索エンジンに伝える。
- ある特定の部位にcssが指定できるようにする。
【css】
- ユーザーがサイトを見やすいように装飾する。
まずは、それぞれの違いを理解しましょう。
そのうえでコードを書くと、htmlの役割がはっきり分かるようになるはずです。
次は、htmlの親子関係について学習しましょう。
親子関係とは先ほどの例でいえば、
<div>
<h2>見出し</h2>
<p>文章</p>
<a href="#">クリック</a>
</div>- 親：<div>
- 子：<h2> <p> <a>
のことです。
htmlの親子関係を知れば、css指定で起きる問題も解決できます。
なぜならcss指定がうまくいかない時、その原因が親要素に関係する場合があるからです。
ですので、htmlの親子関係について学んでみてください。
記事は以下からご覧いただけます。
