Home Web Front-end CSS Tutorial Summary of the advantages of using CSS DIV for layout_Experience exchange

Summary of the advantages of using CSS DIV for layout_Experience exchange

May 16, 2016 pm 12:07 PM

The use of CSS DIV to reconstruct websites is increasingly valued by everyone, especially large sites. Large portal sites such as Alibaba and 163 have already completed the reconstruction work. I have already had the habit of using CSS DIV to write web page source code last year. I personally feel that this method is indeed much better than the traditional TABLE form of source code architecture.

1: Separate performance and content

Strip out the design part and put it in an independent style file, and only store text information in the HTML file.

2: Improve search engine indexing efficiency of web pages

Replace nested tags with HTML that only contains structured content. Search engines will search for your web page content more effectively, and May give you a higher rating.

3: Improve page browsing speed

For the same page visual effect, the page capacity reconstructed using CSS DIV is much smaller than the page file capacity encoded by TABLE. The former is generally only the latter. 1/2 size.

Also because the

tag has to wait
It can only be displayed after downloading, so the entire web page pops up at once, which makes the display speed feel very slow. With css div, the
tag can display the content inside without waiting for the
to be downloaded, so it makes people feel that the speed of opening the web page is very fast.

4: Easy to maintain and revise

You can redesign the entire website page by simply modifying a few CSS files.

From the above description, using CSS DIV to reconstruct the website can greatly improve the friendliness of website users and search engines.

CSS DIV has become the mainstream of current web page layout. In my opinion, the main core reason is not only that it conforms to W3C standards, but that through the use of CSS DIV, web engineering has:

Performance and Content separation

Nowadays, div css has become very popular. All major websites have been restructured into div css mode. NetEase is the best example. After using layers and CSS, the most intuitive experience for users is to open the web page. Much faster. If it can give users a good experience, why not do it?

Today I mainly analyze the necessity of using DIV CSS for website creation or reconstruction from the perspective of SEO:

1. Websites structured with div CSS are easy to move closer to W3C standards. Whether the website Complying with W3C standards is an influencing factor for search engines to rank web pages, especially YAHOO, which takes it seriously.

2. The website source code is simple. Except for a few tags such as div, ul, li, dl, dd, dt, there are almost no other tags. In this way, the website content is completely exposed to search engine spiders. In front of you, it is easier to crawl key content and increase the proportion of pages with key content, thereby increasing the proportion of ranking factors.

3. Key content can be easily read by spiders first. Generally, the site has three columns on the left, middle and right. The main content of the page is in the middle column, and the spider reads the page content from top to bottom, from left to right. If your left column content If there are more, it will be troublesome, and the weight of the main content of your page will decrease. With div css, you can write the main content in the front first, then write the content in the left column and right column, and then position it through CSS.

4. It is convenient to adjust the website structure and layout. For commonly used table layouts, if you want to change the layout, it can affect the whole body. If the website layer structure is designed reasonably, you can use CSS to easily change the performance of the website. This is the separation of structure, content, and behavior. If the website structure is changed regularly, it will naturally be very attractive to search engine spiders.
For a website that uses layers and css as a foundation, future optimization work will naturally save a lot of effort.​
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Working With GraphQL Caching Working With GraphQL Caching Mar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Building an Ethereum app using Redwood.js and Fauna Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

Creating Your Own Bragdoc With Eleventy Creating Your Own Bragdoc With Eleventy Mar 18, 2025 am 11:23 AM

No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.

Can you get valid CSS property values from the browser? Can you get valid CSS property values from the browser? Apr 02, 2025 pm 06:17 PM

I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.

A bit on ci/cd A bit on ci/cd Apr 02, 2025 pm 06:21 PM

I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:

Comparing Browsers for Responsive Design Comparing Browsers for Responsive Design Apr 02, 2025 pm 06:25 PM

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing

Stacked Cards with Sticky Positioning and a Dash of Sass Stacked Cards with Sticky Positioning and a Dash of Sass Apr 03, 2025 am 10:30 AM

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.

See all articles