コンテンツ内容の表示には、使用目的にあったタグを使用しましょう。
３回目は、表記する内容の表示形式にあったタグについてふれます。この項目は、くどくて長いです。
DOCTYPE宣言(DTD、Document Type Definition、)の話
タグについて書く前に、タグのルールを左右する宣言について書いておきます。
ドックタイプ宣言を記述する事で、何が起きるかと言うとインターネットエクスプローラーやファイヤーフォックスやオペラなどのページを表示するソフト(ブラウザ)の動作モードを切り替える事ができます。
この規格は、w3cと言う団体が勧告という形で配布していて、ブラウザやエディタは規格に合わせた動作をするように各メーカーも努力しています。
XHTMLの規格で作成しておけばxmlの表記や独自のxslで定義したタグを取り込む事が出来ます。
MT（ムーバブルタイプと言うブログツール）等はxml表記を使用している箇所が有ります。
RSSなどもXML表記に合わせて書かれています。
今回のテーマは、web標準なのでXHTML1.0とXHTM1.1のURLを省略しない標準モードで作成します。
xhtml1.0
XHTML1.0は、HTMLからXHTMLへの移行がスムーズに行なわれるようにするため、HTML4をXMLで定義しなおしたもので、使用できるタグの種類は同じものとなっています。
ただし、記述方法には決まりが有りますので注意が必要です。
- Strict
- 基本的な文章の構造をマークアップするというものだけを使用できる。
- Transitional
- 基本的な文章の構造のマークアップに加えて、｢できるだけ使用しないほうがよい｣とされた、デザインやレイアウトを指定するものを使用することができます。
- frameset
- Transitionalに加えて、フレーム制御を使って作成するものを使用することができます。
- basic
- 主に携帯電話などや PDA (携帯情報端末)、向けに作られた企画です。
基もとメーカー独自のHDML、CompactHTMや WMLなどバラバラだった独自の軽量な言語を使用していた各機種同士に互換性を持たせるためにできました。
今回、xhtml1.0で作成場合、使用する宣言は以下のどちらかです。
Strict
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
このとき、HTMLの開始タグには、以下のようにxml表記とHTML表記の２種類で言語設定をする必要があります。
以前は、「ＵＴＦ−８とUTF−１６言う文字コードで作成する場合に言語設定が省略できる」とされていましたが、「サーバーのヘッダ情報を指定できない環境で文字コードを明示したい場合は、XML宣言とmeta要素の両方が必要である」に変更になりました。サーバの使用やＰｅｒｌ言語で作成されたｃｇｉでのコード変換を考慮して、文字コードにｓ−ｊｉｓを使用する方が無難ですので、以下のように記述します。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
xhtml1.1
XHTML1.1は、HTMLの本来の目的である｢文書の構造をマークアップする｣という機能だけをまとめたものです。
そのため、基本的にXHTML1.0のStrictバージョンとほぼ同じと言えます。
ただし、パラメーターの記述方法がxhtml1.0とは違うので注意が必要です。（name="" ID=""でname=""は存在しないなど）
- xhtml11
- XHTML10 Strictから、いくつかの属性値の型が変更されている点を除けば、それほど大きな違いはありません。
以下の点に注意してください。
xhtml1.1では、lang=""が、使用できないので代わりにxml:langを使用する。
また、送信フォーム<form></form>内で使用されるタグや<a>や <map>で name=""の代わりに id=""を使用する。
ルビ関連の要素が追加されました。
今回、xhtml1.1で場合使用する宣言は以下の記述を使用します。
<?xml version="1.0" encoding="Shift_Jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
このとき、HTMLの開始タグには、以下のようにxml表記だけをします。（lang=""は、必要有りません。）
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
HTMLヘッダで多用される基本的なタグ(<head>と</head>の間)の話
xhtmlのルールでは、<html>〜</html>内で使用されるタグは、全て開始タグと終了タグが対で記述されている必要があり大文字小文字の区別があります。
例えば<br>と言う改行タグでさえも</br>とセットです。
開始タグと終了タグの間に何も記述使用のない物については<br />のように半角スペースとスラッシュで省略することが出来ます。
<head>内で使用するタグでは、<meta><link>
- head
- <head>〜</head>の間には、このhtmlファイルに関する情報を記述します。
作成者情報、連絡先メールアドレス、表示部分で使用されている形式、デザインやレイアウトを定義したファイルの情報、このページのタイトルなどです。
この部分に書かれた情報は、タイトルを除いて直接表示される物では有りません。 - meta(http-equiv="Content-Type")
- このタグは、このファイルがテキスト形式のコンテンツファイルで、文字コードはシフトJISで書かれていますとサーバやブラウザなどに知らせています。
文字コードについては、いろいろありますが今回はシフトJISでお願いします。
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
xhtmlは、xmlのルールに従う形式になったので、xmlのガイドラインに従うと本来は上記のように書くのですが、最新のIE7もサポートしていないので以下のようにcontent="text/html;と記述しておくことにしましょう。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> -
SEOを考慮している方へ、
s-jisでもサイト全体が統一されていれば問題ないので安心してください。
全てutf-8で作成しても、perlのcgiでコード変換が必要になったときコンバーターにnkfやjcode.pmが使用できない環境だとjcode.plを使うしかなくcgiが生成するHTMLドキュメントがeuc-jpやs-jisになってしまうのでサイト内の文字コードが混在することになります。
文字コードの混在は、SEO的には良くないと聞いたことがあります。
- meta(http-equiv="Content-Style-Type")
- このタグは、このファイル内でテキスト形式で、デザインやレイアウトを定義していますとサーバやブラウザなどに知らせています。
本来"http-equiv"の内容は、サーバに定義しておくもので、htmlファイル内に記述するべきではないのですが、サーバ提供側にもいろいろ事情が有ったりしますので、以下のように自前で書きましょう。
<meta http-equiv="Content-Style-Type" content="text/css" /> - meta(http-equiv="Content-Script-Type")
- Javascriptを使用したい方は、以下の定義も必要になります。
<meta http-equiv="Content-Script-Type" content="text/javascript" /> - meta(name="keywords")
- 以下のようにcontents=の後にクオート(")で囲みます。
そこにサイトやページの内容に合った単語をカンマ区切りで５つ程度並べましょう。
同じキーワードを４っ以上使用したり多く記述しすぎるとスパムサイト扱いされることがあります。
<meta name="keywords" content="キーワード１,キーワード２,キーワード３" />
SEO的には、ページ内容とは関係ないキーワードを設定したスパムサイトが多かったため、現在のgoogleなどの主な検索エンジンはmeta keywordsを重要視していません。次に説明するディスクリプションの方が大切です。
- meta(name="description")
- これは、SearchEngineResultPageと言って検索結果で表示される文章です。
この中に書かれた文章もキーワード対象になり得ますが、内容表示部分内のマークアップした文章などに重点が置かれたりしています。
ここに書く文章は、人間が読んで興味を持ち、思わずアクセスしたくなる文章が必要になります。
content=""のクオートで囲んだ部分にキャッチコピーなどの気の利いた文章を１００字〜２００字以内程度で記述しましょう。
<meta name="description" content="" /> - meta(author)
- ページ内容の著者を明記します。<meta name="Author" content="">
この記述は、表示はされません。 content=の部分には、会社名、名前、ニックネームなどを記述します。
また、ここにはメールアドレスを記述してもよいです。 - title
- ページの内容に則した一番の見出しです。このタグの中に書いた内容はブラウザ上で表示されます。SEO的にも重要視されているので、必ず書きましょう。
- link(rel)
- 以下のように記述して、デザイン、レイアウトを定義したcssファイルを読み込んだりするときなどにも使用します。
<link rel="stylesheet" type="text/css" href="../css/style.css" />
また、<LINK> を用いて、複数のHTML文書間の関係を記述する事が出来ます。
例
<link rel="INDEX" href="./index.html" />
<link rel="NEXT" href="HTMLファイル名" />
<link rel="PREV" href="HTMLファイル名" />
| rel=のクオート内に記述 | href=のクオート内に記述する内容 | 使用する目的、文書間の関係 |
|---|---|---|
| START | 開始ページのurl | 開始ページ |
| NEXT | 次のページのurl | 次のページ |
| PREV | 前のページのurl | 前のページ |
| CONTENTS | 目次ページのurl | 目次ページ |
| INDEX | 索引ページのurl | 索引ページ |
| GLOSSARY | 用語集ページのurl | 用語集ページ |
| CHAPTER | 章であるページのurl | 章であるページ |
| SECTION | 節であるページのurl | 節であるページ |
| SUBSECTION | 小節であるページのurl | 小節であるページ |
| APPENDIX | 付録ページであるページのurl | 付録ページであるページ |
| HELP | ヘルプページのurl | ヘルプページのurl |
スパムサイトとして扱われると３０位以上には表示されなくなる、また悪質な場合ディレクトリから削除されます。
削除された場合、２度と検索結果に表示されません。怖いですね〜
救済措置がある検索エンジンも有るのですが、サイトの改善をした上で申請し、チェックされます。
表示部分で多用される基本的なタグ(<body>と</body>の間)の話
タグの用途と必須のパラメータと使用を避けるパラメータについて主に書きます。
最初は、BODYタグ内で使用する表示部用のタグについてです。
HEADタグ内で使用されるタグについては、この後で書きます。
- body
- xhtmlは、HTMLタグ(htmlファイル)とレイアウト、デザインの指定(cssファイル)が分離されています。
従って、bodyタグにはなにも設定しません。
以前の(bgcolor)(background、bgproperties)(text、link、alink、vlink)(leftmargin、topmargin) 等の指定は全て外部のcssファイルに表記して、HTMLファイルと同時に読み込むようにします。 - hx
- 見出しタグです。
見出しレベルは、６段階有るのでxには１〜６の数値が入ります。(xhtml2からは数値を無くして入れ子にするだけでも見出しレベルが変わるようになるようです。)
このページでは、各ページの大きなくくりにh1の大見出し、コンテンツ部分全体のテーマにh2の中見出し、コンテンツ内の単元ごとにh3の小見出しを使用しています。
見出しタグにも基本的には何も設定しません。
以前の(align)は、スタイルシートで指定します。
見出しレベルを変えずに別デザインの見出しを使用したい場合idやclassは、表記可能です。
しかし、アクセシビリティー的な面や勘違いをさせてしまったりとユーザビリティー的にも良くなかったりするのであまりお勧めしません。１つのページ内の見出しデザインは統一しましょう。
別ページで変更するようにして、そのページでは別のcssファイルを読み込ませるようにしましょう。
- div
- 文章と関連した画像の固まりを作ったり２列や３列の段組をするのに使うBOX的な役割のタグです。
スタイルシートでボーダーやバックグラウンドイメージを設定して枠をつけたりできます。
また、ページ内のコンテンツを固まり毎にレイアウトするのに欠かせません。
idやclassを設定して使います。
この固まりごとに、cssファイル内でサイズや位置をしていしてレイアウトします。
テーブルを使ってのレイアウトでは無く、divを使ってスタイルシートでレイアウトするようにしましょう。
以前の(align)は、スタイルシートで指定します。 - p
- これは、段落タグです。<p></p>の間に記述された内容が、１段落として表示され前後に間隔が作られます。
前後の間隔と行間は、スタイルシートで見やすく設定しましょう。
また、<p class="">のようにクラスを設定して、幾つかの装飾タイプやレイアウト設定をスタイルシートに定義して使用したりします。
何のタグにも囲まれていない文書を作らないようにするためにも役立つので他のタグに比べても多用されるタグです。以前は</p>が省略できましたが段落の最後には必ず閉じタグの</p>はつけてください。 - また、行間のスペースを<p>タグで作っていた方もいたと思いますが、間隔はスタイルシートで設定しましょう。
- li
- リスト用のタグで、箇条書きにするときに使用するタグです。
<li>は、単独では使用しません。箇条書きで使用するタグは、<ul>、<ol>、<dl>の3種類有ります。
この３種類のうち<ul>、<ol>の開始タグと終了タグの間で使用されます。
以前は、</li>がが省略できましたが、必ず閉じタグはつけてください。 -
<dl>の場合は、定義リストと言って<li>の代わりに<dt>と<dd>を使用します。
<dt>と</dt>の間に記述した内容に対する説明を<dd>と</dd>の間に記述します。
この二つが<li></li>一つ分にあたり、必ず<dt><dd>はセットで使用します。
以前は、これらのタグ内でリストのマークや番号をtype=""、start=""、value=""などで設定していましたが、xhtml1.0 Strict、xhtml1.1ではクラスの指定をしてスタイルシートで記述しましょう。 - a
- アンカータグと言ってページやページの特定部分にリンクするときに記述します。
通常のリンクは、href=""のクオート内にリンク先のアドレスを記述し、特定の場所にリンクする場合は、あらかじめリンク先に<a name="xxxx">xxxx</a>と記述して作成しておき、<a href="xxxx">xxxxへのリンク</a>でリンクします。アンカーは、idやclassを設定してデザインやレイアウトでリンクである事を解りやすくしましょう。
accesskeyを定義する事で、キーボードの任意の１字をショートカットキーとして割り当てたり、titleを定義してリンク先ページのタイトルを表示する事も出来ます。targetを定義すれば、別ウインドウ（別のタブ）にリンク先を表示する事も可能です。
ただし、XHTML1.1の宣言で<a name="">とtargetの指定は、使用できませんので注意してください。 - また、メールソフトに送信先アドレスや件名を受け渡すことも出来ます。
このとき<a href="mailto:xxxx@xxxxx.xxx">と記述します。（xxxx@xxxxx.xxxは、送信先メールアドレスを記述します。） - img
- 画像を表示するためのタグです。このタグは、閉じタグを省略して記述しますので以下のように書きます。
<img src="画像の場所" alt="画像の説明" width="横幅" height="高さ" />
src、alt、width、heightの値は必須ですのでクオートの間に表示したい画像の情報を記入します。
上記以外で使用できるのは、id、class、titleの３つです。
以前良く定義されていたborder、alignなどはスタイルシートで定義してください。 - 尚、<img>は、文字列と同じ扱いなので、何のタグにも囲まれていない<img>を作らないようにしてください。この後に出てくるブロックレベル要素のタグ内で使用してください。
- br
- 回り込み禁止のタグ、要は改行の事です。次で説明するブロックレベルに属さないタグは、表示スペースが許す限り横に並ぶ事が出来ます。それを強制的に改行させるのが<br />のタグです。
このタグに定義出来るのは、id、class、titleの3つありますが、改行にする定義が思いつかないので、無視しましょう。閉じタグは、省略する形で<br />と記述します。 - table
- 関連して使用するタグが多くて、説明する内容が一番多いので最後にしてみました。
テーブルは、本来表として表記するための物なので、Web標準に則したコーディングではレイアウトに使用する事は出来ません。 理由としては、 <table></table>の間に存在しなければならない以下のタグが有るからです。
テーブルは、２種類の表記方法が有りますので例を書いて説明していきます。
例１
<table summary="パターン１">
<caption align="top">
表のタイトル
</caption>
<tr>
<th abbr="１列目の意味">１列目の意味</th>
<th abbr="２列目の意味">２列目の意味</th>
</tr>
<tr>
<td>１列目の内容</td>
<td>１列目の内容</td>
</tr>
</table>
例２
<table summary="パターン2">
<caption align="top">
表のタイトル
</caption>
<tbody>
<tr>
<td>１列目の内容</td>
<td>１列目の内容</td>
</tr>
<tbody>
<tfoot>
<tr>
<td>１列目の意味</td>
<td>２列目の意味</td>
</tr>
</tfoot>
<thead>
<tr>
<td>１列目の意味</td>
<td>２列目の意味</td>
</tr>
</thead>
</table>
左側の例１で作成する方がスマートなので、(<thead>が<tfoot>の後に書いたりして変だし)例２は割愛します。（例２の<tfoot>から</tfoot>までの部分は無くてもかまいません。）従って、<table>タグ内に存在しなければならないタグは、次の<caption><tr><th><td>４種類になります。
それでは、<table>から書いていきます。
- <table>
- このタグに定義出来るのは、summary、id、class、の3つあります。
この中でもsummaryは、必ず記述するようにしましょう。
その他にもwidth、border、frame、rules、cellspacing、cellpadding、が定義可能ですがスタイルシートで設定するようにしましょう。 - <caption>
- 何についての表か記述するためのタグでid、class、title、の3つが定義可能です。
文字色、背景色、表示位置、表示幅などは、スタイルシートで定義します。 - <tr>
- このタグ内での基本的な定義は、id、class、title、の3つあります。
以前のalign、valign、はスタイルシートで設定しましょう。
その他にもchar、charoff、が定義可能ですが、ほとんど使用ないので割愛します。 - <th>
- このタグに定義出来るのは、abbr、rowspan、colspan、id、class、などがあります。
この中でもabbrは、必ず記述するようにしましょう。
その他にもchar、charoff、 axis、headers、scope、が定義可能ですが、ほとんど使用ないので割愛します。 - <td>
- 基本的には<th>と一緒です。
<th>と違う点は、 abbrは必須ではないという部分です。
以上がテーブル作成時に考える内容です。
おまけの情報
ホームページの表示で、<b></b>タグ（太字の指定）を使用して強調する文字を表現しているならば、
<strong></strong>タグ（強調指定）に変更する事をお勧めします。
<strong></strong>タグで囲われた部分を強調したいと言った意味を検索エンジンが理解し検索キーワードの対象にしてくれます。
スタイルシート上での指定もボルドー（太字の指定）なので、強調したい文には別途スタイルシートで定義するのではなくて<strong></strong>タグを使用しています。
文書構造と要素の分類について
文書構造とは、ここが見出し、ここが段落で、ここがリスト、ここが表、ここからここまでがひとかたまり、というように文書が持つ内容の構造を表すタグです。
ブロックレベルの要素
基本的に要素の前後に改行が含まれています。
ブラウザによっては、前後の１行分の余白をもって表示するものもあります。
XHTML1.1におけるブロックレベル要素は、下記の通りです。
- XHTML Block Structural Module
- div、p
- XHTML Block Phrasal Module
- address、blockquote、pre、h1、h2、h3、h4、h5、h6
- XHTML Block Presentation Module
- hr
dl、ol、ul（リスト要素）
table（テーブル要素）
form、fieldset（フォーム要素）
インラインレベルの要素
普通の文字列文書と同じ扱いで前後に空白や改行なく単独では使用できません。
このインラインレベル要素は、必ずブロックレベル要素の開始タグと終了タグの間で使用する必要があります。
XHTML1.1におけるインラインレベル要素は、下記の通りです。
- XHTML Inline Structural Module
- br、span
- XHTML Inline Phrasal Module
- abbr、acronym、cite、code、dfn、em、kbd、q、samp、strong、var
- XHTML Inline Presentation Module
- b、big、i、small、sub、sup、tt
- XHTML BDO Element Module
- bdo
- XHTML Hypertext Module
- a
img, map, object（埋め込みオブジェクト）
label, input, select, textarea, button（フォーム要素）
リスト要素
箇条書きをする際に使用する全てのタグです。
dl、dt、ddは、タグに改行を含んでいます。
- XHTML Lists Module
- ol、ul、li、dl、dt、dd
テーブル要素
表形式で使用する全てのタグです。
- XHTML Table Module
- table、caption、colgroup、col、thead、tfoot、tbody、tr、th、td
フォーム要素
送信フォームなどの入力や選択項目のデータをサーバに受け渡すのに使用する部分で使われるタグです。
<form>で使用するタグは、送信フォームとcgiの設置と言う項目と合わせての方が良いかと思います。
今回の予定には無かったりしますが、またいつか・・・
- XHTML Forms Module
- form、fieldset、legend、label、input、select、optgroup、option、textarea、button
object（埋め込みオブジェクト）
埋め込みオブジェクト
<img>以外のタグについても、説明が長くなりすぎるのでまたいつかと言うことで・・・
- XHTML Images Module
- img
- XHTML Client-side Image Map Module
- map、area
- XHTML Embedded Object Module
- object
- XHTML Param Element Module
- param