search
HomeWeb Front-endCSS TutorialSeveral misunderstandings about web standards for beginners_CSS/HTML

I am very happy to see that many designers are beginning to pay attention to and try to use web standards to create web pages. However, we found several problems from netizens’ questions and production, and I would like to remind you here:

1. Standardization is not done just to pass the verification.
The original intention of web standards is to separate content (structure) and presentation, which is to separate styles and put them in separate css files. The advantage of this is that content and performance can be processed separately, and it also facilitates search and content reuse.

W3C validation only helps you check whether the writing of XHTML code is standardized and whether the CSS attributes are within the CCS2 specification. The standardization of the code is only the first step. It does not mean that if it passes the verification, my web page will be standardized. We are not standardizing for the sake of fame or showing off to others: "Look, my page has passed the verification". Our purpose is to make our web design work more efficient, to reduce the size of the web page, and to be able to use it in any browser. and browse normally on network devices.

Please calm down and carefully study and understand the connotation of web standards. The Internet is already full of impetuousness and vanity. Please do not bring this trend to the application of web standards. Doing so will only affect and damage the promotion of web standards.

2. Don’t use traditional table thinking to nest divs
"CSS layout is to replace the original table with div. It used to be table nesting, but now it is DIV nesting." This view is wrong of!

Please break out of the confinement of the original table layout and abandon the way of thinking of placing pictures and content one TD after another. We said above that the purpose of web standards is to separate content and performance. You can think of it this way. The page contains only content. Without modification, it looks like a white page with some text and pictures ( This picture refers to the picture in the content, which is a picture with real meaning). These text pictures are just listed in sequence, with only structure and no style. Then add performance, use all modified pictures as backgrounds, and use CSS to define the position, font, color, etc. of each piece of content.

The page produced in this way has content and performance separated. That is to say, when you remove the css file, what is left is clean content. In this way, you can read it in a text browser, read it on a mobile phone or PDA, and modify the CSS at any time to achieve revision.

3. There is no need to create an ID for each piece of content
Some netizens complained that the css file was too large and complicated. Looking carefully at their code, I found that the reason is that they define a div and create an ID for each piece of content or even each sentence. On the one hand, this is due to unfamiliarity with style sheet applications, and on the other hand, it also shows a lack of thorough understanding of web standards.

We know that content has a structure (if you don’t understand, please read: [url=http://www.w3cn.org/article/tips/2004/43.html]Understand the separation of performance and structure[/ url]), we can use the same style to define the content of the same structure, such as the same level of title, text, and pictures. For styles that are referenced multiple times, you can use class to define them, and you don’t need to use id for each one; in addition, it does not mean that you must use

, you can completely replace it with
, which are also block-level elements and have the same seven parameters of the box model,

Just convenient for floating.

As for adding extra divs just for line height, spacing, and a modified image, I think you can quickly omit these with the application and understanding of CSS. We are opposed to using DIV nesting to replace table nesting. This makes no sense and cannot reflect the structuring of the content. I hope everyone will study CSS more and write the most concise and effective style sheets.

4. Don’t give up easily just because of a little setback
I think this is a matter of attitude and approach, not just for learning web standards. Learning any new knowledge and accepting new concepts is difficult, especially when it requires you to change your existing habits and thinking. The only question is: do you think learning web standards is worth it? You can ask yourself: Do you recognize the benefits brought by web standards (simplified code, accelerated development, compressed file size, increased download speed, better usability, more users, easier maintenance, multi-platform compatibility )? Do you feel that world-wide XML is still far away from you? Do you think your current knowledge of HTML is enough?

Since 1999, web page production technology has not progressed or changed much in China (except for the rise of flash), but the pace of progress abroad has never stopped, xhtml1.0, xhtml1.1, xml, xsl ..., W3C and major software companies are constantly researching and advancing web technology to make it more convenient, more effective, and more powerful. The application and promotion of web standards have been carried out abroad for more than eight years (starting from Zeldman's web standards organization website). Although there are many difficulties, it is gradually being accepted and recognized by people. Why are we still intoxicated with the "prosperity" on the surface of the website, without thinking about the essence behind the page.

Do you want China to continue to lag behind? Are you willing to continue to lag behind? All decisions are yours.

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
Demystifying Screen Readers: Accessible Forms & Best PracticesDemystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Adding Box Shadows to WordPress Blocks and ElementsAdding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Create a JavaScript Contact Form With the Smart Forms FrameworkCreate a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)Mar 04, 2025 am 10:22 AM

This article explores the top PHP form builder scripts available on Envato Market, comparing their features, flexibility, and design. Before diving into specific options, let's understand what a PHP form builder is and why you'd use one. A PHP form

Working With GraphQL CachingWorking With GraphQL CachingMar 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

Making Your First Custom Svelte TransitionMaking Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Show, Don't TellShow, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Classy and Cool Custom CSS Scrollbars: A ShowcaseClassy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment