🎃
HTMLマークアップ
WIP、途中なので更新します。
この記事について
- CSSも大事だけど、HTML大事だぞ?を伝えたい。
- 自説が含まれます。
- 自分が人に教える用にまとめた簡易的なメモ。
- HTMLマークアップの記事を調べると、CSSとごっちゃになったのが多いのでHTMLだけでまとめた。
この記事ではやらない
- コンテンツモデル
- HTML Checkerでチェックできるし、この記事の本質ではないため。
- CSS
ターゲット
- 初学者向けではない
- 初学者の方はmdn HTMLの基本へどうぞ
- HTML書いたことあるよ、全部divだけど!みたいな
なぜ Semantic HTML?
- マシンリーダブル
- SEO(対クローラー)
- スクリーンリーダー対応
- アクセシビリティ
- No CSSでも、ページ(文書)の内容が理解できる
HTMLって何?
- Hyper Text Markup Language
- ウェブサイトのコンテンツの構造を作るために使うマークアップ言語
- WHATWG が HTML Living Standard(HTML標準仕様)を策定している
HTMLマークアップするときのポイント
- 文書構造のアウトライン化
- 要素の意味づけをする(タグ化)
テクニック
-
見た目(デザイン)と文書の分離
- この文書は何を伝えたいのか
- 情報の整理・アウトライン化
- 完全にデザインを無視する、という意味ではない。
マークアップした結果、文書構造とデザインがイコールになるなら、それは良いデザイン、となるはず。
- 暗黙のセクション
-
dl > dt + dd
vssection + h[1-6]
- 情報が並列構造かどうか
- 例えば、PCのスペック情報の羅列は「並列」
- Markdownに置き換えたらどうなるかをイメージ
- その文書は読みやすい?
- コンテンツのボリューム
- 例えば、テキスト、画像、ボタン...なボリュームならsectionでは?
- 情報が並列構造かどうか
-
ul
vesection + h[1-6]
- リストは短く簡潔なテキスト向けでは?(だが、構文的に間違っていない気がする)
どうやってやろう?
- この文書は何を伝えたいのか、コンテンツを理解する
- アウトライン化(Markdownとか?)
- 2をHTMLへ変換
- HTML Checkerで構文チェックをする
どこまでやろう?
前提:コーディング規約・ガイドラインに従う
(ないなら)
HTMLは厳密に書くほどマシンリーダブルになるが、比例して難易度が高くなる。ので・・・
- HTMLは文書構造なので、section, h[1-6]の構造が正しくあること
- ルールとしてダメ(Syntax Error / Warning)なものはやらない
だけはマストで行う、と考えるとよい(と思う)。
あとは、工数次第?
お手本サイト
だな、と思ったサイト。
Discussion