たくさんのdivタグを使用することは本当に悪いですか？

私たちの最新の本 - 物議を醸すタイトルを持つ本 - は、納屋のダンスでカエルのバケツよりも多くの議論と膝の反応を引き起こしました。私が頻繁に投稿したコメントは、「テーブルタグをテーブルとして表示するDivに置き換えることも例外ではありません。テーブルを使用することもできます。」コメンターがテーブルタグを使用しない唯一の理由は、関連するタグの数であることを暗示しているように聞こえるので、議論は興味深い。

すべてのテーブル、TR、およびTDタグをそれらのテーブル要素のように表示するDivタグに置き換えても、首を貼り付けてイエスと言います。レイアウトにHTMLテーブルを使用するよりも優れています。

構造divタグの過剰使用によって悪影響を受ける人はいません。レイアウトにHTMLテーブルを使用しても同じことは言えません。 レイアウトにネストされたテーブルを使用するWebページは、印刷が困難であり、モバイルデバイスで見るのが難しく、画面リーダーのユーザーにとってナビゲートするのが困難です。スクリーンリーダーのアプリケーションは、しばしばネストされたHTMLテーブルに出くわし、テーブルの内容と「テーブルエンド」に入ると「5列と2列のテーブル」のようなものを発表します。ネストされたDIV要素を使用した同じWebページは、モバイルデバイスで印刷や表示するためにきちんとスタックするようにスタイルを整えることができ、画面読者はDiv要素を無視します。

HTMLテーブルを使用すると、各セルの内容が2次元の他のセルの内容に関連していることを意味します：同じ行と同じ列。一方、divは他のdiv要素とのそのような関係を意味しません。それは単にコンテンツの足場であり、それらの使用から派生した意味はありません。

OK、すべてのテーブル関連のタグをDIV要素に盲目的に置き換えることは、問題に対する正しいアプローチではないかもしれませんが、レイアウトにHTMLテーブルを使用するのと同じくらい「同じくらい悪い」と言うことは間違っています。 HTML 4.01は、DIVを「一般的な言語/スタイルコンテナ」またはより具体的に定義します。

DivおよびSPAN要素は、IDおよびクラスの属性と併せて、ドキュメントに構造を追加するための一般的なメカニズムを提供します。これらの要素は、コンテンツをインライン（スパン）またはブロックレベル（DIV）と定義しますが、コンテンツに他のプレゼンテーションイディオムを課しません。したがって、著者は、これらの要素をスタイルシート、Lang属性などと組み合わせて使用​​して、HTMLを自分のニーズと好みに合わせて調整することができます。

したがって、DIV要素を使用してコンテンツブロックを定義できます。コンテンツの構造化にネストされたDIV要素を使用することは完全に有効であるように聞こえます。見出し、段落、ブロッククォート、リスト、そしてもちろん表形式データのテーブルなど、より適切なものの代わりにDiv要素を使用しない限り、あなたはうまくやっています。

HTMLテーブル要素を使用してレイアウトを作成する際に使用するアプローチは、Webページをスタイリングする前に最初にHTMLのレイアウトをロックインすることです。これは間違っており、確立されたベストプラクティスに直面して飛びます：プレゼンテーションをコンテンツから分離します。

これは、多くのDIV要素を使用している場合でも、CSSレイアウトアプローチとはまったく異なります。たとえば、サイトタグでサイトブランディングを表すすべてのコンテンツと、別のDivタグで追加のサイト情報を表すすべてのコンテンツをラップできます。 CSSでは、サイトのブランディングをWebページの上部に配置するスタイルと下部に追加のサイト情報を適用するという事実は、まだ重要ではありません。レイアウト段階で私はそれを行うかもしれませんし、CSSテーブル関連の表示値を使用して列または行にすることもできます。マークアップは、アプローチがHTMLマークアップのレイアウトをロックインしないため、複数の方法でスタイリングできます。 HTMLのDivタグに関するよくある質問（FAQ）

HTMLでDivタグを使用する主な目的は何ですか？

​​

HTMLのDivタグは、他のページ要素をカプセル化し、HTMLドキュメントをセクションに分割するコンテナユニットです。 Web開発者はDivタグを使用してHTML要素をグループ化し、CSSスタイルを一度に多くの要素に適用します。これは、コンテンツを整理し、Webレイアウトに構造を提供する方法です。

Divタグを使用する代替手段はありますか？ html5は、

、

、

、

、

など、divタグの代わりに使用できる新しいセマンティック要素を導入しました。これらのタグは、内部に含まれるコンテンツの種類に関する詳細情報を提供し、コードの読み取りと理解を容易にします。たとえば、divの背景色を赤に設定する場合、次のコードを書きます：

div {

背景色：赤;

}

互いにdivタグをネストできますか？これは多くの場合、複雑なレイアウトを作成するために行われます。あなたがdivをネストすると、それは親divの子になります。子Divは、親から独立してスタイルを整えることができます。また、各Divタグがブラウザが処理する必要がある要素の数に追加されるため、Webサイトのパフォーマンスにも影響を与える可能性があります。必要な場合にのみ、Divタグを控えめに使用することをお勧めします。

divタグはスパンタグとどのように異なりますか？

divタグとスパンタグの主な違いは、コンテンツを処理する方法です。 Divタグはブロックレベルの要素を作成します。つまり、新しいラインで開始し、利用可能な全幅を取り上げます。一方、スパンタグは、必要なだけ幅を占有するだけのインライン要素を作成します。

divタグはSEOに影響しますが、divタグ自体はSEOに直接影響しません。 divタグを使用してクリーンでよく構造化されたレイアウトを作成すると、コンテンツをよりアクセスしやすく読みやすく、SEOを改善する可能性があります。これは、CSSスタイルまたはJavaScript関数を適用するのに役立ちます。 IDは一意であり、ページに1回しか使用できませんが、クラスは複数回使用できます。ただし、一部の電子メールクライアントは、DivタグのすべてのCSSプロパティをサポートしていないため、複数のクライアントで電子メールをテストして正しく表示することを確認するのが最善です。テキストを中心にしている場合は、テキストアライグプロパティを使用できます。ブロックレベルの要素を中心にしている場合は、マージンプロパティを使用できます。例は次のとおりです。

div {

text-align：center;

}

または

div {

マージン：auto;

}

以上がたくさんのdivタグを使用することは本当に悪いですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。