HTMLを1999年のように書く

HTMLの実装、そしてセマンティックマークアップのすすめについて紹介します。
記事のタイトルは直訳しましたが、1999年というより、フレームワークやdivスープが増産される前の時代という意味だと思います。

Write HTML Like It's 1999
by Bradley Taunt

訳者注: 1999年のようには文字通りの意味ではなく、比喩として使用されていると思います。フレームワークやdivスープが増産される前の時代でしょうか。1999年だとtableレイアウトだったり、nav要素がないなど混乱するかもしれません。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 1990年代の制約に縛られてHTMLを書く
• HTMLの悪い習慣
• HTMLの良い習慣
• 「構造」の基本的な確認方法
• 最後に
• 追記

1990年代の制約に縛られてHTMLを書く

ほとんどのデベロッパーが最新かつ高性能のWebツールを使用することが好きだと言うことを私は確信しています。プリプロセッサ、テンプレートエンジン、シンタックスフォーマッタなどの役に立つリソースは、デベロッパーの作業を楽にします。しかし残念なことに、HTMLの構造にはコストがかかることがあります。

このHTMLの構造が、私が1990年代の制約に縛られてHTMLを書く理由です。少し説明すると、テーブルはtable要素で、ナビゲーションはnav要素やli要素でコード化されます。フォームの入力は、display: none;に設定されず、カスタムコンテナに置き換えられます。これが、あなたも知っているセマンティックHTMLです。

念のために言っておきますが、1990年代に属しているように見えるプロジェクトを推奨しているのではありません。デベロッパーやデザイナーはHTMLの構造をもっと意識した方がいいと思います。

HTMLの悪い習慣

最も一般的なHTMLの悪い習慣をいくつか紹介します。

• ナビゲーションやリストのコンポーネントにspan要素・div要素を使用する。
• フォームのレイアウトでselectやradioを使用せず、div要素を使用する。
• div要素で構築されたテーブルの実装。
• 要素を過度に入れ子したり、単純なコンポーネントに対して過度に複雑な構造を作成する。
• コンテンツがJavaScriptのインジェクションに大きく依存している。

HTMLの良い習慣

悪い習慣の代わりに、どのようにすべきでしょう。

• ナビゲーションやリストのコンポーネントに適切なnav、ul、olを使用する。
• フォーム要素をスタイルすることはすでにブラウザでサポートされています。
  参考: Styling a Select Like It’s 2019
• 表形式のデータはtable要素で実装する。
• 要素の階層は可能な限りスリム、かつトップレベルに保つ。
• JavaScriptを介してコンテンツをインジェクションしないようにする（特定のアプリでは難しいですが、できるだけ最小限に抑えるようにしてください）。

「構造」の基本的な確認方法

非常に簡単なCSSを使用して、Webページの構造を確認できます。

このCSSは、ページ上のすべての要素を点線で囲むだけです。すべてのHTML要素に点線を与えることで、構造が複雑すぎるのをすぐに見つけることができます。

最後に

私の記事を読んでくれて、ありがとうございます！
私はこれらがかなり基本的なことであることを知っています。この記事のポイントは、デベロッパーにまったく新しいことや気が遠くなるようなことを伝えることではありません。その代わりに、実装をシンプルに保つようにすべきということを伝えたいです。

この業界には常に、新しく人が入ってくることを忘れないでください。この記事が、HTMLコードのセマンティクとクリーン性を維持する方向へと導くことを願います。

追記

この記事には私の想像以上に注目が集まったので、コメントで挙げたいくつかのポイントに触れることにしました。
参考: Hacker News

1. セマンティックHTMLの利点は何ですか？

   アクセシビリティです。スクリーンリーダーのようなプログラムは、HTMLの適切な階層を元に実行されます。私は、すべてのプロジェクトをスクリーンリーダーでテストすることを強くお勧めします。スクリーンリーダーを使用すると、障害のあるユーザが経験する多くの問題に目を向けることができます。

2. テーブルがレスポンシブにならない

   これは事実ではありません。通常どおりにテーブルをレイアウトするほうがはるかにセマンティクです、その後にスマホ用にFlexboxなどで対応することもできます。
   参考: Making Tables Responsive With Minimal CSS

3. 前述の簡単なCSSの代わりに、Firefoxのデバッガーを使用する

   問題ありません、Firefoxは素晴らしいです！