HTMLを1999年のように書く

Post on:2019年6月21日

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ページの構造を確認できます。

* {
    border: 2px dotted black;
}

* {

border: 2px dotted black;

}

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

最後に

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

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

追記

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

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

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

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

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