符合W3C标准的HTML文档需严格满足结构合法性、语义准确性和解析容错边界：必须使用小写<!DOCTYPE html>作为首行，<html lang="zh-CN">紧随其后；<meta charset="UTF-8">须为<head>内首个标签（除注释外），<title>次之；语义标签如<header>、<main>等须按规范使用，不可仅图样式替代。
符合W3C标准的HTML文档不是靠“加个DOCTYPE”就完事的，关键在结构合法性、语义准确性和解析容错边界——浏览器会宽容，但校验器不会。
必须写对的<!DOCTYPE html>和根元素
这是整个文档合法性的起点。漏掉或写成<!doctype HTML>（大小写混用）、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">（过时DTD）都会让浏览器进入怪异模式，导致CSS盒模型、字体渲染等行为不一致。
实操建议：
- 严格使用小写：
<!DOCTYPE html>（注意末尾无空格、无换行） -
<html>必须紧跟其后，且显式声明lang属性，例如：<html lang="zh-CN"> - 不要嵌套
<html>，也不要在<head>外写<meta>或<title>
<head>里哪些标签顺序不能乱
W3C对<head>内元素顺序有隐式要求：字符集声明必须在任何可能触发渲染或脚本执行的标签之前；<title>必须是第一个可访问内容标签。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：中文乱码、页面标题不显示、SEO抓取失败。
正确顺序示例（不可省略或调换前两项）：
<head> <meta charset="UTF-8"> <title>页面标题</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head>
注意：<meta charset>必须是<head>中第一个标签（除注释外），否则浏览器可能已按默认编码解析后续内容。
语义化标签不能只图“看起来像”
用<div class="header">代替<header>，或把<nav>塞进<footer>里，虽能通过校验，但破坏了ARIA隐式角色和辅助技术流顺序。
使用场景判断要点：
-
<main>只能出现一次，且不能嵌套在<article>、<aside>、<nav>、<footer>、<header>内 -
<section>需有明确主题，不能仅用于布局；没有标题时优先考虑<div> -
<button>和<a>职责分明：触发JS行为用<button>，跳转URL用<a href>；禁止用<div onclick>模拟按钮
校验不是终点，而是调试入口
直接上传HTML到 W3C Markup Validation Service只是第一步。真正容易被忽略的是：校验器不会报错但实际影响兼容性的点。
比如：
- 使用
<picture>但未提供<img>作为fallback，旧版Safari会留白 -
<input type="email">在非Chrome浏览器中不自动验证格式，需配合required和JS兜底 - 自定义
data-属性名含大写字母（如data-UserId），虽合法，但JS中需用dataset.userid访问（自动转为小写）
W3C标准文档本身不规定JavaScript行为，但DOM API与HTML结构强耦合——一个没闭合的<p>可能导致后续document.querySelector选不到预期元素，这种问题校验器发现不了，只能靠结构意识和测试覆盖。
