• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ by Proglus(プログラス)

プログラミング学習初心者のための情報メディア

You are here: Home / プログラミング入門 / HTML文書で改行やインデントがないとどうなる?なぜ必要なのか理由を解説

HTML文書で改行やインデントがないとどうなる?なぜ必要なのか理由を解説

2020-07-25 By プログラミング入門ナビ編集部

Tweet
このエントリーをはてなブックマークに追加
Pocket

目次

  • 1 はじめに
    • 1.1 動画解説
  • 2 改行やインデントがないとどうなる?
  • 3 改行やインデントはなぜ必要?
    • 3.1 コードを読みやすくする
    • 3.2 バグを少なくする
  • 4 まとめ
  • 5 今すぐメルマガ登録!
  • 6 動画でプログラミング入門をしよう

はじめに

returnキーのクローズアップ

HTML文書を書いたことのある方なら誰でも一度は「改行やインデント(行の開始位置を数段ずらすこと)をいちいち入れないといけないなんて面倒だな…自分の好きなように書いちゃダメなの?」と考えたことがあるのではないでしょうか?

この記事ではそんな疑問に対するお答えと、改行やインデントの必要性について説明します。

動画解説

本記事の内容を動画でも解説しています。

改行やインデントがないとどうなる?

例えばこのようなHTML文書を考えてみましょう。VSCodeなどのエディタで実際に打ち込んでみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
    <style>
     h1 {
       color: red;
     }
    </style>
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

これをブラウザで表示すると下記のようになります。
改行・インデント除く前のコードでの表示結果
次にコードから改行やインデントを取り除いてみましょう。下記のように、とても雑然としたコードになります。これでは実際のページもレイアウトが崩れてしまいそうですが、実際はどのようになるのでしょうか?

 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> はじめてのHTML</title> <style> h1 { color: red; } </style> </head> <body> <h1>はじめての見出し</h1> <p>はじめての段落</p> </body> </html> 

エディタで保存したら先ほどのブラウザをリロードしてみましょう。

改行・インデントを除いたコードでの表示結果

なんと表示はそのまま変わりません。実は、改行やインデントがなくても正しく書けてさえいればこのようにきちんと表示されるのです。

改行やインデントはなぜ必要?

これではますます冒頭のように「改行やインデントなんて、Word文書みたいに自分の好きなタイミングで付けたらいいのでは?」という思いが強まってしまうかもしれませんが、お待ちください。

どんなプログラミング参考書でも改行やインデントは必ずつけるよう指南があります。

それだけ、改行やインデントには実は非常に重要な役割があるのです。ここからはその理由を説明していきます。

コードを読みやすくする

プログラミングする若者

これは直感的に理解しやすいかもしれません。先ほどの改行・インデントなしのコードを見て「何が書いてあるのかわかりづらくなったな…」と思われた方が多いのではないでしょうか。

先ほど改行やインデントを取り除いてもきちんと表示できたのは、ブラウザが改行やインデントを無視してコードを読み込むためです。

「HTML文書の存在理由はブラウザに読み取ってもらってWebページとして表示されることなので、それさえできればいい」といってしまえばそれまでなのですが、その考えは少々短絡的といえます。

というのも、実際のWebサイトはいくつものWebページを保有する大規模なものであるため、基本的には複数人で開発します。そのため、誰かが書いたコードは人間である他の開発者が目にすることが多いです。

ページ同士の連携や機能拡張のために修正する等、目的は様々ですがそんな時に先ほどのような改行やインデントのないコードを書いていれば、間違いなくブーイングが起きます。

エンジニアのお作法として、他の人にも読んでわかりやすいように必ず改行やインデントを入れるようにしましょう。

バグを少なくする

警報

それなら、せめて改行は入れるけどインデントまではなくてもいいのでは?と思われたかもしれません。

インデントのない下記のコードを見てください。実はこのコードでブラウザに表示させようとすると、真っ白な画面になってしまいます。

どこかにバグがあるからなのですが、見つけられますか?

<html lang="ja">
<head>
<meta charset="utf-8">
<title> はじめてのHTML</title>
<style>
h1 {
color: red;
}
</head>
<body>
<h1>はじめての見出し</h1>
<p>はじめての段落</p>
</body>
</html>

次にインデントを付けた下記ならばどうでしょうか。インデントの有無以外で上記のコードと差はありません。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
    <style>
      h1 {
        color: red;
      }
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

8行目でh1のスタイル指定が終わった後「}」から、9行目の</head>まで通常ならばインデントが1段ずつ戻るのが、一気に2段下がっているのが不自然です。

本来はこの8行目の下に終了タグ</style>があるべきでしたが、無いということが見つけやすいですね。

このように、インデントがあれば書かれたコードを見ても不自然な箇所からバグを見つけやすいですし、書いている途中でもインデントを意識していれば間違いに気付きやすいです。

また、要素ごとにインデントがあるのでHTML文書の要素同士の階層構造が見やすいという利点もありますね。

まとめ

向かい合ったパソコン

HTML文書での改行とインデントの重要性について説明しました。

無くともブラウザに表示はされますが、エンジニアの嗜みとして改行とインデントは必ず入れるようにしましょう。また、他の言語でも同様の理由から入れるようにしてください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門(Proglus)

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: HTML, インデント, 改行

Primary Sidebar

Proglus(プログラス) 採用情報 FindU

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • VSCodeで画像が表示されない場合の対処法
  • VSCodeの基本~プロジェクトフォルダの設定方法について解説します!
  • Visual Studio Codeのメニューを 日本語化する方法と英語化する方法について解説!
  • Node.jsをmacOSからアンインストールする方法
  • MySQL WorkbenchからMySQLサーバーへの接続時やSQLファイルを取り込み時にエラーが発生した時の対処方法
  • JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因と対処方法を紹介!
  • 【Arduino入門】LCD(液晶ディスプレイ)に文字を表示しよう
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MAMP for MacOSによるMySQLのインストール方法

最近の投稿

  • ChatGPTエラーの原因別対応法: トラブルシューティングのヒント
  • 【SQL】ER図(Entity-relationship Diagram)について解説します!
  • 【MySQL】公式インストーラー(dmg)を使って、MySQLサーバーをmacOSにインストールする方法を解説
  • 【AWS Cloud9】Gitで使用するエディタを再起動してもvimの設定にする方法
  • 【VSCode】アクティビティバーに拡張機能アイコンが表示表示されていない場合の解決方法

カテゴリー

  • AI入門
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

AI AWS AWS Cloud9 Cloud9 CodeWing CSS Emmet GCP Git GitHub Heroku HTML JavaScript Linux macOS MySQL MySQL Workbench node.js Nuxt.js Proglus Python Ruby Ruby on Rails SQL Udemy Visual Studio Code vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習 開発環境構築

アーカイブ

  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2023 · programmingnavi.com ・About・プライバシーポリシー