search
HomeWeb Front-endCSS TutorialA brief discussion on the advantages and disadvantages of DIV+CSS

A brief discussion on the advantages and disadvantages of DIV+CSS

Mar 19, 2018 am 11:18 AM
Advantages and Disadvantages

This article mainly talks about the advantages and disadvantages of DIV+CSS. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

DIV itself is a container. You can not only embed tables but also embed text and other HTML codes; CSS is the abbreviation of CascADIng style Sheets, which is translated as "Cascading Style Sheets" in Chinese. CSS technology is used when making the homepage, which can effectively achieve more precise control over the layout, fonts, colors, backgrounds and other effects of the page. By making some simple modifications to the corresponding code, you can change the appearance and formatting of different parts of the same page, or of all pages.

DIV+CSS standard has the following advantages:

1. Because it uses CSS layout, it is not full of various attributes like table layout and numbers, and many css files are usually shared, thus greatly reducing page code and improving page browsing speed.

2. The structure is clear and more friendly to search engines. It is easier to be included by search engines, has the innate conditions for search engine SEO, and with excellent content and some SEO processing, you can get better website rankings.

3. It has better compatibility and conforms to the development trend of web standards and specifications. It can be used on almost all browsers, and there will be no big difference in effects in different browsers.

4. Shorten the revision time, because the layout of the website is controlled by external css files. You can update the styles and formats of many web pages at the same time by simply modifying a few CSS files. There is no need to change each page one by one. The page has been updated. You can use a CSS file to control the style of all web pages on the site. As long as the corresponding lines in the CSS file are modified, all pages of the entire site will change accordingly.

5. Powerful font control and typesetting capabilities. CSS’s ability to control fonts is much better than the poor FONT tag. CSS no longer needs to use FONT tags or transparent 1px images to control titles, change font colors, and fonts. Style etc.

6. Improve ease of use. Use CSS to structure HTML. For example: P tag is only used to control paragraphs, h1-h6 tags are only used to control titles, and table tags are only used to express formatted data. etc. You can add more users without creating separate versions.

7. Better scalability. Your designs are not only used in web browsers, but can also be published on other devices, such as PowerPoint, etc.

8. Control the page layout more flexibly. Usually, the page is downloaded according to the order of the code, while the arrangement of the table layout code represents from top to bottom, from left to right, and cannot be changed. Through CSS control, you can change the order of the codes arbitrarily, such as loading the important content on the right first.

9. Separate performance and content, cleanly and neatly. By stripping out the design part and putting it in an independent style file, while the web page is mainly used to place your content, you can reduce the possibility of invalid web pages in the future.

10. It is more convenient for search engines to include and get higher evaluation. Replace nested tags with HTML that only contains structured content. Search engines will search your content more efficiently and may give you a higher ranking.

11. Table layout is not very flexible. You can only follow the table tr td format. And p you can p ul li or ol li or ul li...

12. In Table layout, there will be a lot of junk code, some modified styles and layout codes are mixed together, Very unintuitive. DIV can better reflect the separation of style and structure, and the structure is highly reconfigurable.

13. Some functions that previously had to be implemented through image conversion can now be easily implemented using CSS, thereby downloading the page faster.


##DIV+CSS has so many advantages, but it also has some disadvantages:

1. The design elements of CSS website production are usually placed in one external file, or several files, which may be quite complex or even large. If there is an abnormality in the CSS file call, the entire website will be It became terrible.

2. Although DIV+CSS is not out of reach, it is at least more complicated than table positioning. Even for website design experts, it is easy to have problems, let alone beginners.

3. Although DIV+CSS solves most browser compatibility problems, there are also exceptions when used in some browsers. For example, Firefox displays a normal page in IE, but it may not work in Firefox. Unrecognizable. Of course, this should be a browser problem, but it can be said that at present, DIV+CSS has not yet achieved unified compatibility with all browsers.

4. Whether DIV+CSS is optimized for search engines depends on the professional level of web design, not DIV+CSS itself. DIV+CSS web design does not guarantee that the web page will be optimized for search engines. It does not even guarantee that it will have a simpler code design than the HTML website. Moreover, the inclusion and sorting of web pages by search engines is obviously not measured by whether tables and CSS positioning are used. This is why many websites made with traditional table layouts rank high in search results, while many web pages made using CSS and web standards still rank low. Because for search engines, factors such as website structure, content, and related website links are always the most important indicators for website optimization.

The above is the detailed content of A brief discussion on the advantages and disadvantages of DIV+CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement
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
A Little Reminder That Pseudo Elements are Children, Kinda.A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTImproving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteWeekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherMaking width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersPosition Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryWeekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

IndieWeb and WebmentionsIndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:

See all articles

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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)