With the development of network technology, people's requirements for artificial intelligence are getting higher and higher, and they also expect machines to be able to read documents more conveniently and quickly like humans.
For a website, network exposure is the biggest gain for this website. Therefore, many enterprises and companies hope that their products will be easier to understand and familiar with, and a large part of the exposure of this website comes from themselves. Crawling and parsing by search engines. If a website can achieve very clear semantics when it is developed, then web crawlers can more easily acquire relevant knowledge of the website, increase website exposure and click rates, and bring attention and traffic.
So it is conceivable that web semantics means that in the development stage, programmers use some tags that can be easily parsed and recognized by machines. To put it bluntly, when programmers are developing, they need to clearly identify the title, then use the title tag to display it. , if it is a picture, use the image tag to display, if it is a paragraph, use the paragraph tag to display, etc., which of course also includes some seo related optimization processing. The main goal is to optimize for seo.
So how to achieve semantics, first to understand the following knowledge (the content is taken from Zhihu)
The so-called semantic, in simple terms, is to be able to understand the meaning of the language more clearly and intuitively. The so-called word must convey the meaning is this meaning. So what does semantics mean in the development process? It is to make it easier for the machine to read the code in addition to the developers being able to quickly become familiar with the code.
1. Semantic tags are only HTML, and CSS itself does not have semantics. The ID and class names of CSS can be semantically defined. HTML is a tag, CSS is an attribute.
2. Semantic tags are built on the basis of documenting pages. The web page is regarded as a document. The D (document) in the DOM and the document used in writing js have clearly told us that the computer regards the page as a document. A document, we can also classify the page as a kind of document.
3. HTML tags themselves are meaningful. Such as p---paragraph, li---list, img---image but some are non-semantic such as div---division and cannot represent the attributes and presentation styles of the content in the div tag.
4. HTML5 adds semantic tags such as <header><footer><nav><article>. based on the development habits of most people and the general website page presentation form on the basis of HTML, which is actually the original Commonly used specific div+class.
In this way, implementing web semantics requires the following:
1: Some content that can determine the display content attribute, display it with the corresponding label, such as H1~H6 for the title of the article, img for the picture and write the alt attribute of each picture.
2: It is clear and logical, such as setting inline attributes inside the tag according to the determined order of id, class, style, function, etc.
3: Naming conventions, naming according to a unified standard format, and realizing the name and meaning, and the purpose of the division of labor is clear, such as using id to associate the entire dom for js use, and using class to control page style
4: The DOM structure is clear, and the page hierarchy is easy to understand after removing the style
5: Use keyword, description, content, etc. to tell the machine what this website does
6: In order to maintain high code maintainability, use CSS selectors as much as possible to style the page and avoid using too many classes
It is helpful for web crawlers to identify web pages and programmers to maintain code, etc., for developers to comply with semantic specifications. Therefore, developers need to pay attention and strengthen the understanding and use of semantics.
Some semantic tags such as header nav section footer, nav is used to define the navigation area, there is no style itself, but the content is considered to be navigation in the syntax setting, section is a chapter of the document and can be used to store text paragraphs instead of div.