Understanding of Web frontend and HTML semantics

1. What is a web front end

Web front-end is the development of web design and production, with the refinement of work, need someone to complete the production of artwork to the Web page, thus appearing the word Web front-end development. Web front-end development is mainly the use of HTML,CSS, JavaScript technology, the artwork provided by the artwork into a Web page. At the same time, need to take into account SEO and background data. Web front-end, which is equivalent to an intermediate platform that connects artists, backgrounds, and users.

2. What is HTML semantics?

1.) are basically around a few major tags, like the title (H1~H6), List (LI), emphasis (strong EM), etc.

　2.) Depending on the structure of the content (content semantics), choosing the right Tag (code semantics) allows developers to read and write more elegant code while allowing browser crawlers and machines to parse well .

3, why should be semantically?

1.) In the absence of CSS, the page can also present a very good content structure, code structure: In order to run naked, good-looking;

2.) User experience: For example title, Alt is used to interpret nouns or interpret picture information, label labels;

3.) in favor of 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;

4.) To facilitate other device parsing (such as screen readers, blind readers, mobile devices) in a meaningful way to render web pages;

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

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

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

2.) When the semantics are not obvious, can use either DIV or P, as far as possible with P, because p in the default case has the upper and lower spacing, compatible with the special terminal is advantageous;

3.) Do not use a plain style label, such as: B, Font, u, etc., instead of using CSS settings.

4.) Need to emphasize the text, can be included in the strong or the EM tag (browser preset style, can be specified with CSS without them), strong default style is bold (do not use B), EM is italic (without i);

5.) Use the table, the title to use caption, the 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;

6.) Form field to be wrapped with fieldset label, and legend label to explain the use of the form;

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

Understanding of Web frontend and HTML semantics