HTMLとXHTML
HTML
SGMLをベースにした規格。
XHTML
XMLをベースにした規格。
HTML4.01とXHTML1.0
HTMLの最終バージョンHTML4.01をもとにXMLで書き直した規格がXHTML1.0。
XHTML1.0の文法
- Strict
- Transitional
- Frameset
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 />」
- area
- base
- br
- col
- hr
- img
- input
- link
- meta
- param
ブロックレベル要素とインライン要素
ブロックレベル要素とはひとかたまりを表す要素。代表は「<p>」など。
インライン要素はテキストの一部であるかのような要素。代表は「<em>」など。
ブロックレベル要素
- h1 / h2 / h3 / h4 / h5 / h6
- p
- ul
- ol
- dl
- div
- address
- blockquote
- pre
- hr
- table
- form
- fieldset
インライン要素
- a
- img
- br
- em
- strong
- span
- q
- cite
- abbr
- acronym
- code
- kbd
- samp
- var
- dfn
- input
- textarea
- select
- button
- label
- sub
- sup
- b
- i
- tt
- big
- small
- object
階層ルール
ブロックレベル要素 h,p
- ブロックレベル要素 h,p の中に入れられるのはインライン要素のみ。
ブロックレベル要素 ul
- ブロックレベル要素 ul の中に入れられるのは li 要素のみ。
- li 要素の中にはブロックレベル要素、インライン要素ともに入れられる。
インライン要素 em
- ブロックレベル要素は入れられない。
- インライン要素はＯＫ。
インライン要素 a
- インライン要素 em と同様。
- インライン要素 a 自身はＮＧ。
インライン要素 img
- インライン要素 img は空要素のため、他の要素を中に入れることはできない。
XHTML文書
html 要素
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> </html>
head 要素
head 要素の中に直接入れられる要素：
- title
- meta
- link
- style
- base
- object
- script
meta 要素
「情報の種類」と「内容」を合わせて指定する要素
たとえば、文字コードが「UTF-8」であることを指定する場合は以下のようになる。
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
body 要素
body 要素の中に直接入れられる要素はブロックレベル要素
- h1 / h2 / h3 / h4 / h5 / h6
- p
- ul
- ol
- dl
- div
- address
- blockquote
- pre
- hr
- table
- form
- fieldset
body 要素の中に直接入れられるそのほかの要素は以下の４つ：
- ins
- del
- script
- noscript
ol 要素
「ordered list」。連番がつく。ul 要素の仲間。
- 赤星
- 関本
- 新井
- 金本
- 林
- 鳥谷
- 矢野
- 平野
- 下柳
dl 要素
「definition list」。用語と解説文のセット。
- dt 要素
- dd 要素
- 阪神タイガース
- 日本のプロ野球球団（セ・リーグ）。阪神甲子園球場を本拠地としている。
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のつくりかた
- ブロックレベル要素のタグ作成
- インライン要素のタグ作成
- div要素を用いてグループ化
- CSS調整
CSSとのからみ
id属性とclass属性
id属性は固有の名前。class属性は種類をあらわす名前。 同じ要素に対して指定が競合した場合は、id属性を優先する仕組みになっている。
文法のチェック
The W3C Markup Validation Service
参考文献