HTMLでコーディングしていく為には、サイトの構造とそのコーディング方法を知る必要があります。
そしてこの構造は今後CSSなどを使って装飾をしていく場合に、非常に重要となるスキルとなります。
そこで今回はこの構造の基本について初心者向けに解説していきます。
前回のおさらいと要素
以前に見出しタグと段落タグについてのさわりを説明しました。
分からない方はそちらから復習して下さい。※下記リンク参照
要素の開始と終了（前回のおさらい）
タグについては以前述べましたが、今回はもう少し詳しく説明します。
まずはタグについておさらいします。
上の説明図は、以前説明したPタグです。
文章に『段落』の意味を持たせるタグでしたね。
文章を『ここから』『ここまで』って具合で、Pタグを使って挟んであげるとよかったんですよね。
その通り！
よく勉強したね！
要素とは
上の図を参考に説明すると、『開始タグ』から『終了タグ』までをP要素と呼びます。
このように開始タグから終了タグまでを要素と呼びます。
中には『終了タグ』を必要としない要素もあるよ！
だけど、基本的には『開始タグ』と『終了タグ』があることを覚えておきましょう。
HTMLの構造
HTMLは文章に対して適切な意味を持たせるマークアップ言語です。
これまで見出しタグや段落タグを解説しましたがこれだけではいけません。
サイト制作に於けるHTMLのルールがあるのです。
それはまず、ウェブページの枠組みとなる全体構造の要素を記述する必要があるということです。
４つのウェブページ全体を構成する要素
HTMLにはウェブページ全体を構成する要素が４つあります。
以下がそれになります。
- html要素
- head要素
- title要素
- body要素
表現すると以下の通りになります。
<html> <head> <title>タイトル</title> </head> <body> 本文 </body> </html>
それではそれぞれの要素を解説していきます。
html要素とは
<html> <head> <title>タイトル</title> </head> <body> 本文 </body> </html>
要素内がHTMLであることを表すための要素です。
「ここから、ここまではHTMLですよ。」と宣言するものとなります。
この記述をしないと、PCやスマホはHTMLで書かれたプログラムだと認識してくれないので注意が必要です。
head要素とは
<html> <head> <title>タイトル</title> </head> <body> 本文 </body> </html>
作成したウェブページの情報を表す要素です。
これはウェブページを見ている人からは見えませんが、PCがこのサイトがどのようなサイトであるか認識するためのエリアとなります。
今後、CSSなどのプログラムやSEOなどを活用する際に重要となってきます。
今回の例の場合は、headタグ内に『タイトルタグ』が記述されていますね。
これはブラウザ上のタグにサイトのタイトルを表示させる意味を持たせるタグです。
その他に、Googleなどの検索サイトに表示される『サイト説明』などもここに記述していきます。
headタグ内には、サイトに表示される以外の情報を記述するってことで良いですか？
そうだね。
その考えでいいよ。
title要素とは
<html> <head> <title>タイトル</title> </head> <body> 本文 </body> </html>
このページのタイトルを表す要素となります。
ここに記述したタイトルはブラウザの上部に表示されます。
あっ！
自分のサイトの名前が表示された！
body要素とは
<html> <head> <title>タイトル</title> </head> <body> 本文 </body> </html>
このページの内容を表す要素となります。
以前説明した見出しや段落がここに入るわけです。
サイトの本文や画像がここに入るわけです。
例えば下の図のような感じ。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
