应使用语义化HTML标签替代无意义的，如明确页面结构，用等表达内容性质，避免误用并逐步改造代码。

用语义明确的标签代替无意义的

，核心是让每个标签“说清楚它是什么”，而不是只靠 class 名或注释来猜。这不光是写法问题，更关系到可访问性、SEO 和长期维护效率。

明确页面整体结构
一个标准网页通常有头部、导航、主体、侧边栏和页脚。这些区域用语义标签直接表达，比一堆 class="header" 的

更直观：

• 用
  包裹网站 logo、主标题或区块标题
• 用
  套住主导航链接（如首页、关于、联系）
• 用
  定义页面唯一主要内容区（不能嵌套在
  、
  等内部）
• 用
  放置与当前内容相关但非核心的信息，比如文章右侧的推荐列表或广告
• 用
  承载版权信息、备案号或底部导航

区分内容单元与主题区块
不是所有内容都适合塞进

。按内容性质选标签：

• 一篇独立完整的文章，用
  ，比如博客正文、新闻稿、用户评论
• 一组逻辑相关的区块（如“关于我们”“服务介绍”“客户案例”），用
  ，每个
  最好有
  或更高级别标题

• 配
  专门处理图片/图表+说明文字的组合

• 表示引用他人内容， 用于短句内嵌引用

避免常见误用
语义标签不是“换汤不换药”的 div 替身：

• 不等于“最上面那条横幅”，它可以出现在
  内部，作为该文章自己的标题区
• 全页只能有一个，且不能出现在
  、
  、
  或
  里
• 不一定非得是顶部菜单，侧边导航、页内锚点跳转列表也适用
• 不是“随便放点东西的地方”，它应与附近
  或
  内容相关，而非纯粹装饰性模块

逐步改造现有代码
不必一次性重写全部：

• 先从外层结构入手，把 id="header"、class="nav" 这类 div 替换为对应语义标签
• 再检查内容区块，把 class="post"、class="sidebar" 换成
  、
• 最后清理冗余 class，比如
  在换成

  后，class 往往已无必要
• 浏览器兼容性无需担心，所有语义标签在 IE9+ 及现代浏览器中均原生支持，旧版 IE 可用 html5shiv 轻量补丁

不复杂但容易忽略


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载