リファレンスインデックスへ

文書構造を表現するXHTMLタグの正しいマークアップ

有限会社タグパンダ
喜安 亮介
2009/1/16
文書構造を表現するXHTMLタグの正しいマークアップ方法のリファレンスをスタートします
今回紹介するタグ
html
body head meta title h1〜h6 span div address

文書構造を表現するタグ

 文書構造を表現するXHTMLタグを大まかに分類し、分類したタグをXHTMLの“要素”として、1つずつ紹介していきます。

 これらの要素類はXHTMLの骨格(枠)となる部分を形成していくために使われる、XHTMLタグの記述(=マークアップ)を行ううえで基礎となる要素類です。

 htmlタグが一番の外側(先祖)となり、その内側(子)に上からhead要素、body要素といった順番でマークアップされます。

 ページとして作成する(.htmlファイル)の文書構造を考慮し、情報構造として論理的に合っているかというのを考えながらマークアップを行いましょう。

html要素

 htmlのそれぞれの要素はhtml要素を頂点とする階層構造になっています。

 その中でhtml要素は最も基礎となる要素で、そのほかの要素はすべてがhtml要素の子や子孫(※)となる関係性になります。

 なお、htmlファイルを作成するときにまず記述するべきタグの1つで、その直接の子(1つ内側)としてbody要素とhead要素が記述されます。

※ 親と子の関係をうまく利用してタグを記述します。親となるブロックレベル要素は、その子要素にだけスタイルが適用されます。

 html HTMLタグのすべての先祖となるhtml要素

body要素

 body要素の内側に記述された要素が、ブラウザ画面上にレンダリングされるようになります。

 視覚的に確認できる部分であり、この内側にdiv要素を使ってワイヤーフレームとなるブロックをマークアップしています。

 body ブラウザに表示される部分の始まりと終わりを表すbody要素

head要素

 head要素内に記述された内容は実際にブラウザ画面上で確認することはできません。

 外部スタイルシートファイルや外部JavaScriptファイルを、読み込ませるといった内容の記述はこのhead要素内に行います。

 head内にはコンテンツの情報リソースに意味(セマンティック)を持たせるためのメタデータを記述したり、検索エンジンのクローリングを制御したりできます。

 head メタ情報や外部アセットの読み込みを記述する領域のhead要素

meta要素

 head要素の子として記述され、コンピュータが解釈できるメタデータを記述するための要素です。

 有名なところでは、name属性値にkeywordという値にし、content属性の値にドキュメント(文書)と関連するキーワードを記述できます。

 またname属性値にdescriptionという値にし、content属性の値としてそのドキュメント(文書)の概要を説明するための文章を記述できます。

 meta メタ情報を表すmeta要素

title要素

 head要素の子としてマークアップされる、ドキュメント(文書)のタイトルを記述する要素です。

 各htmlファイルに記述されている内容の全体的なタイトルを記述します。

 title ドキュメント(ページ)のタイトルを表すtitle要素

h1〜h6要素

 見出しを表す要素です。

 h1、h2、h3、h4、h5、h6というふうにアルファベットの「h」の後に数字の1〜6が付きます。

 h1はその文書内で一番大きい見出しとなる情報を表現したいときにマークアップされます。h2、h3、……というふうに数字が増えるに従って見出しレベルが小さくなります。h6が最も小さい見出し要素となります。

 文書構造を意識するとh1が現れたら次はh2といったふうにマークアップを行い、間違ってもh6要素の中にh1要素が現れることのないようにしましょう。

 h1〜h6 ドキュメント(ページ)の見出しを表現するh1〜h6要素

span要素

 文章内の一部分だけに、ある特定のスタイルを付加したいときなどに用いられるのがspan要素です。インライン要素として機能します。

 span span要素はインライン要素にて構造化を表現するための要素

div要素

 スタイルシートでサイトをデザインする際に、必ずといっていいほど必要になってくる要素です。htmlのコードを大きなくくりでブロックとして扱いたい場合に使います(要素化)。

 サイトを構成するワイヤーフレームとなる部分で主に使われます。

 div div要素はブロックレベル要素にて構造化を表現するための要素

address要素

 ドキュメント作者(htmlの作成者)の連絡先を記述するための要素です。

 問い合わせ先を明記した文章にマークアップされるのが普通で、ブロックレベル要素として機能します。

 address コンタクト先を記述するaddress要素

修正履歴(2009/1/20):addressのインライン要素→ブロックレベル要素

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

  1/10

 INDEX
Web標準HTMLタグリファレンス(1)
文書構造を表現するXHTMLタグの正しいマークアップの仕方
文書構造
  html HTMLタグのすべての先祖となるhtml要素
  body ブラウザに表示される部分の始まりと終わりを表すbody要素
  head メタ情報や外部アセットの読み込みを記述する領域のhead要素
  meta メタ情報を表すmeta要素
  title ドキュメント(ページ)のタイトルを表すtitle要素
  h1〜h6 ドキュメント(ページ)の見出しを表現するh1〜h6要素
  span span要素はインライン要素にて構造化を表現するための要素
  div div要素はブロックレベル要素にて構造化を表現するための要素
  address コンタクト先を記述するaddress要素

【関連記事】

デザイナーのためのWeb学習帳
Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう!
デザインハック」コーナー
いまさら聞けないCSS/スタイルシート入門
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか?
デザインハック」コーナー


「デザインハック」コーナーへ


@IT Special

- PR -

TechTargetジャパン


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH