Zenn
🦔

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

2021/10/08に公開
#
リファクタリング
#
htmlタグ
#
htmlカテゴリー
tech

重要なもの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はフローコンテンツを含めることができる
}

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

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

Discussion