1. What is HTML semantics?
< basically revolves around a few major tags, like the title (H1~H6), List (LI), emphasis (strong EM), etc. >
Depending on the structure of the content (content semantics), choosing the Right Tags (code semantics) allows developers to read and write more elegant code while allowing browser crawlers and machines to parse well.
2, why should be semantically?
- In order to be in the absence of CSS, the page can also show a good content structure, code structure: In order to look at the bare-ben;
- User experience: For example title, Alt used to interpret nouns or interpret picture information, label labels;
- Facilitate SEO: and search engine to establish good communication, help crawlers crawl more effective information: Crawler relies on the label to determine the context and the weight of each key word;
- facilitates other device parsing (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
- Facilitate team development and maintenance, semantic more readable, is the next page of important trends, follow the standards of the standard team to follow this standard, can reduce differentiation.
3. What should you pay attention to when writing HTML code?
- Use as few semantic-free tag div and span as possible;
- When the semantics is not obvious, can use Div or P, as far as possible with P, because p in the default case has up and down spacing, to compatible with the special terminal is advantageous;
- Do not use a plain style label, such as: B, Font, u, etc., instead of using CSS settings.
- The text that needs to be emphasized, can be contained in strong or EM tag (browser preset style, can use CSS to specify without them), strong default style is bold (do not use B), EM is italic (without i);
- Use the table, the title to use caption, table head with THEAD, the main part with tbody surrounded, tail with tfoot surrounded. Table header and general cell to distinguish open, table head with th, cell with TD;
- form field should be wrapped with fieldset label, and use legend label to describe the form;
- The description text for each input tag needs to use the label label, and by setting the ID property for input, set For=someld in the Lable label to associate the explanatory text with the corresponding input.
4. What semantic tags have been added to HTML5, in detail.
See this front-end Danale blog.
Understanding the semantics of HTML
