▽勝手にHTML辞典

たーさんのたーさんによるたーさんのためのHTML辞典です。単なるHTMLのメモとも言います(´∀`;)

 『ある程度使いやすく、それでいてシンプルに』

バランスのとれたHTML構成をねらってます。別に、そんなものをねらう必要はないんですけどねw

対象としている環境はある程度CSSを表示できるブラウザ。IEで言うなら4以降、ネスケなら6以降程度です。ただし、CSSが表示できない環境でも、それなりに内容がわかる用に構成します。

ここに載っていないタグ・属性はすべて使用禁止で(o^-')b

方針

基本はHTML 4.01+α
部分的に、HTML 4.01では非推奨の要素も利用します。
表示に関する要素はCSSへ
けど、CSSの話はまた今度(´∀`;)
タグと属性はすべて小文字で記述
大文字でもいいんですけど、小文字で統一。
終了タグは省略しない
基本的に終了タグの省略は無しで。

メモ

文字参照
よく使う文字参照は以下の通り。
&lt; →  <
&gt; →  >
&amp; →  &
&quot; →  "
コメント
コメントの書式は以下の通り。
<!-- コメント -->
コメントの中に連続した-は禁止で。
特別なフレーム名
target属性で使用できる特別な名前は以下の通り。
_blank 新しいウィンドウに表示する。
_top すでにあるフレームをすべて解除して、ウィンドウいっぱいに表示する。

全体構成

DOCTYPE
TransitionalもしくはFramesetで。

・フレームを使わない場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

・フレームを使う場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

html 最上位要素
このタグの中にheadとbodyをひとつずつ入れる。
head 文書情報
文書の情報に関するタグをこの中に入れる。
body 文書本体
文章本体をこのタグの中に入れる。
属性はどれも使用しません。背景などの指定はすべてCSSで。

head内のタグ

title 文章タイトル
文章のタイトルを記述します。
base 基準URI
リンク先のページを開くデフォルトのフレームを指定します。
属性:target
meta メタ情報
以下の形式で、文字セットを指定するためだけにmetaを使用します。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

キーワードや検索エンジンの指定もできることになってますが、そのあたりは当てにしない方針で。
link 関連ファイルの指定
以下の形式で、外部CSSファイルを指定するためだけにlinkを使用します。

<link rel="stylesheet" href="default.css" type="text/css">

ほかの文書との関連などは本文に記述する方針で。

body内のタグ

●テキスト

h1〜h6 見出し
見出し。まじめに設定すること。
p 段落指定
段落。閉じタグもちゃんと使うこと。
br 改行(空要素)
改行。使いすぎるのはかっこわるいので要注意。
属性:clear
em 強調
標準ではイタリックで表示されるのかな。変更したいときはCSSで。
strong もっと強調
標準では太文字で表示される強調。これも、変更したいときはCSSで。
pre 整形済みテキスト
タブを使うときは環境によって幅が変わることがあるので要注意。
code ソースコード
基本的にpreと同時に使用すること。
del 削除部分
見せ方は当てにならないので、使用する場合はcssも同時に指定しておいた方がいい。
属性:datetime
blockquote 引用文
ブロックレベルの引用文。
属性:cite
address 連絡先
連絡先を示す。

●その他

a アンカー(リンク)
リンク。よく使うページではtabindexとaccesskeyも指定しよう。
属性:href/name/target/tabindex/accesskey
img 画像(空要素)
画像の指定。ボーダーの設定などはCSSで。
属性:src/alt/width/height
div 汎用ブロックレベル要素
CSSで表示を指定するために多用。ただし、使いすぎるとセンスが感じられないので要注意。
span 汎用インライン要素
使い方はdivと同じ。
hr 横罫線(空要素)
見せ方を変えたいときはCSSで。
center 中央揃え
本来はHTML 4.01では非推奨要素だが個人的に好きなので使用可能(笑)

●リスト

もちろん、どのタグも終了タグは省略しない方針で。

ul 番号無しリスト
マークの種類はcssで再現が難しそうなので使用可能。リストの各項目はliを使う。
属性:type
ol 番号付きリスト
番号の種類はcssで再現が難しそうなので使用可能。リストの各項目はliを使う。
属性:type/start
li リスト項目
リストの各項目。
dl 定義リスト
用語+説明を列挙するタイプのリスト。
dt 定義する用語
用語。
dd 用語の説明
説明。

●テーブル

レイアウト目的での使用は控える方針で。

table 表
テーブル。
属性:width/border/frame/rules/cellspacing/cellpadding
caption 表タイトル
表のタイトル。そもそもcaptionを使うかどうかは気分で。alignはCSSで再現が難しそうなので使用可能。
属性:align
tr 横方向の一列
横方向の一列
属性:align/valign
td 内容セル
各セル。
属性:rowspan/colspan/align/valign
th 見出しセル
属性はtdを参照のこと。

●フレーム

frameset 分割指定
フレームの分割指定。
属性:rows/cols
frame フレーム(空要素)
フレーム。
属性:src/name/marginwidth/marginheight/noresize/scrolling/frameborder
noframes フレームが表示されないときの内容
フレームを使う場合はちゃんとフォローすること。

●フォーム

基本的にフォーム関係のタグはすべての属性を使用可能で。tabindexとaccesskeyはできるだけ指定する事。

form 入力フォーム
input フォームの構成部品(空要素)
textarea 複数行の入力フィールド
select メニュー
option 選択肢
fieldset 構成部品のグループ化
legend 構成部品グループのラベル

[Etc] Presented by ta3 [2004/12/29]