Html skills: Semantize your code _HTML/Xhtml_Web page production

Html semantics seems to be a commonplace issue. If you search on Google, there are a lot of articles about semantics. Why semantic tags? I think this way: each tag of Html has its specific meaning, and semantic tags , that is, let us use appropriate tags at the appropriate locations to better understand both people and machines (machine can understand it as a browser and can understand it as a search engine). If my explanation is not clear enough, please Google.

How to use the right tags at the right place?
This is a simple understanding logic. For example, h1~h6 tags are for title classes; ul is for unordered lists ; ol is used for filled lists; dl is used to define lists; em, strong tags are used for emphasis... To put it bluntly, each English interpretation of the Html tag determines its semantics (later in this article, I will Put a comparison table of English definitions of commonly used Html tags for reference).
What is clear to both humans and machines?
The best way to check whether an Html page is semantic is to Remove the Css link on the page and see if the web page structure is in order and the page is still very readable. Why can you say this? Everyone knows that browsers have default styles (it is recommended to use Chrome Web Developer Tools for Chrome plug-in, or Firefox's Web Developer plug-in), such as h1~h6, will be bold/ The font size decreases sequentially, and the default styles for top and bottom margins, ul, ol, and dl all have default bullets, and strong has a bold style by default... Therefore, on the same page, Html with good semantics can be removed from the page Css It still performs well.
Another point is that good semantic coding is more friendly to search engines. Search spiders do not know your Css, but they can recognize Html tags.
The following is a simple example:

Copy the code

The code is as follows :

Mr. Think's blog

A common man who focuses on Web front-end technology, loves Php, and advocates a simple life.

Mr.Think's blog

Ordinary people who focus on Web front-end technology, love Php, and advocate simple life.

Through the above simple example and the rendering without any Css definition, it’s time to understand the difference between the two. If you are learning Html5, its header, footer, sidebar, article and other elements are all new Added semantic tags.
Semantic Html coding is a step towards high-quality front-end development. It means better following Web standards, and it can also keep your pages in order after removing styles. More about semantics For a more detailed introduction, you can Google or read Adang's "The Way of Web Front-End Development" Chapter 3.
Attachment : Comparison table of tag semantics in Chinese and English

标签名	英文全拼	中文翻译
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
b	bold	粗体
big	big	变大
blockquote	block quotation	区块引用于
br	break	换行
caption	caption	标题
center	center	居中
dd	definition description	定义描述
del	delete	删除
div	division	分隔
dl	definition list	定义列表
dt	definition term	定义术语
em	emphasized	加重
fieldset	fieldset	域集
font	font	字体
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平尺
i	italic	斜体
ins	inserted	插入
legend	legend	图标
li	list item	列表项目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	预定义格式
s	strikethrough	删除线
small	small	变小
span	span	范围
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上标
u	underlined	下划线
ul	unordered list	不排序列表
var	variable	变量