Web front-end and HTML semantic understanding

1. What is web front-end?

　WEB front-end was developed from web page design and production. As the work became more refined, someone was needed to complete the production of artwork and web pages, thus the term WEB front-end development appeared. WEB front-end development mainly uses HTML, CSS, and JavaScript technologies to convert artwork provided by artists into web pages. At the same time, SEO and background data need to be taken into consideration. The WEB front-end is equivalent to an intermediate platform that connects artists, back-end and users.

2. What is HTML semantics?

　1.) Basically it revolves around several main tags, such as title (H1~H6), list (li), emphasis (strong em), etc.

　2.) According to the structure of the content (content semantics ization), choosing appropriate tags (code semantics) makes it easier for developers to read and write more elegant code, while allowing browser crawlers and machines to parse it well.

3. Why semantics?

　1.) In order to present a good content structure and code structure on the page without CSS: in order to look good when running naked;

　2.) User experience: for example, title and alt are used to explain nouns or explanations The flexible use of image information and label tags;

　　3.) Conducive to SEO: establishing good communication with search engines helps crawlers capture more effective information: crawlers rely on tags to determine the context and weight of each keyword;

　4.) Convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;

　 5.) Convenient for team development and maintenance, semantics are more readable, and are Next step is the important trend of web pages. Teams that follow W3C standards all follow this standard, which can reduce differentiation.

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

　1.) Use as few unsemantic tags div and span as possible;

　2.) When the semantics are not obvious, you can use div or p, try to use p, because p has top and bottom spacing by default , which is beneficial for compatibility with special terminals;

　　3.) Do not use pure style tags, such as: b, font, u, etc., use css settings instead.

　　4.) 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);

　5.) 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;

　6.) Form fields should be wrapped with fieldset tags, and use legend tags to describe the purpose of the form;

　7.) Each input The description text corresponding to the 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.