プログラミングを勉強中のみなさん、こんにちは！
今回は、「コードチェックでよく出るエラー」を紹介します。
自分で書いたコード（HTML）をコードチェックツールにかけると、意外とエラーが散見されます。
見た目は実装できていても、コードの書き方のルールに反している可能性があります。
レイアウト崩れや表示に影響が出たり、要素の誤った使い方などを見過ごす原因となります。
コードエラーとしっかり向き合い修正することで、HTMLの理解がいっそう深まります。
今回は、私自身が感じた、
「勉強になった」
「こんな初歩的なミスを・・・」
「なるほど」
などの発見や凡ミスなど紹介します。
それでは順番に見ていきましょう。
エラー紹介
タイプミス
どのコードエディターも補完機能がついておりますので、それほど心配いりませんが、
やはり、貼付けミスがあったり、入力ミスがたまに出てきます。
<p>こんにちは</p>>(最後の「>」が余計です)
とか、
<a></a>こんにちは</a>(一つ目の「</a>」が余計です)
などの削除漏れがたまにありますので気を付けましょう。
ファイルパス
私が勉強始めたての頃、VSCodeを使用しているときに発見したものです。
imgタグに、画像のファイルパスをコピペしたときです。
src="img¥xxx.png"
となっている場合があります。
本来はこの¥が、「/」（スラッシュ）でなくてはなりません。
原因はわかりませんが、もし「¥」になっていたら、しっかり「/」に直しましょう。
-
【CSS】背景画像が表示されない・・・初心者あるあるの原因5選
続きを見る
imgタグのalt属性
imgタグで画像を表示させて、それで満足していませんか？
alt（オルト）属性の記述を忘れてませんか？
alt属性は、画像の代わりとなるテキスト情報です。
それを記述すると、検索エンジンにコンテンツ内容をより正確に伝えられます。
SEO対策にもなりますので、画像を見なくても、その画像が何を表しているのかわかるように具体的に記述しましょう。
aタグの位置
リンクを貼るときに使うaタグ。
クリックできる範囲を、要素いっぱいに広げたいからといって、
<a><li>ここをクリック</li></a>
というコードを書いてませんか？
HTMLのルールとして、
<li>や<div>の外に<a>を記述することはできません。
しっかりaタグを内側に配置しましょう。
<li><a>ここをクリック</a></li>
これで解決
しかしこれでは文字のところでしかクリックできません。
<li>要素いっぱいにクリック幅を広げたいときは、
aタグに対して、display:block;を設定しましょう。
h1～h6は順番どおりに
見出しのhタグは、１から６まであり、文字の大きさが違います。
１が一番大きくて、２以降はだんだんと文字が小さくなります。
しかし、大事なのは、
文字の大きさの調整のために使い分けてはいけない
ということです。
あくまでh1が大見出しで、
それ以降は、h2、h3・・・と、順番に使用しなくてはなりません。
ですのでh1を使用したあとに、h3を使用すると、HTMLのルール上推奨されておりませんので、コードチェックのエラーがでます。
hタグは見出しの使い方を理解して適切に使いましょう。
タブインデックス
タブインデックスとは、
Webページにおいて、タブキーを押すことで、
リンクやテキストボックスなどがフォーカス(選択)が移り変わる順番のことです。
タブキーを押すたびにフォーカスが次へ移ります。
重度なエラーではありませんが、
アクセス性向上のために、
<INPUT>
<TEXTAREA>
<BUTTON>
<SELECT>
などには、
TABINDEX属性を付けて入力順序を指定するように
WAI（Web Accessibility Initiative）で薦められています。
ACCESSKEY属性の設定
アクセス性向上のために、
<A>、<LABEL>、<LEGEND>、<AREA>
などには、ACCESSKEY属性を使って、
キーボードショートカットを用意しておくことがWAIで薦められています。
chrome=1
アニメーションのコードがよくブログなどで紹介されています。
HTMLの参考コードをみると、
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
こんなタグが記載されています。
何も考えず、「とりあえずコピペしよ」、なんてやってると、エラーが出ます。
最後の「chrome=1」、
これは、Google Chrome Frame 用の記載です。
Google Chrome Frame は、既にサポートされていないので機能しません。
したがって、「chrome=1」の記載は既に不要です。
削除しましょう。
まとめ
以上紹介したのはほんの一例ですが、いかがでしたでしょうか。
きれいにコーディングできているように見えても、コードチェックをかけると、意外とエラーが出ます。
そして、そのエラーの意味を解釈することで、知識も増えますし、理解も深まります。
もしかしたら初学者の人は、何十個と出てくる可能性がありますが、
がっかりせず、一つ一つ理解していってください。
エラーの数だけ、知識が深まります。
頑張っていきましょう。
詳細はこちらもどうぞ。HTML ルール