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

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

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

コアラ
h2? p? なんか増えたよ。
ひつじのジョージ
h2タグやpタグはh1タグと同じHTMLタグだよ。

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

よくあるミス
  • 開始タグと終了タグが一致していない
  • HTMLタグ内に全角の文字が入っている

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

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

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

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

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

<!-- <p>要素で囲んでください -->
<p>オンラインのプログラミング学習サービスです</p>
コアラ
バグが出ちゃったけどなんとかできたよ
ひつじのジョージ
さすがだね!
前回の記事でHTMLでよくあるミスを紹介しているからバグが出たら参考にしてみて!

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

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

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

よくあるミス
  • 開始タグと終了タグが一致していない
  • HTMLタグ内に全角の文字が入っている
コアラ
これらのミス、全部しました。
ひつじのジョージ
大丈夫だよ。プラグラマーになる人はみんな通る道だよ。

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

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

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

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

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

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

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

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

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

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

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

h1やh2のタグって何?

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

HTMLタグの意味

h1やh2タグ
→見出し

pタグ
→段落

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

コアラ
HTMLのタグすべてに意味があるの?
ひつじのジョージ
HTMLのタグの種類はたくさんあるけれどすべてに意味があるよ。
今は覚える必要はないよ。

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

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

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

よくあるミス
  • 開始タグと終了タグが一致していない
  • HTMLタグ内に全角の文字が入っている

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

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

おすすめの記事