HTMLとXHTML

HTML

SGMLをベースにした規格。

XHTML

XMLをベースにした規格。

HTML4.01とXHTML1.0

HTMLの最終バージョンHTML4.01をもとにXMLで書き直した規格がXHTML1.0。

XHTML1.0の文法

XHTML1.0のヘッダー(Transitional)

<!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 profile="http://purl.org/net/ns/metaprof">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML/XHTML</title>
</head>

<body>
</body>
</html>

XML宣言

<?xml version="1.0" encoding="Shift_JIS"?>

XHTML1.0の文法

XHTML1.0の書式ルール

特殊文字

空要素

終了タグは書かずに、開始タグの終わりの部分に「/>」を入れる。「/>」の前には半角スペースを入れる。

例: 「<br />」

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

ブロックレベル要素とはひとかたまりを表す要素。代表は「<p>」など。

インライン要素はテキストの一部であるかのような要素。代表は「<em>」など。

ブロックレベル要素

インライン要素

階層ルール

ブロックレベル要素 h,p

ブロックレベル要素 ul

インライン要素 em

インライン要素 a

インライン要素 img

XHTML文書

html 要素

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> </html>

head 要素

head 要素の中に直接入れられる要素:

meta 要素

「情報の種類」と「内容」を合わせて指定する要素

たとえば、文字コードが「UTF-8」であることを指定する場合は以下のようになる。

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

body 要素

body 要素の中に直接入れられる要素はブロックレベル要素

body 要素の中に直接入れられるそのほかの要素は以下の4つ:

ol 要素

「ordered list」。連番がつく。ul 要素の仲間。

  1. 赤星
  2. 関本
  3. 新井
  4. 金本
  5. 鳥谷
  6. 矢野
  7. 平野
  8. 下柳

dl 要素

「definition list」。用語と解説文のセット。

阪神タイガース
日本のプロ野球球団(セ・リーグ)。阪神甲子園球場を本拠地としている。

blockquote 要素

ブロックレベルの引用文を示す。

この部分が引用文。この要素は何のための要素だろう。使うことがあるのだろうか。書籍などから文章を引用する場合に使ってみてもいいかもしれない。

pre 要素

あらかじめ表示を整えたテキストであることを示す要素。ソースコードを表示する場合に code 要素とともに使用する。


if(i==0){
   print 'start';
}

div 要素

汎用的に使用できるブロック要素。困ったときはこの要素。

テーブル関連の要素

tr 要素

th 要素

td 要素

caption 要素

thead 要素

行をグループ化する。

tbody 要素

行をグループ化する。

tfoot 要素

行をグループ化する。

colgroup 要素

列をグループ化する。

col 要素

列をグループ化する。

フォーム関連の要素

form 要素

子要素はブロックレベル要素のみ。

fieldset 要素

legend 要素

input 要素

textarea 要素

button 要素

select 要素

option 要素

optgroup 要素

label 要素

要素いろいろ

strong 要素

em 要素よりさらに強く強調したい場合に使用するインライン要素。

span 要素

汎用的に使用できるインライン要素。ふさわしい要素が無い場合や特定の範囲をグループ化したい場合などに使用。 インラインで困ったときは span 要素。

q 要素

blockqoute要素のインライン版。

cite 要素

出典や参考文献などを示す要素。

dfn 要素

用語を定義している文章で、その用語に対して指定する要素。

XHTMLのつくりかた

  1. ブロックレベル要素のタグ作成
  2. インライン要素のタグ作成
  3. div要素を用いてグループ化
  4. CSS調整

CSSとのからみ

id属性とclass属性

id属性は固有の名前。class属性は種類をあらわす名前。 同じ要素に対して指定が競合した場合は、id属性を優先する仕組みになっている。

文法のチェック

The W3C Markup Validation Service

参考文献