HTML5 Tutorial DIV+CSS Webpage Standardized Layout Advantages

Image for post
Image for post

Standard web pages all need to lay out the content. In the past, the positioning technology of tables was used. Since 2005, the layout method of DIV+CSS has been gradually shifted. At present, most websites adopt this layout method. The use of DIV+CSS to layout the website complies with the W3C standard. The layout in this way is usually used to illustrate the difference between the positioning method and the HTML table. By using the DIV box model structure, each part of the content is divided into different blocks, and then CSS is used to define the position, size, border, inner and outer margins, and arrangement of the box model. Simply put, DIV is used to build website structure (framework), and CSS is used to create website presentation (style/beautification). This standard simplifies the HTML page code and obtains a better website structure, which is conducive to future website maintenance, collaborative work and easy search engine crawling. Of course, not all web pages need to use DIV layout, such as data pages, reports and other pages, or it is more convenient to use HTML tables. The Web standard does not say that Tables should be abandoned.

Advantages of DIV+CSS for page layout

DIV+CSS is a web page layout method. In the HTML website design standard, table positioning technology is no longer used, but DIV+CSS is used to achieve various positioning. DIV+CSS is one of the commonly used terms in website standards (also called “Web standards”), which can separate the content and performance of web pages. The use of DIV+CSS to construct websites is increasingly valued by web designers. Because in the DIV+CSS structured webpage, almost every element’s attributes are defined using CSS, so it is useful for the adjustment of webpage areas and elements. Great effect. This DIV+CSS model website design has the following advantages.

1. Separation of performance and content

Only the text information is stored in the HTML file, and the design part is placed in a separate style file, so that we can exert more control over the layout of the page, and the HTML code can still remain simple and clear.

2. Concise code, improve page browsing speed

The great advantage of CSS lies in its concise code. For a large-scale website, it can not only save a lot of bandwidth and increase the browsing speed of the page, but also increase the proportion of effective keywords in the total code of the page. Therefore, a website made using the DIV+CSS Web standard has certain advantages for search engines to crawl pages.

3. Easy to maintain and revise

The separation of web content and design style reduces some repetitive construction methods and makes page and style adjustments more convenient. As long as you simply modify a few CSS files, you can redesign the entire website page. Many problems only need to change the CSS without changing the program, thus reducing the cost of website revision.

4. Improve search engine indexing efficiency of web pages

A website built using the DIV+CSS method is easy to move closer to the W3C standard, because whether the website conforms to the W3C standard is an influencing factor of the search engine’s ranking of the page. In addition, the source code of the website is concise. Except for a few tags such as div, span, ul, li, there are almost no other tags, and the use of DIV+CSS can put the main content of the web page in front. In this way, the content of the website is completely exposed in front of search engines, making it easy for search engines to grab key content

Written by

Digital Nomad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store