スポンサーリンク

HTMLの基本構造を学ぼう!

html

HTMLは目印をつけることで文書に構造を与えるものですが、その基本構造は大きく分けて3つの要素から成り立っています。それはhtmlheadbody要素です。

要素とは?

「要素」とは簡単に言うと一つの意味(役割)のかたまりのことです。HTMLで作られた文書はこの要素の集合体です。
例えば「それは大袈裟です」という一文に「見出し」という役割を与えたいとします。

それは大袈裟です

このままでは上の一文は何の役割も持っていませんが、

<h1>それは大袈裟です</h1>

というように、文の前に<h1>、文の後に</h1>という「タグ」をつけることで、この一文が「見出し」という役割を持つことになります。ちなみに<h1>のhは、heading(見出し)の頭文字で、後ろの数字は見出しの大きさや重要度を表します。<h1>から<h6>まであり、<h1>が最上級です。このようにタグ付けすることでWeb上では、

それは大袈裟です

このように見出しとして大きく表示されます。そして、<h1>それは大袈裟です</h1> の部分が1つの要素ということになります。

HTMLの基本構造

HTML基本構造

冒頭でHTML文書は大きくhtmlheadbodyの3要素から成り立つと書きました。
上の図を見るとhtml要素の中にhead要素とbody要素が入っていて、入れ子のようになっていますね。ロシアのマトリョーシカ人形のような感じです。入れ子の外側を親内側を子と呼ぶ親子関係になっています。つまりheadとbodyはhtmlの子、htmlはheadとbodyの親ということになります。
唯一それらの要素の外側にあるのがDOCTYPE宣言というもので、HTML文書の先頭に必ず記述します。HTMLにはバージョンがありますが、冒頭のDOCTYPE宣言によって、その文書がどのバージョンのHTMLで記述されているかを宣言します。実際の記述方法は<!DOCTYPE ○○○○> となります。○○○○の部分にHTMLのバージョンがわかる情報を記述しますが、最新のHTML5であれば<!DOCTYPE HTML> というように一言でOKです。
次にそれぞれの要素について見ていきましょう。

・html要素

html要素は上の図からもわかるように、一番外側に存在する最も大きな要素です。DOCTYPE宣言を除くと、1つのWebページは<html>で始まり、</html>で終わることになります。

・head要素

head要素はその文書に関する情報を表す要素です。この文書に関する情報のことをメタ情報とも言って、メタ情報には、文字コード(UTF-8など)その文書のタイトル使用するCSSキーワードなどがあります。これらは直接Webページに表示されるわけではありません。なぜならメタ情報は人ではなく、検索エンジンやブラウザなどの機械に伝える情報だからです。

head要素

・body要素

body要素はhead要素とは異なり、直接Webページに表示される部分です。

body要素

上の図のように多くのWebページにはレイアウトがあるので、まずはその骨格要素を作ります。上の図であれば、

<body>
<header>ヘッダー</header>
<section>メイン</section>
<aside>サイド</aside>
<footer>フッター</footer>
</body>

といった具合です。そして骨格を作ったら、今度はその中に文章や記事などの中身を書いていくわけです。この記事の最初で例に挙げたような見出し要素 <h1> ~ <h6> や段落要素 <p> だったり、リスト要素 <ul>、<li> など様々な要素を使って書きます。

<body>
・・・・・・
<h1>HTMLの基本構造</h1>
<p>HTMLは次の3つの基本要素から成り立っています。</p>
<ul>
<li>html要素</li>
<li>head要素</li>
<li>body要素</li>
</ul>
・・・・・・
</body>

例えばこの記述をWebページで表示すると、

HTMLの基本構造

HTMLは次の3つの基本要素から成り立っています。

  • html要素
  • head要素
  • body要素

このようになります。

html

おすすめコード編集ソフト「Brackets」

さて、ここまでHTMLの基本構造を見てきました。HTMLは文字を読んでるだけではなかなか頭に入ってこないこともあるかと思います。そんなときは自分でコードを書いてみましょう。自分で実際にコードを書いてみて、ブラウザで確認する。この作業をやっていれば自然とHTMLの知識は身に着いてくるはずです。
Adobeが無料で提供している「Brackets」ですが、HTMLだけでなく、CSSやJavaScriptなども編集できる優れたコード編集ソフトです。ぜひダウンロードして使ってみてくださいね。

スポンサーリンク

シェアする

トップへ戻る