HTML 入門

HTML の基礎をマスターしよう

インデント

ソースコードの各行の先頭にスペースやタブ文字を入力して先頭を揃えることをインデント（字下げ）と呼びます．近年はタブ文字ではなく，スペース（空白文字）を入力することが多くなっています．また，キーボードの Tab キーを押したときに2個や4個のスペースが入力されるようにテキストエディタを設定することも多くなっています．Visual Studio Code では「設定」で「Editor: Insert Spaces」にチェックを入れればよいでしょう．また「Editor: Render Whitespace」を「all」に設定すると，空白文字が入力されていることが目視できるようになるので，これも設定をしておくと良いでしょう．秀丸エディタでは「ソフトタブ」という設定を有効にすればタブキーでスペースを入力できるようになります．

HTMLでは必ずしもインデントを行う必要はありません．また，改行が無くても構いません．しかしながら，インデントを適切に行うことでコードがより見やすくなり，文法のミスを発見しやすくなるなど，ソースコードのメンテナンスで多くの利点があります．次の5つのコードはどれでもブラウザは正しく表示をしてくれますが，インデントを適切に行った3つ目や4つ目のコードが人間にとって理解しやすいことでしょう．5つ目のように不適切なインデントはコードが長くなったときに理解の妨げになり，後のメンテナンスに支障をきたすことになるでしょう．

index.html（インデントなし）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web ページ</title>
</head>
<body>
Web ページを作ってみます。
</body>
</html>

index.html（改行なし）
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"><title>Web ページ</title></head>
<body>Web ページを作ってみます。</body></html>

index.html（インデント）
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Web ページ</title>
  </head>
  <body>
    Web ページを作ってみます。
  </body>
</html>

index.html（インデント）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Web ページ</title>
</head>
<body>
  Web ページを作ってみます。
</body>
</html>

index.html（インデント不適切）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
    <title>Web ページ</title>
      </head>
    <body>
Web ページを作ってみます。
  </body>
    </html>

目次に戻る