HTML の基本構造

HTML

HTML の基本構造

Web サイト作成やカスタマイズには、（X）HTML を理解する必要があります。基本さえ押えれば決して難しくありませんのでぜひマスターしておきましょう。

HTML の基本構造

HTML の基本構造

<html>  
<head>  
</head>  
<body>  
</body>  
</html>

HTML の基本構造イメージ

HTML の基本構造イメージ

基本要素を所定の位置に記述

・DOCTYPE 宣言  
<html>  
<head>  
・meta 要素  
・link 要素  
・title 要素  
</head>   
<body>  
・div 要素  
</body>   
</html>

XHTML を使用する場合

・XML 宣言  
・DOCTYPE 宣言  
<html>  
<head>  
・meta 要素  
・link 要素  
・title 要素  
</head>   
<body>  
・div 要素  
</body>   
</html>

XML 宣言

XML 宣言とは、新しいマークアップ言語である XHTML で記述していることを宣言するものです。記述するにはいくつかの注意点があります。XML 宣言は、先頭に記述する必要があり、それより前に空白や空行があってはいけません。また、IE6 以前のブラウザでは互換モードになってしまうバグがあり、後に説明する CSS （スタイルシート）の解釈（表示）に支障が出る欠点があります。そのため、これを回避する理由から XML 宣言しないサイトも数多くあります。

IE6 は古いブラウザですが、いまだトップシェアを誇ります。Web サイトを作成する側として、この現状を軽視できないというわけです。

XML 宣言の記述例

<?xml version="1.0" encoding="utf-8"?>

DOCTYPE 宣言

DOCTYPE （ドクタイプ）宣言とは、ブラウザが正しく認識・表示するために必要なもので、その文書がどのバージョンの HTML を利用し、どの DTD （文書型定義）に従って記述されているかを宣言するものです。一般的に HTML の場合は HTML4.01 、XHTML の場合は XHTML1.0 を使用します。DTD とは Document Type Definition の略で、Strict （厳格型）、Transitional （移行型）、Frameset （フレーム設定型）の3種類があります。

DOCTYPE 宣言の記述例　Transitional （移行型）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

または

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
        "http://www.w3.org/TR/html4/loose.dtd">

XHTML の場合　Transitional （移行型）

<?xml version="1.0" encoding="utf-8"?>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

DOCTYPE 宣言を記述した HTML の基本構造

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
<html>  
<head>     
</head>     
<body>     
</body>     
</html>

XHTML の場合

<?xml version="1.0" encoding="utf-8"?>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">  
<head>     
</head>     
<body>     
</body>     
</html>

meta タグ（<head>～</head>内に記述）

meta タグは、google 、 Yahoo! に代表される検索エンジンに対し、Web サイトのキーワードや説明、特性などの情報をクローラーに提供するためのものです。クローラーとは、Web サイトのデータを収集するロボットで、検索されたキーワードに対し適切なサイトを表示するため定期的に巡回しています。meta タグの記述がなくてもクローラーはある程度情報を収集できますが、Web サイトの文字情報を元に判断するため、必ずしも適切な情報を収集しているとは限りません。そこで meta タグを記述することで、正しい情報を提供しやすくなるというわけです。

meta タグの例

キーワード
キーワードは、 , （半角のコンマ）で区切ります。

<meta name="keywords" content="キーワード,キーワード,キーワード" />

サイトの説明文

<meta name="description" content="サイトの説明文" />

meta タグを記述した HTML の基本構造

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">      
<html>         
<head>          
<meta name="keywords" content="キーワード,キーワード,キーワード" />         
<meta name="description" content="サイトの説明文" />       
</head>        
<body>        
</body>        
</html>

link 要素（<head>～</head>内に記述）

HTML が Web サイトの基本構成を定義するのに対し、CSS （スタイルシート）はレイアウトをはじめ、配色、背景、大きさなどの見栄えを定義するものです。HTML と CSS は同時に記述することもできますが、記述が長くなり複雑化するうえ、HTML 本来の姿ではないことから CSS は外部スタイルシートとして別ファイルから呼び出す仕様が推奨されています。link 要素はスタイルシートだけでなく、スクリプト、代替文書など様々なリソースと結びつける働きをします。

外部スタイルシートを呼び出す link 要素の記述例（推奨）

<link rel="stylesheet" href=" CSS のファイル名" type="text/css" />

※スタイルシートを直接記述する場合（非推奨）

<style type="text/css">  
  
ここにスタイルシートを記述  
  
</style>

外部スタイルシートを呼び出す link 要素を記述した HTML の基本構造（推奨）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">      
<html>         
<head>          
<meta name="keywords" content="キーワード,キーワード,キーワード" />         
<meta name="description" content="サイトの説明文" />  
<link rel="stylesheet" href=" CSS のファイル名" type="text/css" />  
</head>             
<body>       
</body>             
</html>

※スタイルシートを直接記述する場合の HTML の基本構造（非推奨）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">       
<html>          
<head>           
<meta name="keywords" content="キーワード,キーワード,キーワード" />          
<meta name="description" content="サイトの説明文" />   
<style type="text/css">   
   
ここにスタイルシートを記述   
   
</style>  
</head>              
<body>        
</body>              
</html>

title 要素（<head>～</head>内に記述）

title 要素は、書籍でいう背表紙の役割を担う重要な要素で、Web サイト名に匹敵する力をもっています。検索エンジンが重要視することから、SEO において欠かせませんのでしっかり記述するようにしましょう。通常 Web サイトには、サイトマップ、カテゴリーページ、コンテンツページといったように複数のページがあります。この全てのページの title 要素を最適化するよう心がけてください。

