プログラミング

【HTML】コードチェックでよく出るエラーを紹介 修正してHTMLの理解を深めよう

スポンサーリンク

mistake
プログラミングを勉強中のみなさん、こんにちは!

今回は、「コードチェックでよく出るエラー」を紹介します。

自分で書いたコード(HTML)をコードチェックツールにかけると、
意外とエラーが散見されます。
見た目は実装できていても、コードの書き方のルールに反している可能性があります。

レイアウト崩れや表示に影響が出たり、
要素の誤った使い方などを見過ごす原因となります。

コードエラーとしっかり向き合い修正することで、
HTMLの理解がいっそう深まります。

今回は、私自身が感じた、
「勉強になった」
「こんな初歩的なミスを・・・」
「なるほど」
などの発見や凡ミスなど紹介します。

それでは順番に見ていきましょう。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

エラー紹介

タイプミス

どのコードエディターも補完機能がついておりますので、それほど心配いりませんが、
やはり、貼付けミスがあったり、入力ミスがたまに出てきます。

<p>こんにちは</p>>(最後の「>」が余計です)

とか、

<a></a>こんにちは</a>(一つ目の「</a>」が余計です)
などの削除漏れがたまにありますので気を付けましょう。

ファイルパス

私が勉強始めたての頃、VSCodeを使用しているときに発見したものです。

imgタグに、画像のファイルパスをコピペしたときです。

src="img¥xxx.png"
となっている場合があります。

本来はこの¥が、「/」(スラッシュ)でなくてはなりません。
原因はわかりませんが、もし「¥」になっていたら、しっかり「/」に直しましょう。

背景画像
【CSS】背景画像が映らない。を解決! ポイントは「相対パスをコピー」です。

続きを見る

imgタグのalt属性

imgタグで画像を表示させて、それで満足していませんか?
alt(オルト)属性の記述を忘れてませんか?

alt属性は、画像の代わりとなるテキスト情報です。
それを記述すると、検索エンジンにコンテンツ内容をより正確に伝えられます。

ですので、画像を見なくても、その画像が何なのかわかるように具体的に記述しましょう。

aタグの位置

リンクを貼るときに使うaタグ。

クリックできる範囲を、要素いっぱいに広げたいからといって、

<a><li>ここをクリック</li></a>

というコードを書いてませんか?

 

HTMLのルールとして、
<li><div>の外に<a>を記述することはできません。
しっかりaタグを内側に配置しましょう。

<li><a>ここをクリック</a></li>

これで解決

しかしこれでは文字のところでしかクリックできません。

<li>要素いっぱいにクリック幅を広げたいときは、
aタグに対して、display:block;を設定しましょう。

click

h1~h6は順番どおりに

見出しのhタグは、1から6まであり、文字の大きさが違います。
1が一番大きくて、2以降はだんだんと文字が小さくなります。

しかし、大事なのは、
文字の大きさの調整のために使い分けてはいけない
ということです。

あくまでh1が大見出しで、
それ以降は、h2、h3・・・と、順番に使用しなくてはなりません。

ですのでh1を使用したあとに、h3を使用すると、HTMLのルール上推奨されておりませんので、コードチェックのエラーがでます。
hタグは見出しの使い方を理解して適切に使いましょう。

タブインデックス

タブインデックスとは、
Webページにおいて、タブキーを押すことで、
リンクやテキストボックスなどがフォーカス(選択)が移り変わる順番のことです。
タブキーを押すたびにフォーカスが次へ移ります。

重度なエラーではありませんが、
アクセス性向上のために、
<INPUT>
<TEXTAREA>
<BUTTON>
<SELECT>
などには、
TABINDEX属性を付けて入力順序を指定するように
WAI(Web Accessibility Initiative)で薦められています。

tab

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 ルール

スポンサーリンク

-プログラミング
-, , , , , , , , , , , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5