In today's Internet field, the term WEB standard is becoming more and more fashionable in the concepts of users and web developers. However, the concept of WEB standards is too general, and people have different views on what exactly a WEB standard is and what it contains. At the "E-Dong Cup" ShopEx Template Contest Forum sponsored by China E-Dong.com, contestants and reviewers spoke enthusiastically about what WEB standards and "expression techniques" of template codes are. This article explains the author's views on WEB standards. So that everyone can understand the concepts generally referred to by WEB standards.
There are no so-called "standards", only suggestions
First of all, you should understand that there are no real WEB standards. What really exist are some organizations that promote standardization, such as ISO standards and Ecma. When most people refer to WEB standards, they are actually referring to something from the W3C. But the W3C doesn’t really set standards, they only provide recommendations. In their own words: “A W3C Recommendation is a specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director . W3C recommends the wide deployment of its Recommendations.”
The meaning of WEB standards
Generally speaking, WEB standards are composed of the following parts:
• Valid HTML/XHTML
•Code semantics are clear
•Separation of content (HTML/XHTML) presentation (CSS) and interaction (Javascript)
To some people, web standards mean all of the above, while to others it may be just a little bit of it. But most importantly these three parts are integral to building a great site.
Valid HTML/XHTML
Let's start with the first point, valid code is the first step towards WEB standards. For most people, valid only means HTML/XHTML code, but don't forget that there is also CSS validation. Verifying the validity of your HTML/XHTML code basically means whether the code on your web page conforms to the doctype you selected.
Choosing the correct doctype is important, as it determines how HTML/XHTML code is interpreted and how the layout differs in different browsers. The verified code can be displayed well in different browsers without having to consider too much browser compatibility. By validating you may discover potentially affecting code on the page, fix them to make the development process more efficient, and reduce future maintenance costs.
Code verification tool
• W3C Markup Validation Service
• Firefox HTML Validator add-on
• Internet Explorer Developer Toolbar
Code semantics are clear
Every element that exists on the page should have its meaning and be able to express its meaning accurately. Simply put, it means choosing the appropriate elements based on the context. Examples are as follows
This code is unclear
| The following is the quoted content: <div class="page-heading">Title of the page</div> <a class="menu-item" href="/item-1">Menu item 1</a> |
With the same performance, the semantics is much clearer
| The following is the quoted content: <h1>Title of the page</h1> <ul class="menu"> |
It is actually very simple to make the code semantics clear. Use h1-h6 to define the title, use p to define the article paragraph, use ul, ol, etc. to define the list items, etc. . . This will easily help you find the parts of the code you want and can significantly reduce page load times because it reduces the amount of code. And, don’t forget, this is also helpful for SEO. Clear semantics can help Google and other search engines better index your site.
Separation of content (HTML/XHTML) presentation (CSS) and interaction (Javascript)
There are many reasons why it is crucial to separate content (HTML/XHTML) presentation (CSS) and interactivity (Javascript). They have different divisions of labor, and how to use them reasonably requires careful consideration.
Reasons for separation
Performance: External files such as css and js will be saved in the user's cache after the first load, which saves subsequent loading time and improves the experience.
Overall: You can always find the codes and place them accurately.
Usability: You can always easily reference the code and reuse it throughout your website.
Maintenance: All codes related to performance and interaction are stored centrally for easy maintenance.
How to get closer to users?
Some people say that it takes more extra time to make a website closer to users, but in fact, as long as you can do the three points mentioned in the article, you have already taken a big step forward on the road to becoming closer to users.
Correct and effective code will make it easier for you to find incorrect content on the page. Code with clear semantics can better support handheld devices, and can also make the website better browsed by users without CSS modification. The separation of structure, performance, and interaction allows the website to maintain basic functions even without JavaScript support. Of course, you can enhance the site experience by adding a JavaScript layer, but this is definitely not the most basic part of a website's operation.