Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you how to understand the semantics of HTML. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. What is HTML semantics?

According to the structure of the content (content semantics), choose the appropriate tag (code semantics) to facilitate developers to read and write more elegant code while allowing browser crawlers and machines to parse well.

2. Why should it be semantic?

In order to present a good content structure and code structure without CSS, the page can also look good when streaking.

User experience: for example, title, alt are used to explain nouns or explain picture information, the active use of label tags

Good for SEO: establish good communication with search engines and help crawlers grab more effective information: crawlers rely on tags to determine the weight of context and keywords

It is convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way.

Facilitate team development and maintenance, semantics is more readable, is the next important trend of the web page, W3C standards are followed by the team to follow this standard, can reduce differentiation.

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

Use as few non-semantic tags as possible, div and span

When the semantics are not obvious, when you can use div or p, use p as much as possible, because p has upper and lower spacing by default, which is beneficial to compatible special terminals.

Do not use pure style tags, such as b, font, u, etc., use the css setting instead.

Text that needs to be emphasized can be included in strong or em tags (browser preset styles, which can be specified in CSS without them), strong default style is bold (do not use b), em is italic (not I)

When using a table, the title is caption, the header is thead, the body is surrounded by tbody, and the tail is surrounded by tfoot. The header should be distinguished from the general cell, with th in the header and td in the cell.

Form fields are wrapped in fieldset tags and legend tags are used to describe the purpose of the form

The description text corresponding to each input tag needs to use the label tag, and the description text is associated with the corresponding input by setting the id attribute for the input and setting for=someld in the lable tag.

These are all the contents of the article "how to understand the semantics of HTML". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.