プログラミング入門

HTMLの正しい書き順は？タグが先？コンテンツが先？

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

はじめに

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

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

というものがあります。

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

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

動画解説

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

コンテンツから先に書く方法

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


はじめてのHTML

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


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

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

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

タグから先に書く方法

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


<p></p>

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


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

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

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

左から右へ順番に書く方法

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


<p>はじめての

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


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

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

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

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

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

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

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

先にタグを書くのがスピード面でオススメ、しかし…

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

新HTML入門（Proglus）

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

HTMLのエラーを自力で解決してみよう！演習方式で方法を解説！

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

はじめに

HTMLのコーディングに慣れてくると、エラーが発生する回数も増えてきます。

エラー対処は「嫌だな」と思うかもしれませんが、実はプログラミング上達のための大変貴重な学習機会なのです。

「こういう書き方はダメなんだな」「じゃあ、こうだとどうなんだろう？」といった試行錯誤を通し知識の幅が広がります。

また、自力でエラーを取り除けるようになるのはエンジニアへの第一歩といっても過言ではありません。

この記事では、演習方式でHTMLのエラーを取り除いていくことで自力でエラー解決できるようになることを目指します。

演習問題の後に回答を解説するので、ご自身で演習の答えを考えてから確認してみてください。

動画解説

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

演習：HTMLのエラーを取り除く

回答：HTMLのエラーを取り除く

演習問題

表示させたいWebページのイメージは下記の通りです。

赤文字で見出しがあり、その下に段落がありますね。

エラーありHTMLコード

これを表示させるためのHTMLコード例が下記ですが、ここにはいくつかのエラーがあります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="utf-8">
  <title>はじめてのHTML
  <stile>
    h1 {
      color: red;
    }
  </stile>
</head>
<body>
  ＜ｈ１＞はじめての見出し アップデート</h1>
  <p>はじめての段落</p>
</body>
</html>

実際に、ブラウザで表示してみると下記のようになります。

タイトルが長いですし、本文は白紙で、イメージとは程遠いですね。もちろんこれはエラーが原因となっています。

一つ一つ、エラーを探してこれを解決していきましょう。

エディタの機能であたりをつけよう

HTMLはメモ帳などの簡単なアプリでも記述できますが、エラーを防いだりコーディング効率を上げるためにも便利なエディタを使うのがおすすめです。

本サイトで特におすすめしているのはMicrosoft社が開発したVisual Studio Codeで、使いやすい上に無料で使えるため人気があります。

特にこだわりがない場合はぜひインストールして使ってみてください。

また、Visual Studio Code（以下、VSCode）でエラーを発見しやすくする便利な設定方法については下記で解説しています。

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう

実際にVSCodeで上記の設定をしてから今回のエラーありHTMLコードを開くと下記のように表示されます。

VSCodeの拡張機能により、エラーが疑われる箇所に波線が引かれるので、あたりをつけやすくなりますね。

これを参考にエラーのある場所を考えてみてください。

ヒント：エラーは全部で4箇所あります。

回答：どこにエラーがあったのか

エラーの対処方法は思いつきましたか？それでは順に見ていきましょう。

まずはエディタのエラーチェック箇所を確認

前述の通りVSCodeのエラーチェック機能でマークがついているところが怪しいですね。

(1)metaタグ内の全角スペース

HTMLではタグ内で全角文字が使用できません。本来半角スペースにすべきところが全角スペースになってしまっていますね。

これを半角スペースに修正しましょう。

(2)title終了タグ忘れ

基本的に波線マークがついている箇所そのものにエラーがあるわけでなく、その周辺や要素内にエラーがあることが多いです。

今回もheadの終了タグに波線がついていますがこれ自体には問題なさそうですね。

波線の上にカーソルを置くとエラー詳細を見ることができます。

「missing: [ </title> ]」という文言がありますね。title終了タグがないという意味です。

確かに書き忘れているようなので、追加しましょう。

(3)h1開始タグが全角文字

h1終了タグにも波線がありますが、</h1>自体にはエラーがなさそうです。

カーソルを置いてみましょう。

「no start tag：[ </h1> ]」という文言がありますね。これは</h1>に対しての開始タグがありませんよ、という意味です。

開始タグはあるはず…とよく見ると、タグの色が周りと違っていて不自然ですね。それに何だか文字が大きいような…

お気づきでしょうか。h1開始タグが全角で書かれてしまっていますね。

タグは半角で書くのがルールなので、半角に修正しましょう。

ブラウザでの表示チェックもしてみよう

ここまででエディタのエラーチェック箇所はなくなりました。

他にもエラーがあるかもしれないので、ブラウザで表示させてみましょう。

白紙ではなくなりましたが、最初の仕上がりイメージとはまだ異なりますね。

スタイルを指定した部分のコードがそのまま表示されているのと、見出しの赤文字が反映されていません。

このことから、スタイル指定部分のあたりでエラーがあると想定されます。

(4)styleタグのスペルミス

コードに戻って見てみましょう。

