Analysis and explanation of the differences between DIV, Table and XHTML website building

To put it simply, website construction is about "what this person looks like" and "what this person is like inside". One part is the "visual effect" displayed by the appearance, and the other part is the "code elements" hidden inside.
Let's take a simple example and use these three different code styles to achieve the same page effect:

1. First, write it using a table, which requires 8 lines of code:

Copy code

The code is as follows:

<table>
<tr>
<th>Website Title</th>
</tr>
<tr>
<td>Website Content</td>
</tr>
</table>

2. Then progress to using DIV, 2 lines are enough, but because there are two DIVs, in order to distinguish them, they need to be given different IDs:

Copy code

The code is as follows:

<div id="title">Website Title</div>
<div id="content">Website content</div>

3. Write in XHTML:

Copy code

The code is as follows:

<h1>Website Title</h1>
<div>Website content</div>

Pros and Cons:
Using a simpler XHTML code style is not just to increase page opening speed. After all, network bandwidth is getting larger and larger, and the difference between opening a 10K web page code and opening a 5K web page code is not obvious. The disadvantages of using XHTML to build a website are also obvious. If it is a website of the same size, it will only take 1 hour to use TABLE, 2 hours to use DIV, and 3 hours to use semantically compliant XHTML. Of course, this is just an estimate. Depending on the different pages and the proficiency of the technicians, there will be some discrepancies in the time.
So why should we spend more time building a website?
Just like choosing a wife, we should not only focus on whether this person is beautiful on the outside, but more importantly, we should care about her "internal configuration". Otherwise, if after you marry her, she will go to the hospital every few days and quarrel with you for no reason, you will definitely not be in a good mood.
Similarly, when building a website, you can’t just focus on the design style. What is more important is the core code and its quality. The website we create is not just for displaying at home for our own enjoyment, but more importantly for promoting the website and bringing online influence to our business. Let users search for a keyword to find your website instead of someone else's website.
So how do you get search engines to find your website?
The simplest way is to write code that search engines can understand, that is, machine language.
The search engine does not know what the page will look like when it is displayed. After all, it is a machine. At least for now, it is not like a human sitting in front of a monitor, clearly seeing the appearance and knowing the primary and secondary clearly. It can only understand and index your website through machine language, which is the code you write.
When you use semantically compliant XHTML and tell it which is the more important title (H1/H2/H3/H4/H5/H6), which is the list (UL/OL/DL), which is the paragraph (P)... it will think that you are a good person and have written in a language that it can understand, and it will move your ranking forward.
The entire website is in table layout, with no distinction between primary and secondary, and search engines will have difficulty understanding it. The DIV layout is even more ridiculous. The entire website is filled with id="title". Some even use pinyin id="biaoti". Some even use id="tit01". There are all kinds of weird code styles. Do the developers expect that today's computers can understand human language? Do you even understand original writing in Chinese and English?
The relationship between the three <br />In fact, the relationship between the three should be mentioned at the beginning, but I am afraid that too many conceptual things will scare away ordinary readers, so I will give a brief introduction at the end. In fact, table and div are both elements of xhtml. Table has its own function. It is used to make tables. When table elements are needed in the website, it is an indispensable component. Div is one of the most commonly used elements. We should give them different missions according to their semantics in machine language, rather than simply taking them and putting them in a random place and starting to use them. In fact, any element can be used to make a website, and you can even use only p tags or ul tags to make a website, but the things produced in that way will look the same and will actually cause reading difficulties for robots. Slow parsing speed is a small matter, but it will be troublesome if it is considered an unfriendly factor by the search engine and blocked. After all, it’s not fun to use the website alone.

<<: In-depth understanding of the vertical-align property and baseline issues in CSS

>>: HTML+CSS+jQuery imitates the search hot list tab effect with screenshots