- Web制作ネタ帳
writer / たいよー
【HTMLタグ 属性の記述順】第3回コーディングあるある
新年あけましておめでとうございます。
フロントエンドエンジニアのたいよーです。
着々と続いているコーディングあるあるシリーズですが、今回は第3弾ということで、HTMLタグの属性の記述順をテーマにお話ししていきたいと思います。
※今回もちょいちょい播州弁です。
前回の記事が気になる方はこちらから。
【Grid Layout】第2回コーディングあるある
みんな何意識してコーディングしてんの？
少し前になりますが、社内の勉強会としてコーディングレビュー会を行いました。
実際のコーディングしたHTMLソースを見ながら、参加者全員で「ここどないやねん？」とツッコんでいくという内容だったんですが、それぞれ意識してることなどが違って、コーディングに携わる身としては、かなり面白い会でした。
今回の内容もそのレビュー会で題材となったものになりますが、その他の詳しい内容ついてはまた機会があればご紹介したいと思います。
HTMLの属性とは？
HTMLのコーディングをしている方ならほぼ理解してるかとは思いますが、改めておさらいです。
HTMLタグの属性とは、その要素の内容や動作を調整するために追加する値のことです。
例えば「aタグ」のリンク先を指定する「href属性」、「imgタグ」の代替テキストを指定する「alt属性」などがそれに当たります。
HTML属性についてより詳しく知りたい方は下記ページを参考にしてみてください。
参考ページ：HTML 属性リファレンス
迷いどころの多い記述例
HTML
<a href="https://www.sidethree.co.jp/" target="_blank" id="link" class="c-link01" data-target="js-link"></a>
属性の順番これでよかったっけ？と毎度悩むのが「aタグ」。
特に例のような属性パラダイスになる時は、毎度考える人状態になります。。
スタイルの優先順位を考えると「id」は先頭に記述するべき？
いや、「aタグ」って「href属性」が関連性高いから前の方がええんちゃう？
そんなら「target属性」はどこに記述したらええねん？！
もう色んなこと考えすぎて、頭がごじゃ（ぐちゃぐちゃ）になります。
どのような記述順でも機能的に問題が出ない反面、ちゃんとした指標がないので正直困りどころです。。
結局どないしたらええねん？
勉強会でいろいろと議論した結果、下記の2パターンが最終的に上がってきました。
1. 管理面を重視して使用頻度・変更箇所が多い順に記述
- class属性は、先頭に記述。
- 次にid属性を記述。
- それ以降は使用・変更頻度の高い順を基準に記述する。
「class属性」は、HTML内で最も利用する属性になるので、先頭に記述していきます。次にページ内のブックマークなど、より詳細な使い方をする「id属性」が2番目に記述。
それ以降は使用・変更頻度の高い順に記述していきます。
参考ページ：コーディングガイド by @mdo
HTML
<!-- aタグ -->
<a class="c-link01" id="link" data-target="js-link" href="https://www.sidethree.co.jp/" target="_blank"></a>
<!-- imgタグ -->
<img class="c-img" width="100" height="50" src="https://www.sidethree.co.jp/hoge.jpg" alt="ほげほげのイメージ画像">
2. 可読性を重視して関連性の高い順に記述
- タグの必須属性は先頭に記述。
- その他は関連性の高い順に記載していく。
タグの必須属性、「aタグ」なら「href属性」のように必ず設定しなければならないものを先頭に記述します。
その他はタグの関連性の高い順に、可読性を重視しながら必要な情報が前に来るよう記述していきます。
HTML
<!-- aタグ -->
<a href="https://www.sidethree.co.jp/" target="_blank" data-target="js-link" id="link" class="c-link01"></a>
<!-- imgタグ -->
<img src="https://www.sidethree.co.jp/hoge.jpg" width="100" height="50" alt="ほげほげのイメージ画像" class="c-img">
管理面 or 可読性という2パターンで分かれましたが、両方共にメリット・デメリットがあるのかなと思いますので、自分がこれだ！と思う記述ルールでコーディングすればいいんじゃないでしょうか？
個人的には「aタグ」はエディタソフトでは、「href属性」とセットで自動生成させるので、可読性を重視した記述が見慣れて気持ちいい気がしますね。笑
またコーディングする人によって、属性の順番はかなり違ってきますが、ツッコまれたときにちゃんとした根拠があれば少しは安心なのではないでしょうか。
まとめ
というわけで、今回はHTMLタグの属性の記述順についての紹介でした。
業務中さらっと流していることなど、曖昧なことはたくさんあると思いますので、日頃コーディングしているHTMLソースを見直すと新たな発見があるかもしれませんね。
今回紹介した記述ルールぜひ参考にしてみてください！
それでは皆さん、良いコーディングライフを！
