プロゲートの「見出しと段落」の解説とよくあるミス

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

このレッスンではタグが増えたことによるタイプミスが主なミスの原因となります。

このレッスンができない方はこれらのミスをしていないか、もう一度確認してみましょう。

「見出しと段落」の正解は？

「見出しと段落」の正解のHTMLコードは以下のとおりです。

<!-- <h1>要素で囲んでください -->
<h1>プログラミングの世界へようこそ</h1>

<!-- <h2>要素で囲んでください -->
<h2>Progateとは</h2>

<!-- <p>要素で囲んでください -->
<p>オンラインのプログラミング学習サービスです</p>

「見出しと段落」でよくあるミス

このレッスンではタグが増えたことによるタイプミスが主なミスの原因となります。

「見出しと段落」でよくあるミスを具体的にご紹介します。

よくあるミス1：開始タグと終了タグが一致していない

よくあるミスの１つ目は、開始タグと終了タグが一致していないミスです。

次のコードでは開始タグがh1タグ、終了タグがh2タグとなっており開始タグと終了タグが一致していません。

<!-- <h1>要素で囲んでください -->
<h1>プログラミングの世界へようこそ</h2>

HTMLの構文では開始タグと終了タグを一致させる必要があります。
詳しくは以下の記事を参照してください。

プロゲートの「HTMLに触れてみよう！」の解説とよくあるミス

2021.10.28

この記事ではプロゲートの「HTMLに触れてみよう！」について解説とよくあるミスをご紹介します。HTMLでよくあるミスを知っていればバグが出た時に役に立ちます...

よくあるミス2：HTMLタグ内に全角の文字が入っている

よくあるミスの２つ目は全角の文字が入っていることです。

次のコードでは終了タグの「1」が全角の「１」となっています。

<!-- <h1>要素で囲んでください -->
<h1>プログラミングの世界へようこそ</h１>

HTMLのタグを含めすべてのプログラミングコードは半角英数字で記述する必要があります。

全角と半角の文字は見分けがつきにくいので、全角文字で記述しないように注意しましょう。

h1やh2のタグって何？

このレッスンで使用したh1タグとh2タグは見出しを意味しています。
また、pタグは段落を意味しています。

HTMLを使ってブログやサイトを作るとき、HTMLタグの意味にあったタグの使い方をしなければいけません。

他のHTMLタグの意味を知りたい方はこちらを参照してください。

まとめ：ミスの原因はタイプミスが主な原因

「見出しと段落」のレッスンでは記述するHTMLタグが増えたことによるタイプミスが主なミスの原因となります。

これらのミスはプログラマーを目指す人は必ず通る道です。

よくあるミスを知っていれば、何時間も修正に費やす必要がありません。