Shulou(Shulou.com)06/01 Report--

Editor to share with you whether semantics is a new feature of html5, I believe most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's learn about it!

Semantics is a new feature of html5, its functions are: 1, so that the page can show a better content structure, code structure; 2, to enhance the user experience; 3, conducive to SEO;4, so that the browser's crawlers and machines better parse; 5, to facilitate team development and maintenance.

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

1. What is HTML semantics?

Basically, it revolves around several major tags, such as H1~H6, li, strong em, etc. >

According to the structure of the content (content semantics), choose the appropriate tag (code semantics) to facilitate developers to read and write more elegant code while allowing browser crawlers and machines to better parse.

2. Why should it be semantic? What's the use?

In order to present a good content structure and code structure without CSS, the page can also look good when streaking.

Enhance the user's sense of experience: for example, title, alt are used to explain nouns or explain picture information, the active use of label tags

Good for SEO: establish good communication with search engines and help crawlers grab more effective information: crawlers rely on tags to determine the weight of context and keywords

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

Facilitate team development and maintenance, semantics is more readable, is the next important trend of the web page, W3C standards are followed by the team to follow this standard, can reduce differentiation.

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

Use as few non-semantic tags as possible, p and span

When the semantics are not obvious, either p or p can be used as far as possible, because p has a distance between top and bottom by default, which is beneficial to compatible special terminals.

Do not use pure style tags, such as b, font, u, etc., use the css setting instead.

Text that needs to be emphasized can be included in strong or em tags (browser preset styles, which can be specified in CSS without them), strong default style is bold (do not use b), em is italic (not I)

When using a table, the title is caption, the header is thead, the body is surrounded by tbody, and the tail is surrounded by tfoot. The header should be distinguished from the general cell, with th in the header and td in the cell.

Form fields are wrapped in fieldset tags and legend tags are used to describe the purpose of the form

The description text corresponding to each input tag needs to use the label tag, and the description text is associated with the corresponding input by setting the id attribute for the input and setting for=someld in the lable tag.

4. What semantic tags have been added to HTML5, describe them in detail.

1),

Define the sections and segments of the body part of the document.

2),

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

3),

Used to load non-body content in the page, independent of other modules. Such as advertisements, groups of links, sidebars.

4),

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

5),

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

6),

Defines a navigation section consisting of link groups, where links can be linked to other pages or other parts of the current page.

7),

Used to combine the title elements (h2~h7) of a page or section (section).

8),

Used to combine elements.

9),

Title the figure element. It is usually placed in the first child element or the last one of the figure.

10),

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

11),

Used 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. Like plug-ins.

16),

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

17),

Define a list of optional data, and use () with input to make a drop-down list of input values.

18),

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

19),

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

20),

Define different types of output in the same style as span.

21),

Progress bar, progress in operation.

22),

Define a date or time.

23),

Define encrypted content.

24),

Define command behavior.

The above is all the content of the article "is semantics a new feature of html5?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.