Html semantic understanding

1. What is HTML semantics?

　According to the structure of the content (content semantics), selecting appropriate tags (code semantics) facilitates developers to read and write more elegant code, while allowing 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: in order to look good when running naked;
• User experience: For example, title and alt are used to explain nouns or explain picture information, and the flexible use of label tags;
• Conducive to SEO: Establishing good communication with search engines helps crawlers crawl more effective information: crawlers rely on tags to determine the context and weight of each keyword;
• Convenience for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
• It is easier for team development and maintenance, and semantics are more readable. It is an important trend in the next step of web pages. Teams that follow W3C standards all follow this standard, which can reduce differentiation.

3. What should you pay attention to when writing HTML code?

• Use as few unsemantic tags div and span as possible;
• When the semantics are not obvious, you can use either div or p, try to use p, because p has upper and lower spacing by default, which is beneficial for compatibility with special terminals;
• Don’t use pure style tags, such as: b, font, u, etc., use css settings instead.
• Text that needs to be emphasized can be included in the strong or em tag (browser default style, if you can specify it with CSS, you don’t need them). The default style of strong is bold (do not use b), and em is italic (do not use i);
• When using a table, use caption for the title, thead for the header, tbody for the main part, and tfoot for the tail. Table headers should be distinguished from ordinary cells. Use th for table headers and td for cells;
• The form fields should be wrapped with fieldset tags, and the legend tag should be used to describe the purpose of the form;
• The description text corresponding to each input label needs to use the label tag, and by setting the id attribute for the input and setting for=someld in the label tag, the description text is associated with the corresponding input.

4. What new semantic tags are added to HTML5, please describe them in detail.

　See this front-end master’s blog.