DIV、テーブル、XHTML のウェブサイト構築の違いの分析と説明

簡単に言えば、ウェブサイト構築とは、「この人はどんな外見をしているのか」と「この人はどんな内面を持っているのか」ということです。 1 つは外観によって表示される「視覚効果」であり、もう 1 つは内部に隠された「コード要素」です。
簡単な例を挙げて、次の 3 つの異なるコードスタイルを使用して同じページ効果を実現してみましょう。

1. まず、テーブルを使用して記述します。これには 8 行のコードが必要です。

コードをコピー

コードは次のとおりです。

<テーブル>
<tr>
<th>ウェブサイトのタイトル</th>
</tr>
<tr>
<td>ウェブサイトのコンテンツ</td>
</tr>
</テーブル>

2. 次に DIV の使用に進みます。2 行で十分ですが、2 つの DIV があるため、区別するために異なる ID を付与する必要があります。

コードをコピー

コードは次のとおりです。

<div id="title">ウェブサイトのタイトル</div>
<div id="content">ウェブサイトのコンテンツ</div>

3. XHTML で記述する:

コードをコピー

コードは次のとおりです。

<h1>ウェブサイトのタイトル</h1>
<div>ウェブサイトのコンテンツ</div>

長所と短所:
よりシンプルな XHTML コードスタイルを使用するのは、ページの開く速度を上げるためだけではありません。結局のところ、ネットワーク帯域幅はますます大きくなり、10K の Web ページコードを開くことと 5K の Web ページコードを開くことの違いは明らかではありません。 XHTML を使用して Web サイトを構築する場合のデメリットも明らかです。同じ規模の Web サイトであれば、TABLE を使用する場合は 1 時間、DIV を使用する場合は 2 時間、セマンティックに準拠した XHTML を使用する場合は 3 時間しかかかりません。もちろん、これは推定値にすぎません。ページの違いや技術者の熟練度に応じて、時間に多少の差が生じます。
では、なぜウェブサイトの構築にもっと時間をかけるべきなのでしょうか?
妻を選ぶときと同じように、私たちはこの人が外見が美しいかどうかだけに注目するべきではなく、もっと重要なのは、彼女の「内面の構成」を気にかけるべきです。そうでないと、結婚した後、彼女が数日おきに病院に行ったり、理由もなくあなたと喧嘩したりしたら、あなたは間違いなく機嫌が悪くなるでしょう。
同様に、Web サイトを構築するときに、デザインスタイルだけに焦点を当てることはできません。さらに重要なのは、コアコードとその品質です。私たちが作成するウェブサイトは、単に自宅で自分たちが楽しむために表示するだけでなく、ウェブサイトを宣伝し、ビジネスにオンラインの影響をもたらすことがより重要です。ユーザーがキーワードを検索して、他の人の Web サイトではなく自分の Web サイトを見つけられるようにします。
では、検索エンジンに自分のウェブサイトを見つけてもらうにはどうすればいいのでしょうか?
最も簡単な方法は、検索エンジンが理解できるコード、つまり機械語を書くことです。
検索エンジンは、ページが表示されたときにどのように見えるかは知りません。結局のところ、それは機械です。少なくとも今のところ、モニターの前に座っている人間のように、外観をはっきりと見て、プライマリとセカンダリを明確に知っているわけではありません。ウェブサイトを理解してインデックス付けできるのは、あなたが書いたコードである機械語を通じてのみです。
意味的に準拠した XHTML を使用して、どれがより重要なタイトル (H1/H2/H3/H4/H5/H6)、どれがリスト (UL/OL/DL)、どれが段落 (P) かを伝えると、検索エンジンはあなたが良い人であり、検索エンジンが理解できる言語で書いていると判断し、ランキングを上げます。
ウェブサイト全体がテーブルレイアウトになっており、プライマリとセカンダリの区別がないため、検索エンジンが理解するのは困難です。 DIV レイアウトはさらに馬鹿げています。Web サイト全体が id="title" で埋め尽くされています。ピンイン id="biaoti" を使用しているものもあります。id="tit01" を使用しているものもあります。あらゆる種類の奇妙なコードスタイルがあります。開発者は、今日のコンピューターが人間の言語を理解できると期待しているのでしょうか?あなたは中国語と英語の原文を理解していますか?
三者の関係性<br />本当は、三者の関係性は冒頭で触れるべきなのですが、あまりに概念的なものが多すぎると一般の読者を遠ざけてしまうのではないかと心配なので、最後に簡単に紹介しておきます。実際、table と div はどちらも xhtml の要素です。table には独自の機能があり、テーブルを作成するために使用されます。Web サイトでテーブル要素が必要な場合、table は不可欠なコンポーネントです。 Div は最もよく使用される要素の 1 つです。単にそれらをランダムな場所に置いて使い始めるのではなく、機械言語のセマンティクスに応じて異なるミッションを与える必要があります。実際、任意の要素を使用してWebサイトを作成できます。pタグまたはulタグのみを使用してWebサイトを作成することもできますが、その方法で作成されたものは同じように見え、実際にはロボットにとって読み取りが困難になります。解析速度が遅いのは些細なことですが、検索エンジンに不親切とみなされてブロックされてしまうと困ったことになります。結局、ウェブサイトだけを使うのは楽しくないです。

<<: HTML+CSS+jQuery はスクリーンショットで検索ホットリストタブ効果を模倣します

>>: WeChatミニプログラムはuni-appを通じて世界中に共有されます