🦔

調査内容まとめ HTMLタグ一覧 HTMLカテゴリー リファクタリング

2021/10/08に公開

重要なものHTMLタグ一覧

// 文書情報・構造
<!DOCTYPE><html><head>
<meta><title><body>
<h1~h6> 見出し
<p> 一つの段落(パラグラフ)
// テキストの表現
<font> フォントの種類・大きさ・色を指定する
<basefont> テキストの基準サイズ・基準色・基準フォントを指定する
<>

・入れ子のルールはコンテンツモデルで決まる

HTMLのカテゴリー {
以下のカテゴリーの中に必ず入っている
・フローコンテンツ
p div table ul ol dl
・インタラクティブコンテンツ
a button iframe img input select textarea
・フレージングコンテンツ
a button cite code iframe img input label select span strong
・ヘッディングコンテンツ
h1 h2 h3 h4 h5 h6 hgroup
・セクショコンテンツ
article aside nav section
・メタデータコンテンツ
meta title style link script
・エンべディッドコンテンツ
iframe img video

  コンテンツモデル {
    ・その要素にはどのカテゴリーのコンテンツをいれていいかを決めているルール
    ・タグの入れ子のmルールはこのコンテンツモデルによって決まっている。
  }
まとめ {
  ・html5の要素は全て6種のカテゴリーのいずれかに属している
  ・要素ごとにどのカテゴリーの要素を含んでいいか決まっている
  ・それらのルールをコンテンツモデルと呼ぶ
}

divタグ: 構造・レイアウト ... 全ての要素を入れ子にできる
spanタグ: 構造・レイアウト ... フレージングコンテンツを子要素にできる。
h1~h6タグ:見出し ...フレージングコンテンツを子要素にできる
p/preタグ:段落 ... フレージングコンテンツを子要素にできる
strong/emタグ:強調 ... フレージングコンテンツを子要素にできる
ul/olタグ:リスト定義 ... li template scriptを入れられる
liタグ:リスト定義(子要素) ... フローコンテンツを入れ子タグにできる
tableタグ:表の定義 ... tbody thead tfoot caption colgroup
trタグ:行 ... th td
th tdタグ:見出しセル データセル th tdはフローコンテンツを含めることができる
}

ターゲットブラウザで大きな崩れがない
リンク漏れや原稿違いなどの、ヒューマンエラーの頻度
バリデーター・チェックでエラーがでない

1HTML上の記述順と、情報の順番をきちんと合わせる
2タグは本来の使い方をする
3bodyラグに固有のclassを設定しておく。
4Javascriptのライブラリは乱用しない
5CSSの値の指定は極力短縮する
6ショートハンドを使用し短いプロパティで定義する
7タイプセレクタはできるだけ省略
8プロパティは常に同じ順序で記述
9インデント、開業などの一定の、ルールで行う。

Discussion

ログインするとコメントできます