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

用语义明确的标签代替无意义的 <div>，核心是让每个标签“说清楚它是什么”，而不是只靠 class 名或注释来猜。这不光是写法问题，更关系到可访问性、SEO 和长期维护效率。<p><strong>明确页面整体结构</strong><br> 一个标准网页通常有头部、导航、主体、侧边栏和页脚。这些区域用语义标签直接表达，比一堆 <code>class="header" 的 <div> 更直观： <ul> <li>用 <code><header></header> 包裹网站 logo、主标题或区块标题

用 <nav></nav> 套住主导航链接（如首页、关于、联系）

用 <main></main> 定义页面唯一主要内容区（不能嵌套在 <header></header>、<footer></footer> 等内部）

用 <aside></aside> 放置与当前内容相关但非核心的信息，比如文章右侧的推荐列表或广告

用 <footer></footer> 承载版权信息、备案号或底部导航

区分内容单元与主题区块
不是所有内容都适合塞进 <div>。按内容性质选标签： <ul> <li>一篇独立完整的文章，用 <code><article></article>，比如博客正文、新闻稿、用户评论

一组逻辑相关的区块（如“关于我们”“服务介绍”“客户案例”），用 <section></section>，每个 <section></section> 最好有 <h2></h2> 或更高级别标题

<figure></figure> 配 <figcaption></figcaption> 专门处理图片/图表+说明文字的组合

<blockquote></blockquote> 表示引用他人内容，<q></q> 用于短句内嵌引用

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

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

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

• 先从外层结构入手，把 id="header"、class="nav" 这类 div 替换为对应语义标签
• 再检查内容区块，把 class="post"、class="sidebar" 换成 <article></article>、<aside></aside>
• 最后清理冗余 class，比如 <div class="content"> 在换成 <code><main></main> 后，class 往往已无必要
• 浏览器兼容性无需担心，所有语义标签在 IE9+ 及现代浏览器中均原生支持，旧版 IE 可用 html5shiv 轻量补丁

不复杂但容易忽略


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载