Html tips to make your code semantic

Html semantics seems to be a commonplace issue. Google will give you a lot of articles on semantics. Why do we need semantic tags? I think that each tag in Html has its own specific meaning, and semantics means that we use appropriate tags in appropriate places to make it easier for humans and machines (machines can be understood as browsers and search engines) to understand at a glance. If my explanation is not clear enough, please Google it.

How to use the right label at the right place?

This is a simple logic of understanding. For example, h1~h6 tags are used for titles; ul is used for unordered lists; ol is used for lists with content; dl is used to define lists; em and strong tags are used for emphasis... To put it bluntly, each English interpretation of an Html tag determines its semantics (later in this article, I will put a comparison table of English interpretations of commonly used Html tags for reference).

What is clear to both humans and machines?

The best way to check if an Html page is semantic is to remove the CSS link from the page to see if the page structure is in order and if the page is still readable. Why can we say that? Everyone knows that browsers have default styles (it is recommended to use Chrome's Web Developer Tools for Chrome).   plugin, or Firefox Web Developer   plugin), for example, h1~h6, there will be default styles of bold/decreasing font size, top and bottom margins, ul, ol, dl have default bullets, strong has a bold style by default... Therefore, for the same page, a semantically well-formed Html can still perform well even if the page CSS is removed.

Another point is that good semantic coding is more friendly to search engines. Search spiders don't recognize your CSS, but they can recognize Html tags.

Here is a simple example:

Through the simple examples above and the effect diagram without any CSS definition, you should understand the difference between the two. If you are learning Html5, its header, footer, sidebar, article and other elements are all newly added semantic tags.
Semanticization of Html coding is a step towards high-quality front-end development. It means better compliance with Web standards, and it also allows your page to remain in order after removing the style. For more detailed introduction to semanticization, you can Google it yourself or read Adam's "The Way to Practice Web Front-end Development"   Chapter 3.
Appendix: Chinese-English comparison table of tag semantics

Let me add the following

1. What is HTML semantics?

Choosing appropriate HTML tags makes it easier for developers to read and write more elegant code while allowing browser crawlers and machines to parse it well.

2. Why semanticization?

In order to make the page look good when it is naked, even without CSS, the page can also present a good content structure and code structure;
User experience: for example, title and alt are used to explain nouns or image information, and label tags are used flexibly;
Good for SEO: Establishing good communication with search engines helps crawlers to capture more valid information: crawlers rely on tags to determine the context and weight of each keyword;
Facilitates parsing by other devices (such as screen readers, blind readers, and mobile devices) to render web pages in a meaningful way;
Facilitating team development and maintenance, and making semantics more readable are important trends in the next step for web pages. Teams that follow W3C standards all follow this standard to reduce differentiation.

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

1. Use as few semantically meaningless tags as possible, such as div and span;
2. When the semantics are not obvious, if 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;
3. Do not use pure style tags and tags not supported by the specification, such as: b, font, u, center, strike, menu, etc. Use CSS settings instead.
4. Text that needs to be emphasized can be included in strong or em tags (browser default styles, don't use them if you can specify them with CSS). The default style of strong is bold (don't use b), and em is italic (don't use i);
5. When using a table, use caption for the title, thead for the header, tbody for the main body, and tfoot for the footer. The table header and general cells should be distinguished, the table header uses th and the cells use td;
6. The form fields should be wrapped with fieldset tags, and the purpose of the form should be explained with legend tags;
7. The description text corresponding to each input tag 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 can be associated with the corresponding input.
8. Do not omit the attributes of certain tags. The alt attribute of the <img> tag is used as replacement text when the image cannot be displayed normally. The title attribute of the <a> tag can be used as explanatory information and is displayed as a prompt message when the mouse hovers over it.

An interview question from Yahoo:

<P> What I write is not HTML, but loneliness. <br><br> I said:<br>Don't be obsessed with me, I'm just a legend

The problems include:

1. The difference between html and xhtml standards is that xhtml has a strict structure, tags must be closed, single tags need to be closed by adding / at the end, and tags must be lowercase;
2. Separation of structure and style. Do not use <br/> to control the style. Design the structure reasonably. Add p to each paragraph for line breaks. The style needs to be implemented using CSS.
3. Use tags reasonably and pay attention to the semantics of tags. Abbreviations can be marked with <abbr>, "I" can be marked with <cite>, and quoted speech content can be marked with <q>;

//Code reference is as follows
<p>What I write is not <abbr title="Hypertext Markup Language">HTML</abbr>, but loneliness. </p>
<p><cite>I</cite> said: <q>Don't be obsessed with me, I'm just a legend</q></p>

The above is the detailed content of Html techniques to semanticize your code. For more information about Html semanticization, please pay attention to other related articles on 123WORDPRESS.COM!