Html semantic understanding and html semantic understanding
1. What is HTML semantics?
<Basically, there are several main labels, such as the title (H1 ~ H6), list (li), emphasis (strong em), and so on>
Based on the structure of the content (content semantics), select the appropriate tag (Code semantics) to facilitate developers to read and write more elegant code while enabling browser crawlers and machines to parse it well.
2. Why semantics?
- In order to present a good content structure and code structure on the page without CSS: to make the page look good during streaking;
- User Experience: for example, title and alt are used to interpret nouns or image information and label labels;
- Conducive to SEO: good communication with search engines helps crawlers capture more effective information: crawlers rely on tags to determine the weights of context and keywords;
- Facilitate the analysis of other devices (such as screen readers, blind readers, and mobile devices) to render webpages in a meaningful manner;
- This makes it easier for teams to develop and maintain web pages and make the semantics more readable. The teams that follow W3C standards all follow this standard to reduce differentiation.
3. What should I pay attention to when writing HTML code?
- Use as few divs and spans as possible;
- When the semantics is unclear, when div or p can be used, try to use p, because p has upper and lower spacing by default, which is advantageous for compatibility with special terminals;
- Do not use pure style labels, such as B, font, and u. Use css instead.
- The text to be emphasized can be included in the strong or em tags (the browser preset style can be specified with CSS). The default strong style is bold (B is not used ), em is italic (I is not needed );
- When using a table, the title should use caption, the header should use thead, the body part should be surrounded by tbody, and the tail should be surrounded by tfoot. The header and the common cells should be separated. the header uses th and the cell uses td;
- Form fields must be wrapped with the fieldset label and the legend label is used to describe the purpose of the form;
- The label must be used for the plain text corresponding to each input tag, and the id attribute is set for the input, and for = someld is set in the lable tag to associate the plain text with the corresponding input.
4. What semantic tags are added to html5.
See the blog of this frontend.
