書く順番 | プログラミング入門ナビ by Proglus（プログラス）

はじめに

HTMLを学習している受講生の皆さんからよくいただく質問に

「HTMLの正しい書き順はありますか？」

というものがあります。

結論からいいますと、書き順に特に正誤はなく、正しい文法になっていればどのような書き方でも構いません。

この記事では、どのような書き順があるのかと、しいていうならばのオススメをご紹介します。

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

https://www.youtube.com/watch?v=avVANITDInc&feature=youtu.be

まずはコンテンツから先に書く方法です。


はじめてのHTML

と、書きたい内容を書いた後でこれを段落として表示するために前後にp要素の開始タグ・終了タグをつけます。


<p>はじめてのHTML</p>

HTMLはマークアップ言語と呼ばれ、コンテンツそのものに意味を持たせるためのタグをつけてブラウザに解釈させるための言語です。

そのため、このように先にコンテンツがあり後からタグをつける書き方はある意味で教科書的な書き方といえます。

次に、タグから先に書く方法です。


<p></p>

と、先に段落を示すp要素の開始タグ・終了タグのセットを書いてから、その中にコンテンツを書きます。


<p>はじめてのHTML</p>

Visual Studio Codeなどをはじめとする便利なエディタでは、「p」キーの後タブキーで「」のセットが自動で入力されたり、「」だけ書くとその後に「」が入力補完される機能があります。

そのため、この書き方の方が若干打つスピードは速いです。

動画では触れていませんが、コードを左から右へ順番に書いていく方法もありますね。


<p>はじめての

という風にp要素の開始タグから始めてコンテンツを書き、最後に終了タグを書くものです。


<p>はじめてのHTML</p>

書籍やテキスト上の見本コードを見ながら、同じように書いていく場合などにこの書き方をしている方がいらっしゃるかもしれませんね。

この方法も間違ってはいないですし、もちろん同じ表示結果とはなるのですが、あまりオススメできません。

理由としては、HTMLのコーディングミスで比較的多いのがタグの書き忘れや書き間違いだからです。

この書き方をすると、開始タグを書いてから終了タグを書くまでの間にコンテンツを書く必要がありますね。

わずかな時間ではありますが、コンテンツを書いている間に終了タグを書かなければならないということを忘れて次の行に行ってしまったり、と書くべきなのに見出しを書いていると勘違いして</h1>と書き間違いをしてしまうことが増えます。

先に紹介した2つの方法のように、開始タグ・終了タグの記述をなるべくまとめて行う方がこのようなミスを犯すリスクを減らせるでしょう。

ここまで3通りの書き方を紹介しました。他にもあるかもしれないですね。

HTMLプログラミングの究極目的はブラウザに想定通りの表示をさせることです。

そのため、冒頭でも記した通りどれが正解というのはなく、文法が正しく書けてさえいれば問題ありません。

しいていうならば「先にタグを書いてから中にコンテンツを書く」方法がスピードの面でオススメです。

コンテンツが先だと開始位置・終了位置にカーソルを移動させて書かなければならないため、長いコンテンツだと特に余計な時間がかかりますが、タグが先だとこの手間が小さいのと、エディタの補完機能により終了タグをタイプする時間も省けます。

しかし、エンジニアはタイピングしている時間よりも、調査や考えることに時間を使う割合が多いです。

そのためプログラミングの知識を身につける方が圧倒的に重要で、コーディングスピードの改善は後からで問題ありません。

最初のうちは自分がしっくりくる書き方に慣れていく方が大切です。

HTMLの様々な書き方を紹介しました。どれが正解、というのはなく、自分が書きやすい方法で書いていけば問題ありません。

余談ですが、ウェブ開発の仕事は正解が1つではないことが多いので、あまり正解・不正解に拘らず、自分の進めやすい方法を見つけていく姿勢が重要です。

自分のこだわりポイントを探せるのは楽しいことでもあるので、ぜひ迷いながら進めていきましょう！

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

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

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