W3C: the World Wide Web Consortium (W3C), also known as the W3C council.
W3C is a non-profit organization that defines network standards. W3C is short for the World Wide Web alliance. W3C standards such as HTML, XHTML, CSS, and XML are customized by W3C.
W3C Web standards are not a standard, but a collection of standards drafted and released by the W3C World Wide Web alliance.
W3C Web page standards mainly consist of three parts: structure, presentation, and behavior ).
The corresponding standards are also divided into three aspects:
1. Standard structured language mainly includes XHTML and XML;
2. The standard language mainly includes CSS;
3. Behavior standards mainly include object models (such as w3cdom) and ecmascript.
Problem:
1. webpage code disorder and webpage display deviation;
2. Some potential users are ignored for dynamic JS Effects of Various browsers;
3. Code with poor portability, and users with disabilities cannot smoothly browse the website content.
How does one comply with W3C specifications?
1. Make sure all labels Use lowercase letters.
2. Make sure all attribute values are enclosed in quotation marks.
3. Ensure that all pairs of tags appear in the order and do not end with/>, and no space exists between "/" and "> ".
How to make your site standard and how to improve existing websites
Most of our designers are still using traditional forms of layout, performance, and structure to build websites. Learning to use XHTML + CSS requires a process that makes it impossible for existing websites to comply with website standards in one step. The best way is to gradually achieve the goal of fully complying with website standards in stages. If you are a newbie or not familiar with the code, you can also use a standard-compliant editing tool, such as Dreamweaver MX 2004, which is currently the most complete tool supporting CSS standards.
1. Primary Improvement
* Add the correct doctype to the page
Many designers and developers do not know what doctype is, what is the use of doctype. Doctype is short for document type. It is mainly used to describe the XHTML or html version you are using. The browser interprets the Page code based on the DTD defined by doctype (document type definition. Therefore, if you do not pay attention to setting the wrong doctype, the result will surprise you. Xhtml1.0 provides three doctype options:
(1) Transition type (Transitional)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Strict)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Framework (frameset)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 frameset // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
For our initial improvement, we only need to choose a transitional declaration. It is still compatible with your table layout and presentation logo, so that you do not feel that the changes are too great and difficult to grasp.
Tip: If you are too lazy to enter the above transitional code, you can visit the first page of http://www.macromedia.com/website. Then you can paste the source code with the same header code.
* Set a namespace)
Add the following code directly after the doctype declaration:
<HTML xmlns = "http://www.w3.org/1999/xhtml">
A namespace is a detailed DTD that collects Element Types and attribute names. The namespace Declaration allows you to identify your namespace through an online address. Just enter the code.
* Declare your encoding Language
All XHTML documents must declare the encoding languages they use in order to be correctly interpreted and validated by the browser. The Code is as follows:
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
The encoding language declared here is simplified Chinese gb2312. If you need to make traditional Chinese content, you can define it as big5.
* All tags are written in lowercase letters.
XML is case sensitive. Therefore, XHTML is also case sensitive. The names of all XHTML elements and attributes must be in lower case. Otherwise, your document will be considered invalid by W3C validation. For example, the following code is incorrect:
<Title> Company Profile </title>
The correct statement is as follows:
<Title> Company Profile </title>: <p> change to <p>, <B> change to <B>, and so on. This step is simple.
* Add the alt attribute to the image
Add the alt attribute to all images. The ALT attribute specifies that the text will be displayed for replacement when the image cannot be displayed. This is dispensable for normal users. However, it is vital for users of a text browser and a screen reader. Only when the alt attribute is added will the code pass the W3C correctness verification. Note that we need to add a meaningful alt attribute. it is meaningless to write a statement like the following:
Correct syntax:
* Quote all attribute values
In HTML, you do not need to enclose attribute values in quotation marks, but in XHTML, they must be enclosed in quotation marks.
For example, Height = "100", but not Height = 100.
* Close all labels
In XHTML, each opened tag must be closed. Like this:
<P> each opened tag must be disabled. </P> <B> HTML can accept non-closed tags, but XHTML cannot. </B> This rule can avoid HTML confusion and trouble. For example, if you do not disable image labels, CSS display may occur in some browsers. This method ensures that the page is displayed as you designed. It should be noted that empty tags should also be closed, and a forward slash "/" should be used at the end of the tag to close themselves. Example: <br/>
After the above seven rules are processed, the page basically meets the requirements of xhtml1.0. However, we also need to check whether the standards are met. We can use W3C to provide free Verification Service (http://validator.w3.org /). If an error is found, modify it one by one. In the subsequent resource list, we also provide other verification services and URL for guidance on verification, which can be used as a supplement to W3C verification. When you finally pass the XHTML verification, congratulations, you have taken a big step towards the website standard. It's not as hard as you think!
2. Intermediate Improvement
Next, we will improve the separation of structure and performance. This step is not as easy to implement as the first step. We need a conceptual change and learning and application of css2 technology. But it takes some time to learn any new knowledge, isn't it? The trick is to learn while learning. If you have been using the table layout all the time, you have never used CSS, and you do not have to rush to say goodbye to the table layout. You can replace the font label with a style sheet. The more you learn, the more you can do. Okay. Let's take a look at what we need to do:
* Use CSS to define the element appearance
We have developed a habit when writing the logo. When we want the font to be bigger, we use
H1, H2, H3, H4, H5, H6 {font-family:, Serif; font-size: 12px ;}
* Replace meaningless garbage with structured elements
Many may never know that HTML and XHTML elements are designed to express structures. Many of us are used to controlling performance with elements instead of structures. For example, a list may use the following identifier:
Sentence 1 <br/> sentence 2 <br/> sentence 3 <br/>
It would be better if we use an unordered list instead:
<Ul> <li> sentence 1 </LI> <li> sentence 2 </LI> <li> sentence 3 </LI> </ul>
You may say, "but <li> shows a dot. I don't want to use it ". In fact, CSS does not set what the elements look like. You can use CSS to turn off the dots.
* Add ID to each table and form
Assign a unique, structured tag to a table or form, for example
<Table id = "menu">
Next, when writing a style sheet, you can create a menu selector and associate it with a CSS rule, it is used to show table cells, text labels, and all other elements. In this way, you do not need to attach unnecessary attributes such as the height, width, alignment, and background color to each <TD> label. Only one attached tag (ID tag marked with "menu") is required ), you can perform special presentation layer processing for clean and compact code tags in a separated style sheet.
We have three main points to improve the intermediate level. However, there are many content and knowledge points, which need to be learned and mastered step by step, the layout will not be implemented using any table until the final implementation fully adopts CSS.
The purpose of establishing website standards is:
1. Simplify HTML code and reduce website construction costs;
2. Ensure that the website is valid in the long-term Internet environment;
3. Enhance website compatibility and adapt to different network devices and network terminals.
Then, let's take a look at the benefits of following standards for viewers:
1. Visitors can customize their desired forms based on their needs;
2. webpage content can be browsed by more special groups (including color blindness and weak vision );
3. The webpage loading speed will be significantly improved;
4. the viewer does not need to download another browser for a webpage to maintain the compatibility of the webpage in various browsers;
5. The webpage has a version suitable for printing.
Finally, let's discuss the benefits to webmasters and enterprises:
1. Easy to be crawled by search engines;
2. Reduced network bandwidth requirements and reduced server costs;
3. Improve website portability, scalability, and plasticity;
4. The increasing customer experience will attract more users to stop at your website and bring you more benefits.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
