What is semantic html

Semantic HTML refers to: according to the structuring of the content (content semantics), selecting appropriate tags (code semantics) makes it easier for developers to read and write more elegant code while allowing the browser to The crawlers and machines parse well. Semanticization is beneficial to SEO and helps search engine crawlers better understand web pages, obtain more effective information, and increase weight.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

1. What is HTML semantics?

Based on the structure of the content (content semantics), select appropriate tags (code semantics) to facilitate developers to read and write more elegant code while allowing browser crawlers and machines to parse it well.

2. Why semantics?

• In order for the page to present a good content structure and code structure without CSS: in order to look good when running naked;
• User experience: such as title , alt is used to explain nouns or explain picture information, and the flexible use of label tags;
• is beneficial to SEO: establishing good communication with search engines, helping crawlers to crawl more effective information: crawlers rely on labels to Determine the context and weight of each keyword;
• Convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
• Convenient for team development and Maintenance, semantics and more readability are important trends in the next step for 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 the unsemantic tags p and span as little as possible;
• When the semantics are not obvious, you can use p or p, try to use p, because p has upper and lower spacing by default, which is beneficial for compatibility with special terminals;
• Do not 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. (No i);
• When using a table, use caption for the title, thead for the table header, tbody for the main part, and tfoot for the tail. The table header should be distinguished from the general cells. Use th for the table header and td for the cells;
• The form fields should be wrapped with fieldset tags, and the legend tag should be used to describe the purpose of the form;
• Each The description text corresponding to each input label needs to use the label label, and by setting the id attribute for the input and setting for=someld in the label label, the description text is associated with the corresponding input.

Recommended tutorial: "html video tutorial"

The above is the detailed content of What is semantic html. For more information, please follow other related articles on the PHP Chinese website!