Web Front-end and HTML semantic understanding, web Front-end html Semantics

Web Front-end and HTML semantic understanding, web Front-end html Semantics
1. What is web Front-end?

The WEB Front-end is developed from the design and production of WEB pages. With the refinement of the work, it is necessary for someone to complete the creation of the art map to the WEB page, thus the word WEB Front-end development appears. Front-end WEB development mainly uses HTML, CSS, and JavaScript technologies to convert the art map provided by the artist into a webpage. At the same time, SEO and background data must be taken into account. The WEB Front-end is equivalent to an intermediate platform that connects the artist, the background, and the user.

2. What is HTML semantics?

1.) Basically, there are several major labels, such as the title (H1 ~ H6), list (li), emphasis (strong em), etc.

2 .) based on the structure of the content (content semantics), select the appropriate tag (Code semantics) to facilitate developers to read and write more elegant code while enabling 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: to make the page look good during streaking;

2) User Experience: for example, title and alt are used to interpret nouns, pictures, and labels;

3) Good SEO: good communication with search engines helps crawlers capture more effective information: crawlers rely on tags to determine the weights of context and keywords;

4) facilitate the analysis of other devices (such as screen readers, blind readers, and mobile devices) to render webpages in a meaningful manner;

5.) This makes it easier for teams to develop and maintain web pages and make the semantics more readable. This is an important trend for teams that follow W3C standards to follow this standard and reduce differentiation.

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

1.) Use as few as possible the non-semantic tag div and span;

2) When the semantics is unclear, p can be used as much as possible when div or p is used, because p has upper and lower spacing by default, which is advantageous for compatibility with special terminals;

3.) do not use pure style labels, such as B, font, and u. Use css instead.

4 .) the text to be emphasized can be included in the strong or em tags (the browser preset style can be specified with CSS). The default strong style is bold (B is not used ), em is italic (I is not needed );

5) when using a table, the title should use caption, the header should use thead, the main part should be surrounded by tbody, and the tail should be surrounded by tfoot. The header and the common cells should be separated. the header uses th and the cell uses td;

6.) The form field should be wrapped with the fieldset label, and the legend label should be used to describe the purpose of the form;

7 .) the label must be used for the plain text corresponding to each input tag, and the id attribute is set for the input, and for = someld is set in the lable tag to associate the plain text with the corresponding input.