正しいHTMLを書く方法

イワダテサトシ（ダッチ）

2019年10月15日 14:57

webを学び始めた人からよくいただく質問で「HTMLの使い方が合ってますか？」と聞かれることが多いです。

まずはじめに書きますが、正しいHTMLかどうかを全て完璧に「チェック」して「修正できる」ツールは2019年10月現在ありません！！

なぜなら「正しいHTML」って定義がとても難しいので、結局は人間が判断しないといけない分野になり、AIなどではまだ判別が難しいという点があるのと、そもそもの正しいルールが少しフワッとしている点があるから、と個人的に思っています。

ところで「正しいHTML」ってなんでしょう？
まずはHTMLとはなんぞや？というところから考えてみましょう。

HTMLって？

HTMLとは、「ハイパー・テキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略です。

要はただのテキストのかたまりに、意味や役割を付与しましょう、という記述形式のことです。

なので、「正しいHTML」とは
テキストに正しい意味や役割が割り振られているか
ということになります。

ここは本当に定義が難しい部分になります。
一概に「合っている」「間違えている」と判断するのが難しいためです。

最近すごく良い記事があったのでご紹介。

この記事でも改めて解説されているように、同じタグ（記事ではh1）でもHTMLを書く人によっては別の使い方がされていました。
そんな微妙な使い方を指摘し、「Googleも言ってるし、これが一番よくないですか？」と定義化を投げかけている記事です。

つまり、「これが正しいHTML」というのは完璧には決まっていなくて、
その時代ごとに求められている情報に合わせた記述
をすることが正解、となるかと思います。
（特にGoogleは時代ごとのニーズに合わせてルールをどんどん変化させていくので、Googleが今どうなっているか、が一つの正解例かもしれません）

正しくないHTML

とはいえ、「正しくないHTML」は確実に存在します。

ですので、間違えたHTMLになっていないかどうかをチェックすることが「正しいHTML」に近づく第一歩になるかと思います。

以下に初学者の方がよくやるHTMLのミスを並べてみましたのでご参考まで。

例1）閉じタグ忘れ

<!-- 例1 -->
<section>
    <p>Pタグの文章を書くのに夢中で、親のタグを閉じ忘れる</p>

親要素を作って、その中身の要素を色々コーディングしていくうちに最後に閉じタグを入れ忘れてしまうパターン。

解決策
・HTMLコーディングに特化したエディタソフト（BracketsやVScode、 Dreamweaverなど）を使って、自動閉じタグ機能を使おう
・Emmet （自動タグ展開ツール）を使おう

例2）コピペ範囲ミス

<!-- 例2 -->
<div>
    <h2>見出しパーツ</h2>
    <img src="キャッチ画像.jpg" />
    <p>パーツをコピペした時にコピー範囲を間違えて閉じタグなくなる</p>

コピペした時にコピー範囲を間違えて、閉じタグが一部無くなってしまったパターン。

解決策
・開始タグと閉じタグをペアで選択してもらえるツールを使う
・コーディング特化したソフトでエラーが出るようにする（タグの色が変わったりエラーメッセージが出ます）

例3）入れ子クロス

<!-- 例3 -->
<section>
    <h2>親の見出しパーツ</h2>
    <img src="キャッチ画像.jpg" />
    <div>
        <h3>子の見出しパーツ</h3>
        <p>親と子のタグがの入れ子関係がグチャグチャ</p>
</section>
    </div>

入れ子（ネスト）が複雑になってくるとよく見かけます。
親要素と子要素がクロスしていてよくわからない状態になっています。

解決策
・インデントを常にキレイに入れる（目視でのミスが減ります）
・自動インデント機能を使う（コーディング特化ソフトだとプラグイン（追加機能）で Beautify など追加すると便利です）

例4）HTMLルール違反

<!-- 例4 -->
<ul>
    <li>ulタグの直下はliタグしかダメ<li>
    <li>ulタグの直下はliタグしかダメ<li>
    <div>これはアウト</div>
</ul>

HTMLには「親要素や子要素には特定のタグしかダメ」というルールがあるタグがいくつかあります。
間違えてもweb上の表示は崩れたりしないためミスに気付きづらいですが、文章の構造上おかしくなってしまうため気をつけましょう。

解決策
・これを見るとルールがわかります（更新日や適用ルールを確認ください）
　⇒ HTML5 子要素・親要素対応

本当に正しいHTML

ここまできて、「じゃあ正しいHTMLって調べようがないのか！」と思われるかもしれません。

ですので基準とすべき資料になる、困ったらまずはこのルールを見よう、このツールを使おう、というものをいくつか紹介します。

自動エラー抽出、整形つきバリデーションツール

コードを貼り付けると、閉じもれのタグなどあれば色が変わって教えてくれるバリデーションツールです。

また、インデントが崩れていたり、HTMLルールが間違えているタグ（さっきのulにli以外、など）があれば、「Clean」ボタンを押すとキレイに整形してくれて、間違えたルール箇所は（無理くりですが...）直して正してくれます。

日本語対応もバッチリなリファレンスサイト

「リファレンス」とは、辞典のような説明書のようなもの、です。

このサイトはMozillaというFirefoxを開発している会社が作成しているサイトです。

後述しますが、今後のwebルールのスタンダードになる仕様を決めている団体とも関わりが深いところが作成しているリファレンスですので、しっかりと詳しく書かれており、かつ動かせるサンプルなどもあるのでとても役に立ちます。

ブックマークや検索窓からカスタム検索できるようにしておいて、困ったらすぐに利用できるようにしたいですね。

W3C のチェックツール

W3CとはHTMLやCSSなどのルールを決めて（標準化）きた団体です。
なので、ここがルール定義のスタートになるので、まずはここのルールから知ることが第一でした。

「でした」と結んでいますが、2019年に大きな動きがあったのです。

W3Cの対抗勢力として「WHATWG」という組織が存在していたのですが、そこが策定していた仕様を次回バージョンとして正式に採用することになったとのことです。

なので、今後はどんなルールを元にしてチェックをしていくかはまた変わっていく可能性が高いです。
しっかりと情報をチェックして拾っていくアンテナを立てておくことが、正しいHTMLを書くための唯一の方法なのかもしれないですね。

サポートいただいた分は新しいにゃんこを迎える資金にさせていただきます