什么是语义化标签
What are Semantic Elements?
一句话：标签名本身说明了内容的角色 ——header / nav / main /article / section /aside / footer， 而 div 和 span 什么都没说。
关键是别答成「代码更好看」。语义化有两个可以量化的真实收益：
- 屏幕阅读器能导航。视障用户可以按「跳到主内容」「列出所有标题」来浏览 —— 这些功能依赖标签语义。 一整页
div，读屏软件只能从头念到尾。 - 搜索引擎知道哪块是正文。
main里的内容权重高于aside。
会追问：「section 和 div 到底怎么选？」—— 判断标准是「这块内容有没有自己的标题」。 有（能配一个 h2）就用 section； 纯粹为了布局套一层就用 div。为了样式而套的容器就该是 div， 硬换成 section 反而污染了大纲。
In one line: the tag name itself states the role of the content — header / nav / main /article / section / aside /footer — whereas div and span say nothing at all.
Do not answer “the code looks nicer”. Semantics buys you two things you can actually measure:
- Screen readers can navigate. A blind user can jump to the main content or list every heading — and those features depend on tag semantics. On a page of nothing but
divs, a screen reader can only read from the top. - Search engines know which part is the article. Content in
mainweighs more than content inaside.
Follow-up: “So how do you choose between section and div?” — the test is “does this block have its own heading?” If it does (you could give it an h2), use section. If it is a wrapper you added purely for layout, use div. A container that exists for styling should be a div — forcing it to be a section just pollutes the document outline.