Use neat HTML markup to build your pages

The Internet is an organism that is constantly evolving. It is important to build pages that can adapt to the development of the Internet over the long term. This will allow your website to quickly keep up with the rapid development of the Internet.

Using clean HTML markup and building standards-compliant pages can help you do this, and more importantly, it can save you a lot of time and money in future operations.

Web page technology has progressed along with the development of Internet technology. HTML technology has been developed for a long time, and its accompanying technologies have also developed stably.

First came Javascript, then CSS, XML, and now AJAX. HTML5 is also starting to see widespread adoption—Firefox, Safari, Opera, and Chrome already support HTML5 (on this issue, Microsoft's Internet Explorer once again holds back the Internet #-_-)

In this article, we'll explore fundamental web standards, discussing what they are, why they matter, and how to address these important but often overlooked issues.

What is "clean" HTML markup?

In simple terms, "clean" HTML markup means that it has no clutter, complies with standards, and uses meaningful tags and structure .

There is no cumbersome HTML code, which can make full use of tags, eliminate unnecessary codes, and save only meaningful tags. It avoids useless properties, such as embedded CSS, and keeps the document structure neat.

Similarly, non-cumbersome CSS code should avoid repetition, use inheritable properties (remember that the original meaning of CSS is cascading style sheets), and reuse CSS Class scientifically.

Standards compliance means that your page can be validated by W3C 's HTML, CSS, and XML standards. Use the free W3C validator to find and correct errors, and continue testing until it is 100% compliant.

Why do you do this? Isn't it enough as long as it can be displayed normally?

Every project has a tight deadline and users want the website to be released as soon as possible. Therefore, website developers and designers are required to complete their work quickly and efficiently.

It's easy to fall into the trap of thinking that fast means sloppy, and that writing clean, standards-compliant code is a waste of time. People often say: "It displays normally, so there is no problem."

Although it shows at this moment, what about next year? What about three years later? How to change browser? Is the device compatible?

Do you really think that search engines will go through your code line by line? They are very picky. If you don’t use standardized codes, you are driving the search engines away.

What happens if other employees come to modify your code? What happens if you are fired by your boss or change jobs? Someone will come along and look at your code and understand what it means. Do you want to make this easy, or do you want him to stab you in the back?

Start writing it correctly, it is not a tedious task, it will save you time and money, and give you less worries.

You may think that it is faster to write pages using embedded CSS, or you may find it more convenient to write HTML without considering the structure.

But when you modify the document or redesign the website in the future, you will spend more time to make up for the interference caused by poor quality code. If you create new stylesheets, embedded CSS scattered throughout the HTML code can cause you a lot of trouble and you may spend hours stripping it out.

Scalable, device-friendly, semantic and easy to upgrade

Mobile browsers are developing faster and faster. Mobile Internet access is no longer exclusive to BlackBerry. Now hundreds of millions of people are using their mobile phones to browse the web every day.

It is already common to see devices with assistive browsing technology developed for the visually impaired or with special interfaces designed for people with physical disabilities. If you don't want to lose such a large user base, you have to consider the issue of device friendliness.

Your website may be provided to users in Braille form, and with tools such as Internet content storage and Google snapshots , your web pages may be retained on the Internet for a long time even if they are deleted.

Using clean, standard markup will make it easier for you to deal with the above situations.

Do and Don't

DO - Use predefined tags. For example: h1 is the most important part of a web page, followed by h2, h3, etc. There can only be one h1 on a web page;

DO - Use meaningful element names. Ask yourself if someone else would understand the meaning of your class and ID naming if reading your code. For example, for the same layer, which one do you think is better, #box12 or #comment-footer?

DO - Take advantage of CSS inheritance. For example, if you set the font property in a container, you do not need to set it separately in its child elements unless it uses a different font. This will keep your styles clear and concise.

DO - Make your HTML, CSS, and XML code conform to standards. Use the W3C validator to validate errors and warnings, and fix them until you are 100% compliant with the standards.

DO - Double check the code produced by the WYSIWYG editor. WYSIWYG browsers are the main source of junk code, so be sure to try to keep the code they generate as simple as possible.

DON'T - Do not use embedded CSS styles and extraneous tags and attributes. Even if you are very busy, don't add these things.

DON'T - Don't settle for "showing right". Because errors hidden in the page may destroy the page beyond recognition in other browsers or devices.