Home > Developer > Web Develop
With the popularization of the concept of Web2.0 and the popularization of the Organization, people's demand for user experience is more and more high, the front-end development is becoming more and more difficult, and the front-end development engineer is finally independent of the overall design and production part of the situation. As a follow-up to the code readability requirements, writing high-quality code is becoming an indispensable skill for front-end development engineers. Here, according to the data compiled a number of HTML-related code writing specifications.
Web page semantics
Depending on The meaning or scenario of the Web content, choosing the right Tag (code semantics) to host the content allows developers to read and write more elegant code while allowing browser crawlers and machines to parse well. For example, for a plain plain text, you can use the P tag, but use the H1-h6 label if the text is used as a caption .
Why should I make a semantic label
Some people from learning simple static page creation, all content with Div as a container, a set of hundreds of lines of code write down can write 10,000 Div, anyway, there is a powerful CSS to help us achieve the required design. But in fact, CSS layouts are only part of the Web Standard. In the three elements of HTML, CSS, JavaScript, HTML is the most important, the structure is the focus, style is used to modify the structure. The correct approach is to point to the HTML, determine the semantic label, and then choose the appropriate CSS.
A well-meaning layout has many advantages:
Page expressive and well-structured
Less code, less download time, search engine friendly
Code is well organized and easy to maintain
Reduced dependency on styles, good readability of styles, maximum compatibility with special end
How to determine if the label semantics are good
Aside from the non-semantic div and span, most tags have their own default styles. For example, the H1,H2,H3 series of labels, there will be bold, line margins and other default styles. In short, the simple and brutal way to determine whether a Web page label is good is to remove the CSS style, see if the structure of the web is well organized, and still have good readability.
You can refer to the code:
1. Code with bad semantics
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title></title>6 </Head>7 <Body>8 <Div>The semantics of</Div>9 <Div>Course Outline:</Div>Ten <Div>Why semantic tagging</Div> One <Div>The semantics of tags</Div> A <Div>The misunderstanding of label semantics</Div> - <Div>How to properly semantic your tags</Div> - <Div>Detailed implementation of common modules</Div> the <Div>Well-meaning layout benefits</Div> - <ahref= "new_file.html">More</a> - <Div>Strong page Expression</Div> - <Div>Labels are semantically clear and well structured</Div> + <Div>Less code, less download time, search engine friendly</Div> - <Div>Maximum compatibility with special segments</Div> + </Body> A </HTML>
Its manifestations are:
2. Code with good semantics:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title></title>6 </Head>7 <Body>8 <H1>The semantics of</H1>9 <H2>Course Outline:</H2>Ten <ul> One <Li>Why semantic tagging</Li> A <Li>The semantics of tags</Li> - <Li>The misunderstanding of label semantics</Li> - <Li>How to properly semantic your tags</Li> the <Li>Detailed implementation of common modules</Li> - </ul> - <ahref= "new_file.html">More</a> - <H2>Well-meaning layout benefits</H2> + <ol> - <Li>Strong page Expression</Li> + <Li>Labels are semantically clear and well structured</Li> A <Li>Less code, less download time, search engine friendly</Li> at <Li>Maximum compatibility with special segments</Li> - </ol> - </Body> - </HTML>
The form of expression is:
It can be seen that if the chosen label is almost entirely without semantics, then after the removal of the style page renders almost no structure, readability is poor, but if the use of semantic appropriate labels, the cotton industry is still good readability after removing CCTV. So we can try to remove the CSS style after the completion of the code to see if their pages are good readability, so as to exercise their own high-quality HTML code.
Excerpt from the "Writing high-quality code-web front-end development and cultivation of the road"
Code organization and optimization from HTML view
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
