Zenn
🎃

HTMLマークアップ

2024/02/25に公開
HTML
tech

WIP、途中なので更新します。

この記事について

  • CSSも大事だけど、HTML大事だぞ？を伝えたい。
  • 自説が含まれます。
  • 自分が人に教える用にまとめた簡易的なメモ。
  • HTMLマークアップの記事を調べると、CSSとごっちゃになったのが多いのでHTMLだけでまとめた。

この記事ではやらない

  • コンテンツモデル
    • HTML Checkerでチェックできるし、この記事の本質ではないため。
  • CSS

ターゲット

  • 初学者向けではない
  • HTML書いたことあるよ、全部divだけど！みたいな

なぜ Semantic HTML?

  • マシンリーダブル
    • SEO（対クローラー）
    • スクリーンリーダー対応
  • アクセシビリティ
  • No CSSでも、ページ（文書）の内容が理解できる

HTMLって何？

  • Hyper Text Markup Language
  • ウェブサイトのコンテンツの構造を作るために使うマークアップ言語
  • WHATWG が　HTML Living Standard（HTML標準仕様）を策定している

HTMLマークアップするときのポイント

  • 文書構造のアウトライン化
  • 要素の意味づけをする（タグ化）

テクニック

  • 見た目（デザイン）と文書の分離
    • この文書は何を伝えたいのか
    • 情報の整理・アウトライン化
    • 完全にデザインを無視する、という意味ではない。
      マークアップした結果、文書構造とデザインがイコールになるなら、それは良いデザイン、となるはず。
  • 暗黙のセクション
  • dl > dt + dd vs section + h[1-6]
    • 情報が並列構造かどうか
      • 例えば、PCのスペック情報の羅列は「並列」
    • Markdownに置き換えたらどうなるかをイメージ
      • その文書は読みやすい？
    • コンテンツのボリューム
      • 例えば、テキスト、画像、ボタン...なボリュームならsectionでは？
  • ul ve section + h[1-6]
    • リストは短く簡潔なテキスト向けでは？（だが、構文的に間違っていない気がする）

どうやってやろう？

  1. この文書は何を伝えたいのか、コンテンツを理解する
  2. アウトライン化（Markdownとか？）
  3. 2をHTMLへ変換
  4. HTML Checkerで構文チェックをする

どこまでやろう？

前提：コーディング規約・ガイドラインに従う

（ないなら）
HTMLは厳密に書くほどマシンリーダブルになるが、比例して難易度が高くなる。ので・・・

  • HTMLは文書構造なので、section, h[1-6]の構造が正しくあること
  • ルールとしてダメ（Syntax Error / Warning）なものはやらない

だけはマストで行う、と考えるとよい（と思う）。
あとは、工数次第？

お手本サイト

だな、と思ったサイト。

参考サイト

Discussion