html5语义标签仅提供基础语义，微数据通过itemscope/itemtype/itemprop叠加机器可读的结构化信息；二者配合才能让搜索引擎准确识别内容类型与属性。
HTML5语义标签本身不等于结构化数据，它们只是为内容提供基础语义；而微数据（Microdata）是在此基础上叠加机器可读的、明确类型的结构化信息。两者配合使用，才能让搜索引擎真正理解“这是一篇食谱，作者是李明，用时30分钟”，而不只是看到一段普通文字。
语义标签解决“是什么”，微数据解决“是什么东西”
像 <article></article>、<nav></nav>、<time></time> 这类HTML5标签，告诉浏览器和辅助工具“这段是正文”“这是导航栏”“这个是时间”。但它们不说明“这篇article是一篇菜谱”或“这个time是烹饪总时长”。微数据补上这一层：通过 itemscope 和 itemtype 明确声明实体类型，再用 itemprop 标注具体属性。
-
<article></article>表示一块独立内容，但没说它属于哪一类内容 -
<article itemscope itemtype="https://schema.org/Recipe"></article>才真正定义：这是一个食谱实体 - 接着在内部用
<h1 itemprop="name">番茄炒蛋</h1>等，把可见内容绑定到该实体的属性上
微数据必须依附于语义容器，不能孤立存在
微数据不是独立语法，它依赖现有HTML结构。所有 itemprop 必须出现在有 itemscope 的祖先元素内，否则会被搜索引擎忽略。
- 错误写法：
<p itemprop="name">咖啡机</p>（没有父级itemscope） - 正确写法：
<div itemscope itemtype="https://schema.org/Product"><p itemprop="name">咖啡机</p></div> - 推荐复用已有语义标签作容器，比如用
<article itemscope itemtype="..."></article>或<section itemscope itemtype="..."></section>，既保持结构清晰，又避免额外包裹
时间、价格等特殊值要用合适方式标记
纯文本容易被误读，微数据配合HTML5原生元素能提升准确性。
- 日期/时间：用
<time itemprop="datePublished" datetime="2026-06-10">昨天</time>，机器读取datetime属性，人看渲染文本 - 价格：配合
<data itemprop="price" value="299.00">¥299</data>，value提供无歧义数值，避免“¥299.9”被截断或误解析 - 隐藏属性：用
<meta itemprop="availability" content="InStock">，不干扰页面显示，但为结构化数据提供必要字段
嵌套对象需逐层声明作用域
当属性本身是另一个实体（如作者是Person），不能只写 itemprop="author"，必须嵌套一个完整的作用域。
- 错误：
<span itemprop="author">王芳</span> - 正确：
<span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">王芳</span></span> - 若作者信息分散在页面不同位置，可用
itemref关联，但更推荐集中嵌套，逻辑更清晰、调试更方便
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
