HTML のコーディングを正しく行うための考え方
他のプログラミング言語はそれなりに書けても、HTML になると途端に汚く、誤ったコードを書く人は多い。
HTML はプログラミング言語ではなくマークアップ言語である、ということを忘れているのかもしれない。すなわち、何らかの「処理」を記述するのではなく、文章の構造や意味を「宣言」をしていく言語だ、ということだ。
以前、「プログラミングもスラッシュリーディング重要」といった主旨の記事を書いたことがあるが、HTML のタグ付けは、この「スラッシュリーディング」が一番直接的に影響すると思う。すなわち、この文章は何を示していて、その中のこの文言はどういう意味で、という構造の区別ができていないといけないのだ。「その文章は見出し？本文？」という当たり前の構造区別も、できない人はできないのだ。
スラッシュリーディングは、その真似事であっても、英文法の学習の時にやっていたと思う。下線を引いたり、that 節をカッコで囲んだり。コレこそが HTML のタグ付けなのだ。
CSS クラス名で「見栄え」に関する名前を付けず、役割を示す名前にしろ、とよく言うが、コレもその「文章≒要素≒節」がどういう意味合い・役割で存在しているか、という区別ができていないと、一生まともな名前を付けることはできないのだ。
そしてそうやって構造を示していくということは、インデント = ネストの関係が生まれることになるし、そうすれば閉じタグの順序がおかしくなったりすることはありえないのだ。
HTML の界隈でよく云われる「セマンティクス」とは、まさにこの意味付けのことで、主にブラウザという機械のために、文脈や意味が伝わるようにマークアップしようね、ということだ。だから連続した br 要素ではなく p 要素を適切に使おうとか、div ばっかりじゃなくて nav や header 要素をちゃんと使おう、という話になる。
あとは、「適切に文章を表現する」ために、要素や属性について豊富な知識が必要だ。strong 要素を知らないせいでずっと b 要素を使い続けているとか、テキストボックスを作る時に type="text" を書かないで何となくコーディングしているとか、そういうことは止めたい。
「タグ」と「要素」という言葉の違いもよく考えよう。「p タグ」などと表現しているレ中は全くもって認識が間違っているので勉強し直してこい。
HTML はマークアップする対象の文章が存在しないといけない。まず文章を書いている人間が、その文章の意味を正確に理解しておかないと、適切な HTML 要素・属性を使えない。
セマンティクス、すなわち文書の意味を機械が読み取れるよう適切にマークアップしていけば、自然と文章には階層構造が生まれ、それを表現するためにインデントが綺麗に打たれるはずなのだ。
その上で、Web ページ、Web アプリケーションとしての使い勝手、デザインを考慮して、必要なマークアップを増やしていくのだ。