前回の、はじめてのHTML – HTML基礎 その1 では HTMLファイル を作成し、ブラウザに表示してみました。

自分でコーディングした結果が画面に正しく表示されると嬉しいですよね。

どのプログラミング言語でも「ファイルにコーディング → 実行 → 結果を確認」の流れが基本になります。

今回は、HTMLの書き方(規則)について学習します。

フォーマット(書式)の規則

早速ですが、以下の2つの例を見て比べてみてください。

悪い例


<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML基礎 その2</title>
</head>
<body>
<SECTION class="hero is-light">
<div class="hero-body"><div class="container">
<h1 class="title">HTML基礎 その2</h1>
<div class="subtitle">コーディング規則</div>
</div></div>
</SECTION>
</body>
</html>
                

これではタグの関係性や、開始タグ と 終了タグ の組み合わせが一目で分かりません。

良い例


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <section class="hero is-light">
            <div class="hero-body">
                <div class="container">
                    <h1 class="title">HTML基礎 その2</h1>
                    <div class="subtitle">コーディング規則</div>
                </div>
            </div>
        </section>
    </body>
</html>
                

良い例では、コードを読みやす書けていることが分かると思います。
悪い例より、良い例の方が圧倒的に見やすいですよね。

この様に、コードを見やすく書くためにはいくつかの規則(マナー)があります。

インデント

インデントとは、字下げの意味で、行の先頭に 半角スペース を 2 または 4 単位 で挿入することを言います。

インデントしない(悪い例)


<div>
<p>
こんにちは
</p>
</div>
                

インデントする(良い例)


<div>
    <p>
        こんにちは
    </p>
</div>
                

大文字は使用しない

大文字は固有名詞を除き使用を控え、小文字に統一しましょう。

大文字を使用する(悪い例)


<DIV>
    <P>こんにちは</P>
</DIV>
                

小文字を使用する(良い例)


<div>
    <p>こんにちは</p>
</div>
                

コメント文

必要があれば、コメント文 を入れて コードについて説明します。

HTML では <!––> で囲んだ範囲内の文字は コメント文 となり、プログラムを実行しません。


<div>
    <!-- お昼の挨拶を表示します -->
    <p>こんにちは</p>
</div>
                

改行を行う

一行の文字数が長くなったり、HTMLタグの親子関係を分かりやすくする必要がある場合は改行を心掛けましょう。

改行しない場合(悪い例)


<div><p>おはよう</p><p>こんにちは</p><p>こんばんは</p></div>
                

改行した場合(良い例)


<div>
    <p>おはよう</p>
    <p>こんにちは</p>
    <p>こんばんは</p>
</div>
                

このような規則は、プログラミング言語ごとに異なり、またプロジェクトごとにも異なります。

そのため、一概に正しいフォーマットはこれとは言えませんが、何れも「コードを読みやすくするための規則」であることに変わりはありません。

実際にコーディングしたプログラムを実行するのはコンピュータですが、コードは人間が作り、改善・改良していくもの、ということを意識しましょう。

読みやすいコードは、半年後の自分を助ける

rabico.dev

課題

考えてください。なぜコードを読みやすく書く必要があると思いますか?

説明してください。インデントとは何ですか?

前回の学習で使用した index.html または 新しく作成して、コメント文を試してください。