Introduction to Semantic XHTML Tags

The first point to make is that people can judge the semantics of content through visual division, while search engines only see code. Search engines can only determine the semantics of content through tags. I really didn’t pay much attention to search engines before, but now I’m starting to care about it, because a large part of the page traffic comes from search engines. To make the page as search engine friendly as possible, we need to make the tags as semantic as possible.

In the past, with my superficial understanding of web development, I thought that writing a good standard-compliant page only required separating structure and presentation, and not using tags such as table and font. As for using divs throughout the page, I didn’t think there was any problem, because CSS is very powerful. However, all tags have their own semantics. The semantics of some tags are given below:

div semantics: Division (separation)

span semantics: Span (range)

ol Semantics: Ordered List

ul Semantics: Unordered List (unordered list)

li semantics: List Item

…………

If you ignore tag semantics and default styles and use div for all tags, you can actually write pages with good visual effects as long as you use CSS flexibly. However, in that case, although the visual requirements are met, the entire page has no semantics at all, and search engines still cannot understand it. So, remember:

The structure (html) is the key, and the style (css) is used to modify the structure. Therefore, you must first determine the HTML, determine the tags, and then choose the appropriate CSS.

Generally speaking, all tags have a default style, so a simple way to judge whether the semantics of a web page tag is good is to remove the style and see whether the structure of the web page is well organized and orderly, and whether it is still readable.

In addition, it is worth mentioning the h tag. The semantics of the h tag is title, and search engines are more sensitive to this tag, especially h1 and h2. For a semantically sound page, the h tags should be complete, orderly, and without gaps. In other words, we need to push down h1, h2, h3, h4 like this, instead of h1, h3, h4, and miss h2. For a well-structured web page, the h tag can organize the outline of a web page.

<<: A brief introduction to MySQL InnoDB ReplicaSet

>>: Summary of React's way of creating components