With the continuous popularization of WEB standards in China, concepts such as separation of structural performance behavior, modularization, semantics, and elegant degradation have also become important items for assessing a front-end staff's understanding of WEB standards. Among them, due to the impact of the commercial value behind SEO, "Semanticization" has received outstanding attention. As a new front-end worker, I once simply believed that "semanticization" is a method of organizing (x) HTML structure using tags that are most beneficial to search engine weight.
After reading many front-end books and many articles by my predecessors, I began to realize the shallowness of my consciousness and slowly realized the value of "semanticization". The following content is only a summary of personal practice in daily life. It gathers the views of several seniors and stands on the shoulders of giants in order to see further.
What is "Semantic"
“Semantic” refers to the ability of machines to research and collect information with less human intervention, making web pages understandable by machines and ultimately benefiting humans. Specifically, to borrow a popular explanation from a netizen on the BI forum, "Semantic means not to treat your girlfriend as an ordinary friend." The following is a simple XML form example:
However, through CSS control, we can easily display "girlfriend" like "friends". If we only focus on the presentation layer, the label is just a "hook", which is provided for CSS and JS to process. So why do we still emphasize "semanticization", which will be discussed in detail below.
semantic meaning
1.Search engine
Regarding search engine optimization, many seniors have already given rich explanations about the weight of Hx, hidden text, etc., so I won’t go into detail here. Some time ago, a software called Wolfram (http://www.wolframalpha. com/)'s search engine has attracted attention. We know that Google will sort the search results according to the PR value of each website. Other search engines also have their own independent algorithms, and Wolfram claims to "understand" user input content. Make a judgment based on the premise. When I entered "who is adrian", Wolfram gave me such feedback, although the result was not very accurate.
Related to front-end work, isn’t the “semantic” we admire just about letting computers understand our content? With a simple example like this <acronym title="World Wildlife Fund">WWF</acronym>, the computer can understand that WWF deserves to be the World Wildlife Fund, not the World Water Forum. It is unrealistic for the computer to completely understand our content. Yes, even though search engines like Wolfram may be short-lived, the vision they pursue, making the world's knowledge computable, is indeed worthy of our pursuit.
2.User experience
Let’s take an example first. The following is the user registration form on Dangdang.com (https://login.dangdang.com/Register.aspx), and part of the XHTML structure is intercepted.
Let’s experiment with what will happen if we change <span class="span_n">Set Nickname:</span> to <label class="span_n" for="txtNickName">Set Nickname:</label>.
When the mouse clicks "Set Nickname", the text input box with the ID name "txtNickName" will automatically gain focus. The definition of the label label itself is to define a label (marker) for the control (http://www.w3school.com. cn/tags/tag_label.asp), all mainstream browsers have basically the same support for label. The browser's form control itself is a very mature interactive control. After testing by a hero in the CCS forest group, the label label is very effective for voice control operations. Also a very good experience.
The same is Dangdang.com, the product list on the homepage is still a small piece of XHTML code
The code intercepted is the price part. Regardless of the naming of the class, let’s experiment if we change "span class="del gray s10""￥94.00 "/span" to "del class="del gray s10" date=" ” cite=””》￥94.00《/del》《ins》￥46.00《/ins》, there is no visual change, but when we run naked around the page.
The results are obvious. As front-end workers, we also need to consider that the user's Internet speed may be too slow (perhaps he is using Thunder BT), resulting in the inability to load CSS, as well as the situation of mobile phone users, and choose the appropriate one. The cost of tags is very low. You only need to add some basic knowledge of HTML. In addition, the date attribute and cite attribute are very useful. Try copying the content into WORD 2007.
There is also the importance of the alt attribute of the abbr tag and the img tag for screen readers. Because conditions do not allow it, I cannot experience it personally. On the other side of the coast, there is already something like Section 508 to protect people with disabilities from being looked down upon by gov websites. .
3. Development efficiency
The semantic-rich web page structure has a significant effect on early development and later bug fixing. Specifically, it is like the following simple product list code.
Through "semantic" tags, the "hooks" in the product list are enriched. By adding id and class naming to the parent layer, the global performance in the product list can be controlled. For style modifications, under ideal conditions It can avoid changing the web page structure through back-end developers and save labor costs. However, returning to reality and facing the various needs of products and bosses, it is still unrealistic to completely change the style by just modifying CSS. Faced with large-scale For small needs and bugs, the best way is to reasonably reserve "hooks" for the page in the early development stage to facilitate later modification and use. At this time, rich semantic tags are quite practical.
For team collaboration, semantic ID and Class naming can make the structure clear to everyone in the team. Just imagine that a label with a class of red is changed to blue due to changes in requirements, and you can understand why semantic naming is needed.
In the past discussions on rasterization and frameworks, we have led to thinking about naming conventions. The following is only a discussion of naming methods and does not include the influence of other factors. Recently, I have come into contact with a complete set of layout specifications. I think most of them When people first came into contact with it, they were all like me. They felt dizzy with this kind of naming, such as "area_01", "layout_01", etc. Because they have never experienced the huge scale of projects that the team is taking over now, so they are not sure whether this method is appropriate. , but one thing is for sure, this does increase the learning cost of new people, and for future development, I think this method is also desirable. After all, in the long run, its purpose is also to improve the development of the team. Efficiency and conflict reduction, I think this is how YUI, Blueprint, and 960 Grid System came into being. This is just a personal conjecture, and I hope it can be corroborated in the future.
4. Industry standards
There are a thousand Hamlets for a thousand people. Similarly, a thousand front-ends can also write a thousand pages with the same performance but different structures. This is exactly the current situation in page reconstruction. Through CSS, we can fiddle with all aspects of the page at will. elements, but few people pay attention to the most basic HTML structure. On the one hand, the reason is the lack of semantics of HTML tags. The new tags in HTML5 solve this part of the problem to a certain extent. The further reason, I think, is the front-end work. The author’s indifference to the basics of HTML, as Gui Ge said, “A layman looks at the door, and an expert looks at the excitement.” “If you want to make a difference in this industry, specialization is a must. That is to say, if you don’t consider yourself development, there is no need to discuss the issue of “semanticization”.
The goal of "semanticization" is to achieve unified standards. The future Internet "must be an open Internet. It will not be like now where data cannot flow unimpeded and there are a large number of information islands and information blind spots." Microformats are a good practice. , open interfaces, and shared content will be discussed in detail below.
semantic practice
In the above content, most of the practical content has been interspersed, and here is a summary introduction.
1.Document structure
The simplest way to "semantize" is to start with the structure, choose the tags that best match the meaning of the content, review the "Authoritative Guide to HTML and XHTML" again, and think more about the meaning of the content instead of just making judgments based on the page renderings. Many times, we will face such a situation. To see a simple effect, in order to pursue reasonable semantics, we have to choose a solution that is not so easy to implement. Isn’t it tormenting ourselves? I think this is also a front-end worker’s conscience about WEB standards and his understanding of work. How to make balanced choices is also a knowledge. realazy has a very deep understanding (http://realazy.org/blog/2009/06 /29/engineer-vs-scientist/).
In the pre-production stage, you can also consider the future situation and reserve hooks for the page based on the content semantics. Of course, specific problems should be analyzed in detail. According to different project requirements, the development adopted should be flexible and adaptable. For example, for promotional special pages, since the need for later adjustments is not large, under the basic premise of meeting usability and accessibility, the development should be adopted. The rapid development mode focuses on restoring the effect of the design draft, but for the effect of large websites, the requirements are obviously different.
2. Naming rules
Standard naming schemes for ID and Class appear from time to time on the Internet. The overall principle is to name according to the meaning of the content. The advantages of semantic naming are obvious. Let’s borrow a picture from the Internet.
If you want to change the position of the sidebar, you only need to modify the CSS without changing the web page structure. For frequently occurring page modules, I personally recommend gradually forming your own naming convention during the development process, such as header/footer/main/hd/bd /nav/box/mode, etc., use hyphens "-" or camel case to form more complex names, such as site-nav/quick-menu/secondaryContent/.
But back to the specific situation, different projects should also choose the naming method according to the specific situation. Different naming rules should be used in combination. Large websites, such as Taobao, are more suitable to use a combination of rasterization and semantic naming. For pages Style modification can make corresponding adjustments quickly and agilely. For production, it can be quickly pieced together. For most declaration-type single pages, I personally recommend the use of structured naming. The page creator can complete the page quickly and easily. Instead of spending too much time thinking about naming,
3. Microformats
Microformat is a new method of embedding structured data in standard XHTML code. Simply put, it uses a set of established Class naming standards to declare the content of the document. Most people's understanding of microformats starts with hCard. Here is a simple hCard example (http://www.oppenheim.com.au/). This is the hCard applied to the footer by James Oppenheim.
Among them, vcard url fn given-name given-name adr locality region class names are all generated for formatting micro formats. You should also notice that several span tags are added in order to add Class names. So what is the significance of microformats? Through the Operator plug-in for Firefox, I exported my business card from my resume (http://adriancheng.name/resume.html)
I can import the exported vcf into various email clients as contact information, or import it into the address book in the mobile phone (http://tommyfan.com/blog/skill/add_phone_from_hcard/). It can be seen that through the microformat standard, you can It is convenient for various clients to process data in web pages. The role of microformats at this time is also similar to the API in web pages. Of course, microformats have a broader vision. For other format standards, you can visit http:/ /microformats.org/ Learn more.
Conclusion
The practice of "semanticization" is very simple. It can be said to be the most basic part of the front-end. However, due to various reasons, it has been misunderstood or ignored and has not received the attention it deserves. I write this article to sort out my past stage. The accumulation of learning, I hope it can give all readers some thinking about WEB standards.