divを使用したレイアウト...あまりにも多くのことがありますか？

Question

レイアウトを開発するためのベストプラクティスは何ですか？ divを制限する方が良いですか？私はいくつかの人気サイトのhtml/cssを見ていて、それらはすべてdiv内にdivを持つようです。たとえば、ページ全体のdiv、トップバーのdiv、ロゴのトップバー内のdiv、検索バーなど

これは良い方法ですか？すべてのdivを正しく配置し、div内に必要な要素を配置する方が簡単だと思います。これまで私がこれまで行ってきたことですが、私が正しいアプローチを学んでいることを確認したいのです。

これについての助けに感謝します。ありがとう！

Answer 1

ご使用のページのdivide（これは、divが使用されるはずです）のセクションがお互いに必要な場合は、<div>を使用してください。例えばコンテンツからのヘッダー/フッター、またはブログ上の個々の投稿。
ただし、意味的に別の要素が意味を成す場合には使用しないでください。

上記のブログのアーカイブでは、アーカイブ内のすべての投稿の2行の要約のみが表示されていた場合、順序が整っている項目のリストを定義しているので、 <li>要素も同様にブロック要素であり、まったく同じ方法でスタイルを設定できます。

時々、ネストされた<div>タグを持つことは意味があり、時にはそうしないでください。
基本的なテストとして、あなたのページが視覚障害のあるユーザーのために読者によって解析されているとします。ドキュメントの各ノードに何が含まれているかを知る必要があるため、適切に通知することができます。あなたの視覚的なCSSが必要とするものは気にせず、可能な限り正確に言葉遣いにそれを解析したいだけです。覚えておくべき

基本ポイント：

• はあなたのウェブサイトを見ている人は、あなたのウェブサイトを見ている人が使用できない場合があり
• あなたのCSSを使用していない可能性がないビジュアル
• 主な構造のため、あなたのHTMLを書きます従来のウェブブラウザ
• CSSが意味をなさないままであれば、CSSがうまく動作しない場合はいつでも構造を調整することができます。

Answer 2

<div>は定義上無意味な要素なので、どれくらいあなたが持っているかは関係ありません。

しかし、理にかなっている限り、あなたのページには<div>がある必要があります（意味的には、ジョブに適した要素がある場合には使用しないでください）。

<div>This is a paragraph of text</div> 

は実際に

<p>This is a paragraph of text</p> 

そしてようにすべきです。

Answer 3

HTMLにこのような「コード臭」の名前があります。Divitisです。

HTMLのタグの意味の意味についての知識が必要です。あなたはthis articleを読むことから始めることができますが、html4.01とxhtmlに焦点が当てられています。 HTML5にはいくつかの新しいタグがあり、既存のHTML4タグには意味の意味がほとんど変更されていません。

Answer 4

大きな問題は、一般にdivやテーブルを使用するかどうかです。テーブルには頭痛の種がたくさんありますが、そのうちのいくつかを回避することはできません。しかしdivにも問題がある可能性があります。

どのようなものを使用していても、ネストのレベルによって実際にページがわかりにくくなる可能性があります。だから、必要な最小限のネスティングレベルを優先する必要があります。同時に、入れ子にならないように努力しても、HTMLを理解しにくくする可能性があります。