什么是语义化标签 · 八股题库 / Drills

中文English

一句话：标签名本身说明了内容的角色 ——header / nav / main /article / section /aside / footer，而 div 和 span 什么都没说。

关键是别答成「代码更好看」。语义化有两个实在的收益：

屏幕阅读器能导航。视障用户可以按「跳到主内容」「列出所有标题」来浏览 —— 这些功能依赖标签语义。一整页 div，读屏软件只能从头念到尾。
机器更容易认出正文。搜索引擎、阅读模式、读屏的「跳到主内容」都依赖main / article 这类标签（别说成「main 的排名权重更高」）。

会追问：「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 real benefits:

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.
Machines can tell where the main content is. Search engines, reader mode and a screen reader’s skip-to-main all rely on tags such as main and article (do not claim that main ranks higher).

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.