文書の構造を定義する最も基本的なタグ

 ここでは,HTML文書の構造を定義する最も基本的なタグについて説明します。表やフレームを含まないテキストだけのページであれば,ここで説明するタグとCSSを使うだけでそれなりの見栄えのものを作成できます。*1を付けた属性は,HTML 4.01では非推奨の属性(Deprecated Attribute)になっています。現時点で利用することは可能ですが,できるだけCSSの同等の機能を使って定義するようにしてください。*2を付けた属性はInternet Explorerで利用できます。

説明するタグ
<html>,<head>,<title>,<body>,<div>,<p>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<span>

<html>
・HTML文書のルート・エレメント(root element)を定義する
・開始タグ:任意,終了タグ:任意

<head>
・HTML文書の冒頭で関連情報などを定義する
・開始タグ:任意,終了タグ:任意

<title>
・HTML文書のタイトルを定義する
・開始タグ:必須,終了タグ:必須

<body>
・HTML文書の本体(ボディ,body)を定義する
・開始タグ:任意,終了タグ:任意
・主な属性
 bgcolor:背景色*1。値は色(RGB分解値かカラーネーム)
 background:HTML文書の背景*1。値は,画像のURLを指定する
 link:リンクの色*1。値は色
 text:テキストの色*1。同上
 link:未訪問のリンクのテキスト色*1。同上
 vlink:訪問済みのリンクのテキスト色*1。同上
 alink:選択したリンクのテキスト色*1。同上
 leftmargin:ウィンドウ左端からのマージン幅*2(ピクセル単位)
 topmargin:ウィンドウ上端からのマージン幅*2(ピクセル単位)

<div>
・ブロック・レベルでコンテンツの“入れ物(コンテナ,container)”を定義する
・開始タグ:必須,終了タグ:必須
・主な属性
 align:内容を左寄せ,中央,右寄せにする*1。値は,left(デフォルト),center,right

<span>
・インラインでコンテンツの“入れ物(コンテナ,container)”を定義する。このタグを定義しただけでは表示に影響は無い。CSSを使って任意の領域にスタイルなどを定義したいときに使う
・開始タグ:必須,終了タグ:必須

<p>
・段落(パラグラフ)を定義する
・開始タグ:必須,終了タグ:任意
・主な属性
 divタグと同じ

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
・見出しや項目を定義する
・開始タグ:必須,終了タグ:必須
・<h1>が一番トップ・レベルの見出しに対応する。表示サイズは<h1>が一番大きく,<h6>が一番小さい。<h4>が何も指定せずにテキストを表示させたときの大きさとほぼ同じ
・主な属性
 divタグと同じ

サンプル1-1●基本的なタグを使ったHTML文書

<html>
<head>
<title>文書の構造を定義する最も基本的なタグ(1)</title>
</head>
<body>
<h1>これは大見出しです</h1>
<div>
<h2>これは中見出し(1)です</h2>
<p>ここに中見出し(1)の本文を記述します</p>
</div>
<div>
<h2>これは中見出し(2)です</h2>
<p>ここに中見出し(2)の本文を記述します</p>
</div>
<h5>copyright Nikkei Software</h5>
</body>
</html>

サンプル1-2●サンプル1-1のbodyタグでleftmargin属性とtopmargin属性を指定した(HTMLは後半省略している)。ウィンドウ枠の左および上から指定した幅だけ隙間をとってコンテンツが表示されることがわかる
<html>
<head>
<title>文書の構造を定義する最も基本的なタグ(2)</title>
</head>
<body leftmargin="50" topmargin="30">
<h1>これは大見出しです</h1>

(略)

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら