HTML 入門トップページ

« 戻る 次へ »

目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
    1. HTML の雛形
    2. タグの基礎知識
    3. インデント
    4. コメント
  3. 基礎的なタグをマスターしよう
  4. HTML 文書を検証してみよう
  5. スタイルシート
  6. フォームを使ってみよう
  7. 参考サイト

HTML の基礎

インデント

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

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

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

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

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

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