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

Editor to share with you why to web semantics, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Why should web be semantic?

First of all, people can judge the semantics of the content through visual division, and all the search engines see is the code. Search engines can only judge the semantics of content by tags. Because a large part of the traffic on the page comes from search engines, to make the page as search engine friendly as possible, make the tags as semantic as possible.

All tags have their own semantics, some of which are given below:

P semantic: pision (delimited)

Span semantics: Span (scope)

Ol semantics: Ordered List (sorted list)

Ul semantics: Unordered List (no sorting list)

Li semantics: List Item (list items)

If you ignore the tag semantics and default style, all tags use p, in fact, you can write a page with good visual effects, as long as you use CSS flexibly. But in that case, although it meets the requirements visually, the whole page has no semantics at all, and the search engine still can't understand it. So, remember:

Html is the key, and css is used to modify the structure. Therefore, first determine the html, determine the label, and then choose the appropriate css

Secondly, when SEO, we often use H2 to highlight headlines and strong to highlight keywords, which is indeed the embodiment of semantics. As far as the current search engine is concerned, it is not as intuitive as visitors to view the web page, it can only analyze the source code to reflect or guess what the site wants to express. For example, if we want to express the title of an article, we might write:

The title of the article

Visitors may understand what we mean, but search engines have to figure it out over and over again, and to better please search engines, we can write:

This is the title.

Tip: H2 has the highest weight, in a page, it is best to use 1 H2 to highlight your content, too much H2 will spread the weight of the entire page, is also very unfriendly to the search engine.

Semantic advantages:

It is easy for users to read and allows the page to show a clear structure when the style is lost.

In favor of SEO, the search engine determines the context and the weight of each keyword according to the tag.

It is convenient for other devices to parse, such as blind readers rendering web pages according to semantics.

It is beneficial to the development and maintenance, the semantics is more readable, the code is better maintained, and the relationship with CSS3 is more harmonious.

Today, we will first introduce the subject structure label, as shown in the figure:

1 、

The header that defines the document or part of the document should be used as a container for introducing content or navigating the link bar.

You can define multiple elements in a document, but it is important to note that an element cannot be a child of an, or element.

2 、

Describes an area with multiple hyperlinks that contains a list of links that jump to other pages or to other parts of the page.

Multiple elements can be defined in a document.

3 、

Define the main content of the document, which should be unique in the document and does not contain any content repeated in the document, such as sidebar, navigation bar links, copyright information, website logo, search box (unless the search box is the main function of the document).

It is important to note that there cannot be multiple tags in a document.

4 、

Elements represent independent structures in a document, page, application, or website that can be independently assigned and reused, such as in publishing, it may be forum posts, magazines or news articles, blogs, user-submitted comments, interactive components, or other independent content items.

When an element is used in nesting, the element represents the article related to the outer element. For example, elements that represent blog comments can be nested within elements that represent blog posts.

5 、

The element represents a part that is almost unrelated to the rest of the page content, is considered to be independent of the content and can be separated separately without affecting the whole. It is usually represented as a sidebar or embedded content.

6 、

Defines the footer of the most recent chapter or root node element. A footer usually contains information such as the author of the chapter, copyright data, or links related to the document.

When using footer to insert contact information, you should use elements within the footer element.

Be careful not to include or

7 、

Represents an area (or section) in a document, for example, a topic group in content.

If the element content can be divided into several parts, it should be used instead of.

Do not use an element as an ordinary container, especially if it is just to beautify the style or to facilitate scripting, use the

.

What is easy to confuse these tags is, so here is a special note:

"Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen."

Popularly speaking, it is more independent and complete than. It can be judged by whether the paragraph is complete and independent from the context in which it is located.

The above is all the content of the article "Why web semantics". 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.