Is semantics a new feature of HTML5?

Semanticization is a new feature of HTML5. Its functions are: 1. Allowing the page to present a better content structure and code structure; 2. Improving user experience; 3. Conducive to SEO; 4. Allowing browsing The server's crawlers and machines can better parse; 5. Facilitate team development and maintenance.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

1. What is HTML semantics?

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

According to The structuring of content (content semantics) and the selection of appropriate tags (code semantics) facilitate developers to read and write more elegant code while making browser crawlers and machines better Parse .

2. Why semantics? What is the use?

• In order for the page to present a good content structure and code structure without CSS: In order to look good when running naked;

• Improve user experience: For example, title and alt are used to explain nouns or explain picture information, and how to use label tags;

• Good for 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;

• Convenience for other devicesParsing (such as screen readers, blind readers, mobile devices), rendering web pages in a meaningful way;

• ## It is easier for the team to

  develop and maintain, and semantics are more readable. It is an important trend in the next step of web pages. Teams that follow W3C standards all follow this standard, which can reduce differentiation.

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

• Use the unsemantic tags p and span as little as possible;

• You can use p when the semantics are not obvious or p, try to use p, because p has upper and lower spacing by default, which is beneficial for compatibility with special terminals;

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

• 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, do not use them), the default style of strong is bold (do not use b), em is in italics (without i);

• When using a table, use caption for the title, thead for the table header, tbody for the main part, and tfoot for the tail. The table header should be distinguished from the general cells. Use th for the table header and td for the cells;

• The form fields should be wrapped with fieldset tags, and the legend tag should be used to describe the purpose of the form;

• The description text corresponding to each input label needs to use the label label, and by setting the id attribute for the input and setting for=someld in the label label, the description text and the corresponding input Relate.

4. What new semantic tags are added to HTML5, please describe them in detail.

1),

Define the sections and paragraphs of the main part of the document.

2),

A special section tag, which has clearer semantics than section. Define an independent, complete content block from the outside, such as a forum article or a blog text. . .

3),

Used to load non-text content in the page, independent of other modules. For example, ads, groups of links, sidebars. . .

4),

Define the header of the document and page. Usually it is some guidance and navigation information, which is not limited to the entire page header, but can also be used in the content.

5),

Defines the footer of the document and page, similar to the header.

6)、

Defines a navigation part composed of a link group, the links in which can link to other web pages or other parts of the current page.

7),

Used to combine the title elements (h1~h6) of a web page or section.

8),

Used to combine elements.

9),

Add a title to the figure element. Generally placed on the first child element or the last one of figure.

10),

Define the details of the element, the user can click to view or hide it.

11),

Used in conjunction with details to include the title of details.

12),

Used for canvas drawing.

13),

Define video.

14),

Define audio.

15),

Define the content of the embedded web page. Such as plug-ins.

16),

This tag defines media elements for media elements (such as video, audio).

17),

Define a list of optional data, used in conjunction with input () can create a drop-down list of input values.

18),

Visually show the text that you want to highlight to the user. For example, search keywords are highlighted to users in search results.

19),

Weights and measures, using red, yellow and green to represent a The range of the value.

20),

Define different types of output, the style is the same as span.

21),

Progress bar, running progress.

22),

Define date or time.

23),

Define the encrypted content.

24),

Define command behavior.

Related recommendations: "html video tutorial"

The above is the detailed content of Is semantics a new feature of HTML5?. For more information, please follow other related articles on the PHP Chinese website!