- Focus on content and structure
- The default CSS of the semantic tag
- Modular for team development and maintenance
- Different tags may have different levels of attention
- Semantic tags are more standardized, allowing the machine to understand HTML more
- Differentiating content weights will bring changes to SEO
Semantic tags, as the name implies, are tags that can be read directly.The earliest contact with HTML5, the semantics of HTML5 is not very deep understanding, but is very interested in several new features of Html, such as the canvas; Html5 semantic tags, header, footer, nav, etc. These are essentially In Div, we used div id="header", "footer" in the html4 era, and we could pretty much accomplish the same effect as the header and footer. Why does html5 have to split these divs apart as new labels?
Focus on content and structure
Prior to HTML5, DIV+CSS could actually render a web page well.HTML5 is not only satisfied with how to present a webpage, but also focuses more on the structure of the webpage and more closely focuses on the content of the webpage. We use divs to represent page elements, but these divs have no practical significance.In order to distinguish different structures, we often set different ids for these divs. The ID name marks the block that Div is responsible for.HTML5 creates different tags for these different blocks. We have browsed thousands of web pages, or read news, listen to music, or watch videos. Eventually you discover that literally millions of web pages actually have a similar structure: navigation bar, title, content, bottom, almost “million To be inseparable, html5 simply uses different semantic tags to represent different parts of the page.When you use these semantic tags, you can help you better understand the web framework. Even without CSS, HTML pages can exhibit good content structure and code structure.
Let's review a few HTML5 semantic tags:
- 1):article tag: Load displays a separate article content. For example, a complete forum post, a website news, a blog post, etc., a user comment, etc. artilce can be nested, then the inner artilce has an affiliation with the outer article tag. For example, a blog post can be displayed with article, and then some comments can be embedded in the form of article.
- 2) :section tag: Defines sections (sections) in the document.Such as chapters, headers, footers or other parts of the document.
- 3):aside tag: Used to load non-text content.For example, ads, group links, sidebars, etc.
- 4):hgroup tag: Used to combine the title elements (h1-h6) of a web page or section. For example, if you have consecutive h-series tag elements in a section, you can use hgroup to enclose them. <hgroup><h1>Heading 1</h1><h2>Heading 2</h2></hgroup>
- 5):header tag: defines the page combination of the document, usually some guidance and navigation information.
- 6):footer tag: defines the footer of section or document. In the typical case, this element will contain the creator's name, the document's creation date, and/or contact information. Example: <footer> © 2012 Baidu Read Before Using Baidu 京ICP证030173号 </footer>
- 7):nav tag: The navigation link is placed in the nav tag. The nav tag should have some of the main navigation links for the current page. For example, if a site's navigation links (such as home page, service information page, copyright information page, etc.) are displayed in the footer, the nav tag can be used. Of course, this is not necessary.
- 8):time tag: Defines the Gregorian calendar time (24-hour clock) or date, time and time zone offset are optional. This element encodes the date and time in a machine readable manner, and search engines can also generate smarter search results
- 9):mark tag: Defines the text with the mark.Use the <mark> tag when you need to highlight text.
- 10): figure tag: Specifies independent stream content (images, charts, photos, codes, etc.). The content of the figure element should be related to the main content, but if it is deleted, it should not affect the flow of the document.
- 11):figcaption tag: Defines the caption of the figure element.
The default CSS of the semantic tag
Semantic tags are not "patents" for html5. For example, h1, h2, and so on before html5 are semantic tags. They represent several levels of title; although we do not introduce any css in html, we can still see that the h tags have font enlargements. Bold effect. In fact, html itself is not represented. We see, for example, the h1 tag is bold, the font size is 2em, bold; strong is bold, do not think this is the performance of html, these html default css style The effect, so that when the removal or style loss can make the page show a clear structure is not the advantage of semantic HTML structure, but the browser has a default style, the purpose of the default style is to better express the html semantics, can be said The browser's default style and semantic HTML structure are inseparable.
Modular for team development and maintenance
Different semantic tags actually divide the web pages into different modules. The clear structure is more conducive to the decomposition of the modules and facilitates the cooperation and maintenance of the team.Or when you examine the elements yourself, when you see the "header" is naturally aware that this should be the head of the web page, you may also find a nav tag when you enter this tag, and you will quickly think that this is a navigation bar.Instead of seeing a bunch of divs, you can quickly make your own or someone else aware of the structure of the web page, as its name suggests.
Different tags may have different levels of attention
A web page has different parts, but not necessarily every part of it is of interest to you. For example, when you see the article I wrote here, you may be more concerned with the content of my articles and may not pay much attention to what my name is. Don't worry about how many fans I have.Even more exaggerated, when you see a wonderful movie, you don't pay attention to the plaster that pops up next to it. On the contrary, the advertisement will only make you angry.Different semantic tags actually split different content.
Semantic tags are more standardized, allowing the machine to understand HTML more
As you read above, you might say that when users look at web pages, they usually don't obsessively look at the source code to look at those semantic tags (like programmer brothers) like those of programmers.I'm sorry to say that it is my own) who knows which modules are used and which semantic tags are used.For people, whether you are a semantic tag or a div, you see live, rendered web pages! In fact, the semantic tag may not be seen (there is no meaning for the program GG), and may still be seen by the machine. For example, an extremely guest is using wordpress fashion to create a plug-in for the article.The principle of this plug-in is to traverse the h-tag in the article extraction content, and then generate a directory.In fact, content is extracted by identifying semantic tags. Let's talk about a similar but not an example of identifying semantic tags. We've seen people use some crawler plug-ins. That is, they grab blog posts from other people's websites and publish them on their blogs. The principle is that they need to be exported in the background. Take the URL of the web page, and then filter the class attribute of the div in the web page content to separate the navigation links (usually directory links) and content pages of the article.For example, the article directory of some websites uses the css style of div class="nav", and the content uses css of div class="content". We can match the nav and content to filter out the required information.However, not all websites use this class name. Some websites may use div class="post" to indicate the content of the article.In other words, class="nav", class="content" is not a standardized name.Then the nav, article semantic tags provide us with a standardization.If we design our own web pages in strict accordance with the rules of use of html5 semantic tags, it will be very helpful for crawlers to "read" our web pages.
Differentiating content weights will bring changes to SEO
As mentioned earlier, semantic tags make it easier for machines to understand the html we write, and different content has different levels of attention.Individuals absolutely can bring about certain changes to SEO. When we use a search engine, we find annoyingly searching and searching for words that are completely irrelevant.A closer look reveals that their search terms actually appear only on the ads of a website.If we can use semantic tags to place the emphasis of a web page, such as the content of an article, on an article, less focused ad words, and an article recommendation list in aside, it can successfully differentiate the weights of different content.In fact, search engines can give a higher weight to some semantic tags to improve search accuracy. Of course, this is an individual's expectation of search engines.If so, this will inevitably bring about changes to SEO.
There are many personal views I hope everyone can share!
This article has been printed on copyright and is protected by copyright laws. It must not be reproduced without permission.If you need to reprint, please contact the author or visit the copyright to obtain the authorization. If you feel that this article is useful to you, you can click the "Sponsoring Author" below to call the author!
Reprinted Note Source: Baiyuan's Blog>>https://wangbaiyuan.cn/en/html-5-you-why-want-semantic-tags-2.html