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
Recommend
Detailed explanation of the usage and difference between nohup and & in Linux
Example: We use the Python code loop_hello.py as ...
Linux file management command example analysis [display, view, statistics, etc.]
This article describes the Linux file management ...
20 excellent foreign web page color matching cases sharing
This article collects 20 excellent web page color ...
MySQL learning notes help document
View system help help contents mysql> help con...
CSS to achieve the effect of rotating flip card animation
The css animation of the rotating flip effect, th...
How to install FastDFS in Docker
Pull the image docker pull season/fastdfs:1.2 Sta...
Detailed example of installing FastDfs file server using docker compose
docker-compose.yml version: '2' services:...
Mysql modify stored procedure related permissions issue
When using MySQL database, you often encounter su...
How to use mysql index merge
Index merging is an intelligent algorithm provide...
WeChat applet realizes horizontal and vertical scrolling
This article example shares the specific code for...
Detailed explanation of the use of Vue mixin
Table of contents Use of Vue mixin Data access in...
Summary of the differences between Vue's watch, computed, and methods
Table of contents 1 Introduction 2 Basic usage 2....
Detailed explanation of how to use binlog2sql to quickly roll back after MySQL misoperation
Preface In daily work or study, it is inevitable ...
CSS: visited pseudo-class selector secret memories
Yesterday I wanted to use a:visited to change the...
Implementation of Docker cross-host network (overlay)
1. Docker cross-host communication Docker cross-h...