「brタグの多用」や「alt属性の誤解」…あなたのHTMLは本当に正しいですか？
この記事では、Webサイトの品質を劇的に向上させるための3つの基本ルールを、初心者にも分かりやすく解説します。
最初に確認：HTMLは「見た目」じゃなく「意味」が大事！
Web制作の世界に足を踏み入れたばかりの頃、HTMLとCSSの書き方にはある程度自信があったとしても、現場で
「それ、文法的には間違ってるよ」
と先輩に指摘されることは珍しくありません。
見た目が整っていても、コードの意味や構造が正しくなければ、思わぬトラブルにつながることがあるのです。
ルール1：HTMLの文字コードは「utf-8」を使う
HTMLには 「HTML Living Standard」 という最新仕様があり、Webページはこのルールに沿って構築することが推奨されています。
その中で、HTML文書の文字コードは「utf-8」である必要があります。
「Shift-JISじゃダメなの？」と思う方もいるかもしれません。
確かに、以前の日本語サイトではよく使われていましたが、現在の標準はUTF-8。
多言語対応や絵文字の使用、国際的な互換性など、現代のWeb制作に欠かせない基盤となっているのです。
先輩A現場エピソード：納品直前に「文字化けしてる！」と発覚。慌ててUTF-8に直してギリギリセーフ…というケースは意外とよくあります。
ルール2：inputタグは必ずformタグの中に
フォーム関連の要素は、formタグの内側に配置するのが基本です。
たとえば、以下のようなコードを書いたことはありませんか？
<body>
<input type=”text”>
</body>
一見、見た目は問題ないように見えますが、formタグがないと、「どこに送信するのか」が定義されていない状態になってしまいます。
注意点：ブラウザによっては動作しますが、支援技術や自動テストツールではエラー扱いになることもあります。
「送信ボタン押しても何も起きない！」といったクライアントからの問い合わせ原因にもなります。
先輩A現場エピソード：
inputがバラバラに配置されていて、formタグで囲んでおらず、データが送信されないというトラブルがありました。
ルール3：alt属性は“すべてに”必要ではない
初心者がよく陥るのが、alt属性の「つけすぎ」や「間違った使い方」。
「全部のタグにaltつければいいんでしょ？」
→ それは誤解です！
alt属性の適切な使用例
| 要素 | alt属性 | 解説 |
| <img> | 必須 | 画像の内容を伝えるため |
| <area> | 推奨 | イメージマップのリンクには必要 |
| <input type=”image”> | 必須 | ボタンの意味を補足 |
| <source> | 不要 | 表示用でなくメディア切替用 |
先輩A現場エピソード：
新人コーダーがタグにaltを付けてしまい、HTMLのバリデーションでエラーになりました。
ポイントは、「見えない人にも伝わるか？」を常に意識することです。
まとめ：HTMLは「意味」で書こう
最後にもう一度、基本ルールをおさらいしましょう。
HTMLの3つの基本ルール
- 文書の文字コードは UTF-8 を使う
- 入力欄（<input>）は 必ずformタグの中に配置する
- alt属性は 正しい要素にのみ、正しくつける
これらのルールは「基本中の基本」ですが、実際の現場では頻繁にミスが起きているところです。
「見た目がそれっぽく表示されたからOK」ではなく、
「意味として正しいか？」を意識してHTMLを記述することが、プロとしての第一歩になります。
