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

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 ファイルを作成するときのデフォルトのコードが次のようになっていることを覚えているはずです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>   
  2.   <ヘッド>   
  3.   </ヘッド>   
  4.     
  5.   <本文>   
  6.   </本文>   
  7. </html>   

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. < html   xmlns = "http://www.w3.org/1999/xhtml" >   

bラベルとiラベル

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


hrタグ

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

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

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

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

あとがき

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

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

<<:  Web デザインでフラッシュ オーバーレイ ポップアップ レイヤーの z-index プロパティを設定しても機能しない

>>:  React スキャフォールディングの構築方法を学ぶ

推薦する

SQL と MySQL のステートメント実行順序の分析

今日、問題が発生しました: MySQL の insert into、update、delete ステ...

Linux で yum と入力した後に -bash: /usr/bin/yum: No such file or directory という問題を解決する方法

Linuxでyumを入力すると、プロンプトが表示されます: -bash: /usr/bin/yum:...

Windows システムでの MySQL 8.0.21 インストール チュートリアル (図とテキスト)

インストールの提案: インストールには .exe を使用せず、圧縮パッケージを使用してください。これ...

MySQLのユーザー権限の確認と管理方法の詳細な説明

この記事では、例を使用して、MySQL ユーザー権限を確認および管理する方法を説明します。ご参考まで...

CocosCreatorでスワイプした位置にテクスチャを表示する方法

目次1. プロジェクト要件2. 文書の内容3. プロジェクト例4. プロジェクトコード1. プロジェ...

画像ブラインド表示の効果を実現するための純粋な CSS の例

まず、完成した効果をお見せしましょう 主なアイデア: 実際、このブラインドは一種の手品を使用していま...

MySQL インデックス プッシュダウンを 5 分で理解する

目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...

MySQL遅延レプリケーションライブラリ方式の詳細な説明

簡単に言えば、遅延レプリケーションとは、スレーブ データベースがマスター データベースより 1 時間...

Dockerイメージをパッケージ化し、リモートサーバーにプッシュしてk8sにデプロイする方法

目次1. Dockerファイル2. pom 構成3. イメージプッシュ4. k8s デプロイメント前...

Mysqlの同時パラメータ調整の詳細な説明

目次クエリキャッシュの最適化概要クエリプロセスクエリキャッシュ構成クエリキャッシュの無効化メモリ管理...

リクエスト数を制限するために Ajax 同時リクエストを実装するために js を使用するサンプル コード

問題の説明: 非同期リクエストの数が不確定な場合、数百の http リクエストが瞬時に発生したときに...

CSS3で実装されたダイナミックな星空の背景

結果:実装コードhtml <link href='https://fonts.goog...

はじめに: HTML の基本的なタグと属性の簡単な紹介

HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...

HTML入力で値が変更されたときにリスナーイベントを追加することの簡単な分析

達成される効果多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイ...

MySQL データベースのデータ テーブルの最適化、外部キーの分析、3 つのパラダイムの使用

この記事では、例を使用して、MySQL データベースのデータ テーブルの最適化、外部キーの使用、およ...