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

Introduction to Semantic XHTML Tags

Vue implements a movable floating button

MySQL table field time setting default value

What you need to know about creating MySQL indexes

How to run nginx in Docker and mount the local directory into the image

A simple method to implement Linux timed log deletion

Share some tips on using JavaScript operators

Small program to implement a simple calculator

Analysis of the ideas of implementing vertical tables in two ways in Vue project

Use elasticsearch to delete index data regularly

Why can't I see the access interface for Docker Tomcat?

Recommend

Detailed explanation of invisible indexes in MySQL 8.0

【Web Design】Share E-WebTemplates exquisite foreign web page templates (FLASH+PSD source file+HTML)

How to use Docker buildx to build multi-platform images and push them to private repositories

Div exceeds hidden text and hides the CSS code beyond the div part

js to realize the function of uploading pictures

Vue implements real-time refresh of the time display in the upper right corner

React sample code to implement login form

A tutorial for beginners to install and log in to mysql-8.0.19-winx64 (must-read for beginners)

How to create a responsive column chart using CSS Grid layout

Detailed analysis of SQL execution steps

MySQL 8 new features: Invisible Indexes

MySQL explain obtains query instruction information principle and example

Detailed explanation of CSS sticky positioning position: sticky problem pit

Sharing an idea of building a master-slave system for a large MySQL database

How to implement a password strength detector in react