HTMLの属性を書く順序

CSSの定義をアルファベット順にした後、HTMLの属性を書く順序についてずっと考えていた。アルファベット順だとわかりやすいが、非常に読み解きづらくなる。そういった点での読みやすさだけでなく、必須属性を書き忘れないようにもできたら良いのかなと色々考えている。

今のところ以下のような順序が良さそうだと感じている。

  1. id属性
  2. class属性
  3. style属性
  4. 他属性をアルファベット順で
  5. WAI-ARIA(role属性とaria-*属性)
  6. data-*属性
  7. Microdata(item*属性)

id属性とclass属性を先頭にするのはCSSとの兼ね合いで、これらだけ知りたいというケースが多いからだ。使われることが多いclassが前の方が効率的だろうと思われるが、一意に確定されるidの強さを先頭にすることで表現したい。style属性を使うならclassと離して書くのは良くなさそうなのでこれらに続けて書く。できる限り使わない方が良いのは言うまでもない。

続けて普通の属性をアルファベット順で書くようにする。必須属性の位置が安定しないため、書き忘れを防げないようだが、必須かどうか自体が安定していない。そこで全体的な順序をアルファベット順に固定することで、必須属性が欠けている時に違和感が生じるように、という考えでこうした。

さらにHTML要素の振る舞いを変更または最適化することになるWAI-ARIAの属性を書いていき、最後に補完的な意味合いの強いdata-*属性とMicrodataを追加する。


条件が多すぎるので他の人が受け入れられるようなものではなさそうだ。アルファベット順、ただしclass属性だけ先頭にするという辺りが落とし所として無難に思える。