HTMLのインデントのルールを解説！実際の例も紹介！
HTMLのインデントに関するルールについてタブなのかスペースなのかの話やGoogleやAirbnbなど実際の企業のインデントルールの例について紹介していきます。
HTMLのインデントとは？
みなさんはコーディングする際にインデントを意識していますか？
インデントとはプログラムを書く際に読み手が読みやすいように、字下げを行い、コードを適宜揃える事です。
実際にインデント"していない例"と"している例"を見比べてみましょう。
インデントしていない例
<div class="wrap">
<ul class="list">
<li class="item">
<a href="">link1</a>
</li>
<li class="item">
<a href="">link2</a>
</li>
</ul>
</div>インデントしている例
<div class="wrap">
<ul class="list">
<li class="item"><a href="">link1</a></li>
<li class="item"><a href="">link2</a></li>
</ul>
</div>いかがでしょうか？インデントしていない例では何が書いてあるのか分かりづらく見る気もしませんよね。実際にインデントせずにコーディングしているとHTMLの閉じタグを忘れて表示が壊れたり、更にその原因究明にも時間がかかります。
一方でインデントしている例では字下げを行っているため、HTMLタグのタグの開始・閉じや、階層構造まで形から把握することが出来ます。
このようにプログラムを書く際にはインデントを適宜行い、自分にも他人にも見やすいコードを書くというのは基本になります。
では上記のサンプルでは字下げとして半角スペース2個で字下げを行っていますが、一般的にはどのようなインデントのルールがあるのでしょうか？
HTMLのインデントのルール
ではHTMLのインデントのルールについて紹介していきます。
タブかスペースか
まず考えるべきはタブなのかスペースなのか、どちらでインデントするのかの問題です。まずはサンプルコードで両者の違いを見てみましょう。
タブのインデント
<div class="wrap">
<ul class="list">
<li class="item"><a href="">link1</a></li>
<li class="item"><a href="">link2</a></li>
</ul>
</div>上記のサンプルではTabキーで入力できるタブ文字を使ってインデントしている例です。
半角スペースのインデント
<div class="wrap">
<ul class="list">
<li class="item"><a href="">link1</a></li>
<li class="item"><a href="">link2</a></li>
</ul>
</div>一方こちらの例は冒頭と同じく半角スペース2個分でインデントした例です。
人によって見やすい・見にくいはあると思いますが、正直どちらが正解というのはありません。実際の現場でもタブ派・半角スペース派が存在しています。
いずれにせよタブ・半角スペースを混在させるのはありませんので、タブなのかスペースで行くのかは現場のルールがあればそれに従うようにしましょう。
またエディターによってはタブを自動でスペース2個or4個に変換するような設定もあります。ぜひお使いのエディターでインデントの設定を現場のルールとあわせる事をプログラムを書く前に行いましょう。
どこで改行インデントを行うか
次に改行について考えてみます。まずは下記のサンプルコードを見てみましょう。
どこで改行するか
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<ul>
<li>
London
</li>
<li>
Paris
</li>
<li>
Tokyo
</li>
</ul>上記のコードのように、HTMLタグでもどこで段落下げさせるかというのはエンジニアによって結構違いがあります。更にHTMLでは改行が入ることで、実際のブラウザで表示したときに謎のスペースが現れるなどコーディングルールによって思わぬ問題が発生することもあります。
例えば下記の例を見てみましょう。
この例ではspanタグを別の行で書いている前者では間にスペースが生まれています。一方で改行させずに記述している後者では間にスペースが生まれていません。
ちなみにこの問題は下記のように親要素を設け、親要素の文字サイズを0にして、子要素で文字サイズを改めて設定することで回避出来ます。
結局どうすべきか？
ルールがバラバラで各エンジニアが好きなようにマイルールでコーディングしていると、チームで動いたり新たなメンバーが入ってきた時に停滞する原因となりえます。
インデントのルールに絶対的な正解はありませんが、ぜひ統一したルールを最初に設ける様にしましょう。
ではこの章で見てきたルールについて他の企業ではどのようなルールが決められているのか紹介していきたいと思います。
HTMLのインデントのルールの例
Google HTML/CSS Style Guide
GoogleではHTML/CSSのスタイルのガイドを紹介しています。
下記よりアクセスすることが出来ます。インデント以外にも様々なルールが定められていますので、ぜひこれからルールを作ろうかと思っている方は参考にしてみて下さい。
Googleのインデントはスペース2つ！
さてGoogleですが、インデントは半角スペース2つで行っているようです。タブは混ぜないようにという注意書きもあります。
Googleのインデントの例
<ul>
<li>Fantastic
<li>Great
</ul>ちなみにCSSも同じくインデントはスペース2つです。
CSSのインデント
.example {
color: blue;
}AirbnbのCSS/Sassスタイルガイド
続いてAibnbのCSS/Sassのスタイルガイドです。
Airbnbもスペース2つ分で字下げとしています。
AirbnbのCSSのインデント
.avatar {
border-radius: 50%;
border: 2px solid white;
}DropboxのCSSスタイルガイド
続いてDropboxのCSSスタイルガイドです。
Dropboxではスペース4つをインデントとしてルールを決めています。
DropboxのCSSのインデント
.u-l-island {
padding: 32px;
}まとめ
いかがでしたでしょうか。インデントに関してルールやGoogleやAirbnbなどの実際の企業のルールの例を紹介してきました。
これからルールを作ろうという方はぜひインデント以外の部分についてもGoogleなど実際のコーディングルールを公開しているところを見てその上で決めると、一貫性のある現場でも使いやすいルールが出来上がります。
ぜひ参考にしてみて下さい！
