HTML コードの書き方に関する提案のまとめ

リソースファイルのプロトコルを省略する

画像、メディアファイル、スタイル、スクリプトの URL では、プロトコル部分 (http:、https:) を省略することをお勧めします。プロトコル部分を省略すると、リソースファイルはページ URL のプロトコルを継承します。これにより、混合コンテンツの問題を防止できるだけでなく、ページのサイズも削減できます。たとえば、JavaScript ファイルを参照するには、次のように記述します。

h4、h5、h6 タグがあまり使用されないのはなぜですか?

タイトル タグには h1 から h6 までが含まれます。h1、h2、h3 はよく使用されますが、h4、h5、h6 はほとんど使用されません。

セマンティックに健全で、あえて裸で実行する（レイアウトに CSS を使用しない）ウェブサイトでは、タイトルタグはセマンティックだけでなく、いくつかのスタイル機能も持っています。しかし、今日の CSS の普及により、実際には h1 と h6 を使用してもそれほど違いはなく、外観を調整することができます。

タイトルタグとしては、より強力な機能を持っています。タイトル要素は、ページ内の価値の高いキーワードを意味するため、キーワードの重み付けにはh1、h2、h3がよく使用されます。ただし、h4、h5、h6の重みは高くなく、strongやemよりも低いため、あまり使用されません。それらの権威レベルは次のようになると推定されます。

h1 > h2 > h3 > 強い > em > h4 > h5 > h6

thead、tbody、tfoot はいつ使用すればよいですか?

当初、thead は th などの表タイトル ユニットを配置するための表ヘッダーとして使用され、tbody は表コンテンツを配置するために使用され、tfoot は表の説明に使用されると考えていました。実際、私の理解は正確ではありません。これらのタグは実際には不要です。

一般的に、ブラウザは表示を開始する前にテーブル全体をダウンロードする必要があり、テーブルレイアウトの時代にはユーザーの読みやすさに影響を与えます。そのため、これらのタグを使用してテーブルを複数の部分に分割し、ダウンロードした部分を表示できます。また、長いテーブルを印刷するときに各ページにヘッダーとフッターが表示されるようにするためでもあります。

オプションタグを省略する

Dreamwave を使用したことがある方は、HTML ファイルを作成するときのデフォルトのコードが次のようになっていることを覚えているはずです。

タイトル、外部 CSS および JavaScript 参照を head 領域に配置し、ページに表示されるコンテンツを body に配置しますが、実際には、html、head、body はすべてオプションのタグです。

これらのオプション タグを削除すると、見た目は変になりますが、ページは正常に表示され、W3C チェックに合格できます。私はすでにブログでこれを行っています。ただし、注意すべき点が 1 つあります。ページを XHTML で記述する場合は、宣言として次のコードが必要なので、html タグを残しておいてください。

bラベルとiラベル

b タグと i タグの運命は u タグと同じで、W3C によって「非推奨タグ」に分類されていると考える人が多いようです。しかし、HTML5 仕様では、この 2 つのタグは依然として使用が推奨されています。私はずっとこのことを知っていて、友人と議論してきました。しかし、HTML5 でこれらがどのように定義されているのか、これまで一度も理解したことがありませんでした。

hrタグ

hr は線、つまりコンテンツを分割する水平線です。私はいつも hr はダサいものだと思っています。描かれた線は CSS で扱いにくく、役に立たないからです。実際、hr はセマンティクスにおける記事の分割線であり、記事のコンテキストを完全に分割し、関連性をなくします。

その機能は、多くのログブログ投稿の区切り線に似ていますが、hr はクローラーにとっても意味的に理解可能であるという点が異なります。

通常、タグをボタンとして使用するのはなぜでしょうか?

IE の下位バージョンではホバー効果が表示されないため、input type="button" ではないのは理解できます。しかし、なぜ span ではなく a タグなのでしょうか? href なしで a タグをボタンにするのは正しいのでしょうか? まだ考えていません。以前は反射的にそうしていました。

あとがき

Google の HTML/CSS コード スタイル ガイドは、短く簡潔なコード ライティング マニュアルで、提案も含まれています。非常に便利ですが、鵜呑みにしないでください。たとえば、インデントに 2 つのスペースを使用することを推奨する項目がありますが、これは多くのチームでは実現できないかもしれません。私たちのチームでは、まだタブを使用しています。

このマニュアルの HTML に関する提案の多くは HTML5 向けですが、ここでは XHTML スタイルではなく HTML スタイルを使用します。多くの箇所で、コードの可読性を低下させるためにコードが省略されています。トレードオフについてはご自身で判断してください。