ページデザインにおけるテーブルとdivの適切な適用についての簡単な説明

この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、まずはより公式な声明を引用したいと思います。

<!DOCTYPE> 宣言は、HTML5 ドキュメントの最初の行、<html> タグの前に配置する必要があります。このタグは、ドキュメントがどの HTML 仕様を使用しているかをブラウザに伝えます。

doctype 宣言は HTML タグではなく、ページの作成に使用するマークアップのバージョンをブラウザに指示する命令です。

ブラウザがどのようなタイプのドキュメントを期待するかを認識できるように、すべての HTML ドキュメントで doctype を指定することが非常に重要です。

HTML 4.01 は SGML に基づいているため、HTML 4.01 の doctype には DTD への参照が必要です。 HTML 5 は SGML に基づいていないため、DTD を参照する必要はありませんが、ブラウザーの動作を規制するために doctype が必要です (ブラウザーが適切に動作できるようにするため)。

HTML 4.01 では 3 つの異なるドキュメントタイプがありましたが、HTML 5 では 1 つのみになります。

<!DOCTYPE HTML>

ドキュメントタイプを宣言する HTML5 タグは下位互換性があるため、HTML で HTML5 タグを使用していない場合でも、この宣言方法を使用できます。ただし、ページにいくつかの非互換性が生じるため、実際の状況に基づいて修正する必要があります。 <!doctype html> を使用すると、ブラウザはタイプ dtd を指定せずにページを厳密モード (標準モード) でレンダリングできます。

今日のメイントピックであるテーブルとdivの適切な適用についてお話ししましょう。

テーブルは初期のページデザインで広く使用されていましたが、インターネットの発展とともに、テーブルは徐々に廃止されました。現在、インターネット上の少数の古いウェブサイト（変更する必要のない有名なものがたくさんあります）だけが、依然としてテーブルを使用してページをレイアウトしています。現在、新しいウェブサイトは基本的にdiv + cssを使用してページをレイアウトしていますが、Webフロントエンドに不慣れな多くの友人は、テーブルを使用するとページが検索エンジンに不親切になるという幻想を抱いているため、リストを設計するときに常にdtやulなどのタグを使用します。これにより、ページスタイルの設計に多くの時間を費やすことになりますが、検索エンジン最適化に対する実際の効果は非常に弱くなります。

多数のテーブルを使用することの主なデメリットは、検索エンジンに優しくないこと、そしてプログラマーにとっても非常に不親切であることです。ネストされたテーブルが多数あると、人々は混乱してしまいます。しかし、div と一緒に使用すると効果が得られ、その効果は dt や ul よりも優れている可能性があります。

別の問題は、多くのテーブルがあなたのページのセマンティクスを非常に悪いものにします。ページレイアウトは、スタイルを書く際に非常に正式な化場であることがわかります。テーブルのスタイルに記載されているように見えますが、ナビゲーションパーツを見ると、ページのスタイルが分離されている場合、CSSファイルを削除することができないことがわかります。

そこで、提案があります。ページをデザインした後、CSS スタイルを追加せずにデフォルトのスタイルレイアウトを直接記述し、ページに応じて CSS カスタムスタイルを追加します。この方が効率的ではないでしょうか? ハハ、試したことはないですが、そう思うだけです。

セマンティクスについては多くのコンテンツがあるので、ここではあまり多くは語りません。セマンティクスを非常にわかりやすく紹介している「高品質なコードの書き方 - Webフロントエンド開発の実践法」という非常に優れた本をお勧めします。ページレイアウトは経験を積むプロセスです。良いウェブサイトを見ると、そのページレイアウトから学ぶことができます。悪いウェブサイトを見ると、それを最適化する方法についても考えることができ、ウェブフロントエンドの道をより速く進むことができます。

不完全な詳細がある場合は、修正してください。ありがとうございます。

<<: MySQL 8.0 WITH クエリの詳細

>>: Dockerイメージを構築する2つの方法