title 要素の記述例

<title>タイトル</title>

title 要素を記述した HTML の基本構造

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">      
<html>         
<head>          
<meta name="keywords" content="キーワード,キーワード,キーワード" />         
<meta name="description" content="サイトの説明文" />  
<link rel="stylesheet" href=" CSS のファイル名" type="text/css" />  
<title>タイトル</title>         
</head>             
<body>       
</body>             
</html>

ここまで理解できましたでしょうか？前述した内容は、Web サイトにとって重要な役割を担う反面、目に見えない（Web サイトに表示されない）要素です。これから説明するのは、<body>～</body>に記述する目に見える（Web サイトに表示される）要素です。Web サイトの構成や見た目、デザインを左右するのはここからです。

ブロックレベル要素とインライン要素

Web サイトは、<body>～</body>間に記述されるブロックレベル要素とインライン要素によって構成されています。HTML には様々な Tag （タグ）がありますが、それぞれブロックレベル要素とインライン要素に大別されており、記述するには一定のルールを守る必要があります。

ブロックレベル要素

HTML の骨格となる要素で、前後が改行されるのが特徴です。

例　見出しの <h1> や、段落の <p> など

インライン要素

ブロックレベル要素や、文章中に含まれる要素で前後は改行されません。

例　文字を強調する <strong> や、改行の <br> など

※ XHTML の場合は <br />

ブロックレベル要素とインライン要素の記述ルール

①インライン要素はブロックレベル要素内に記述する
②インライン要素のなかにブロックレベル要素は記述できない
③開始タグを記述する際は、それに対応する終了タグを記述する

ブロックレベル要素とインライン要素を記述した HTML の基本構造

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">      
<html>         
<head>          
<meta name="keywords" content="キーワード,キーワード,キーワード" />         
<meta name="description" content="サイトの説明文" />  
<link rel="stylesheet" href=" CSS のファイル名" type="text/css" />  
<title>タイトル</title>         
</head>             
<body>       
<h1>見出し</h1>       
<p>段落はここに記述します。<strong>強調</strong>したり改行<br>       
することができます。</p>             
</body>             
</html>

ここまでが HTML のおおまかな基本構造となりますが、 <body>～</body>間に直接文字を記述するだけではシンプルすぎますね。そこで Web サイトのレイアウトに欠かせないブロック要素のひとつ div 要素について説明いたします。

div 要素

div 要素は汎用性の高い便利なブロック要素です。特定の意味合いを持たないことから、複数のブロックレベル要素をグループとしてまとめることができ、class 属性や id 属性を指定することで文章を構造化することができます。

class 属性や id 属性には、任意の名称をつけることができます。アルファベット、数字、ハイフン（ - ）、アンダースコア（ _ ）のみが使用できますが、アルファベットから始まらなくてはいけません。また、なるべく意味のわかる単語を使用することが望ましい。

div 要素に id 属性を指定する例

<div id="example">

div 要素に class 属性を指定する例

<div class="example">

id 属性と class 属性の役割は同じですが、使用方法が異なるので注意が必要です。id 属性は1ページ内で1度しか同じ名称が使用できませんが、class 属性は何度でも使用することができます。上記のように Web サイト全体のレイアウトには id 属性が適していますが、複数出現する要素には class 属性を選択してください。

この理由は、CSS （スタイルシート）の記述に大きく影響するためです。各属性は CSS で制御しますが、id 属性や class 属性の名称ごとに記述する必要があるため、名称が多ければ多いほど膨大な記述量となってしまうからです。

次に、id 属性と class 属性におけるスタイルシートの記述方法の違いについて説明します。

id 属性
任意の id 名の前に＃（シャープ）を付加する

#example {}

class 属性
任意の class 名の前に．（ピリオド）を付加する

.example {}

div 要素に id 属性を加えたレイアウトの例

一般的な２カラムのレイアウト

div 要素に id 属性を加えたレイアウトの例

XHTML

<body>  
<div id="header">  
</div>  
<div id="main">  
<div id="contents">  
</div>  
<div id="navigation">  
</div>  
</div>  
<div id="footer">  
</div>  
</body>

XHTML （このように記述すると階層がわかりやすくなります）

※開始タグと終了タグを縦で揃えるのがポイントです。

<body>   
  <div id="header">   
  </div>   
  <div id="main">   
    <div id="contents">   
    </div>   
    <div id="navigation">   
    </div>   
  </div>   
  <div id="footer">   
  </div>   
</body>

CSS

※当サイトの基本レイアウト、サイズをベースにしています。

/* body */       
/* ------------------------- */       
body {       
        text-align:center;       
}       
       
/* header */       
/* ------------------------- */       
#header {       
        width:970px;       
        margin:0 auto;       
}       
       
/* main */       
/* ------------------------- */      
#main {       
        width:970px;               
        margin:0 auto;       
}       
       
/* contents */       
/* ------------------------- */      
#contents {       
        width:650px;       
        float:left;       
}       
       
/* navigation */       
/* ------------------------- */      
#navigation {       
        width:300px;       
        float:right;       
}       
       
/* footer */       
/* ------------------------- */       
#footer {       
        width:970px;       
        margin:0 auto;       
}

CSS の解説

① body の text-align:center; は、IE 対策で、サイト全体を中央に配置するため

② margin:0 auto; は、Firefox などのブラウザで div 要素を中央に配置するため

③全体を 970px の幅で固定し、コンテンツは 650px で左側に、ナビゲーションは 300px で右側に配置しています。差の 20px がスペースとなります。

November 3, 2009｜comments（0）