Webページの基本構造について

HTMLの要素とタグ、属性の違い」で解説しましたが、テキストにマークアップをして意味を付加することでWebページとして機能させることが出来ます。Webページは、基本的に<html>の開始タグから始まって、</html>の終了タグで終わるという構成となっています。

ソースを見ると複雑な文字が羅列されていますが、実はその構造はシンプルなものです。大まかに言うと、<html>という大きな箱の中に、<head>と<body>の2つの小さな箱が入っているだけです。

20141016-3

ここでは、head要素とbody要素の仕組みについて解説をしていきます。

 

head要素の構造について

head要素に記述される内容は、大部分はコンピュータだけが読み取る情報です。なので、Webページの中には表示されず、通常は人間が見ることが出来ません。ここに記述されている情報は、ページタイトルや重要なキーワード、簡単な概要、文字コードの種類などといったものです。

head要素に入る代表的な要素は、以下の通りです。

  • meta要素
  • title要素
  • link要素
  • style要素
  • script要素
  • base要素

人の目に見えるのは、title要素のみですが、その他の要素もコンピュータに情報を伝えるために重要となります。

 

meta要素

meta要素は、Webページの仕様を伝える情報を記述します。それぞれの属性を使って、ページの仕様を設定していきます。

  • charset(文字コード)
  • author(著者名)
  • keywords(キーワード)
  • description(概要)

上記が、meta要素で一般的に使われる属性です。こういった情報を記述することで、どんなWebページなのかということをコンピュータに伝えることができます。

 

link要素

link要素は、外部ファイルとの接続を示すものです。CSSファイルやRSSファイルを、ページに関連付けるときに使われますね。以下のような記述をします。

<link rel="stylesheet" href="style.css" type="text/css">

 

body要素の構造について

先述したhead要素と違って、body要素に記述されている情報の多くは、人間が目にする情報となります。テキストや画像、動画など、Webページを構成するコンテンツが表示される部分です。ここに、見出しや段落、箇条書きなど、適切なタグを使ってマークアップしていきます。

そして、body要素に入る要素は、大きく2つに分けられます。それは、「ブロックレベル要素」と「インライン要素」です。それぞれに性質や役割が異なりますから、違いを理解するようにしてください。
 

ブロックレベル要素

ブロックレベル要素は、情報を一つのブロックとして扱います。なので、ブラウザで表示すると、左右の幅いっぱいに表示されて、上下に改行が入ります。ですから、ブロックレベル要素同士は、横に並ぶことはありません。(CSSで指定した場合を除く)

代表的なブロックレベル要素は、以下の通りです。

  • h1~h6要素
  • p要素
  • ul,ol,li要素

 

インライン要素

インライン要素とは、文中の一部分だけに適用されます。なので、ある単語だけをピンポイントで指定して、意味付けすることが可能です。ブロックレベル要素とは違い、左右の幅や改行が入らないために、連続して横に並べることもできます。

代表的なインライン要素は、以下の通りです。

  • a要素
  • strong要素
  • img要素

こういった違いを理解することで、効率良くテキストをマークアップしていきましょう。初めは分かりづらいと思いますが、すぐに慣れて覚えられるはずです。

サブコンテンツ

このページの先頭へ