「<style>〜</style>」となっていなければならない箇所が、スペルミスで「<stile>〜</stile>」になってしまっていますね。

これによりスタイル指定がうまくいかず、先ほどのような表示になってしまったわけです。

このスペルミスも修正しましょう。

ブラウザで表示すると、イメージ通りの結果になっているので、エラーは全て取れたと考えられます。

構文チェックツールで最終確認

ブラウザでの表示結果に問題がなくとも、実際にはコードにエラーが残っていることがあります。

ブラウザによっては高機能なものがあり、多少のエラーならば自動的に独自解釈して表示できることがあるためです。

しかし、一部のブラウザでは表示できて、他のブラウザで表示できないというのでは根本的なエラー解決になりません。

そこで、構文チェックツールを使って最終確認をしてみましょう。

構文チェックには、HTMLの規格策定団体であるW3Cが公式に提供している下記のツールがおすすめです。

W3C Markup Validation Service

「Validate by Direct Input」のタブを開き、空欄にコードをコピー＆ペーストして「Check」ボタンを押します。

結果は下記のようになります。

もしミスがあればその詳細が表示されますが、ミスがない場合は上記のように緑色の帯が出て、エラーが見つからなかった旨が表示されます。

これでめでたく全てのエラーを解決できました！

まとめ

HTMLのエラーを自力で解決する方法を演習形式で解説しました。

実際にはここで取り上げたエラーだけでなく、様々なものが出るでしょう。

しかし、紹介した手順と同じ方法で確認していくことで、解決の糸口が掴めるはずです。

エラーが出ても怯まずに、理解を深めるチャンスと捉えてぜひ頑張ってください。

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

新HTML入門（Proglus）

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

HTMLのエラー原因がわからない！W3Cの構文チェックツールを使用してみよう

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

はじめに

HTML初心者だけど、なんとかエラーが起きても自分で対処できるようになってきた。

でもこのエラーだけはどうしても対処方法がわからない！

そんなお悩みはありませんか？そもそもどこにエラーがあるのかもわからなかったり、とっても厄介ですよね。

四六時中考えていたらピン！と分かったりして、それはそれで気持ちのいいものですが、エラー対処ばかりに時間を書けてもいられません。

この記事では、HTMLでエラーが起きた時におすすめの奥の手として、構文チェックツールを紹介します。

基本的なエラーの対処方法

HTML文書は、何かエラーがあってもブラウザがなんとか表示しようと頑張るので、ブラウザによってはエラーがあったとしても想定通りの表示になることがあります。

また、HTMLは階層構造になっているので、上記のように目に見えない不具合があってもそのままにしていると、それ以降のコードにも悪影響が出やすいです。

そのため、エラーがひとたび起きてしまうとそもそもの原因となっている箇所がわかりにくいことが多々あります。

このように、エラーが起きてからではややこしくなるので、書いた瞬間から違和感に気付けるように、エディターの拡張機能でエラーチェックをしながらコーディングするのが基本的な対処方法です。

本サイトではエディターはVisual Studio Codeをおすすめしていますが、この標準機能や拡張機能を用いてなるべくエラーを発生させないようにするための方法は下記でも説明しています。

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう

それでもダメなら構文チェックツール

先ほどの対策をしたうでコーディングすればほとんどの初歩的なミスは防げますが、複雑なコードになればなるほどそれだけでは防げないエラーが出てきます。

ここからはそれに対処するための方法を見ていきましょう。

例えば、簡単ですが下記のようなコードを書いていたとします。

<!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>

このコードにエラーがあるかどうかチェックするには、下記のサイトにある構文チェックツールを使用します。

Markup Validation Service

W3CはHTMLの規格を管理している団体で、こちらによる公式ツールとなっていますので信頼性は十分ですね。

英語のみ対応となっていますが、不安な方はGoogle翻訳を活用すれば概ね理解可能なはずです。

こちらの「Validate by Diret Input」というタブをクリックして先ほどのコードをコピー＆ペーストし、Checkボタンを押します。

結果は下記のようになります。

下の方に緑の帯と共に「Document checking completed. No errors or warnings to show.」と出ます。

これは「チェックが完了し、エラーは見つからなかった」という意味なので、このコードでは特に問題がないということがわかりました。

では、エラーがある時はどうなるのでしょうか。

試しにコードを下記のようにしてh1要素の終了タグのスラッシュを取り除いてもう一度チェックツールに渡してみましょう。

<!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>

今度は緑色の帯が出ず、いくつかのエラー候補が出ています。

怪しい箇所が黄色でマークされるので、そこを中心に見ていけばすぐにエラーに気づくことができますね。

このように、構文チェックを使用すれば文法的な誤りがあるかどうか、ある場合はその箇所をすぐに見つけることができます。

まとめ

HTMLのエラー原因を探るための構文チェックツールとその使い方を紹介しました。

ブラウザでの表示が想定通りではない時、書いたコードに文法的な問題があるかどうかを切り分けられるだけでも便利ですね。

ぜひ活用してコーディングの効率化にお役立てください。

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

新HTML入門（Proglus）

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する