内容摘要：```html 工程师html /* 让文章看起来像随手写在便签上的，而不是正式文档 */ body { background: #f5f2eb; font-family: 'Georgi

```html

工程师html

我头一回用<table>画网页布局是2003年。那会儿在旧金山一家小公司写后端，工程前端同事请假，工程老板指着我说：“你，工程把首页那个两栏调出来。工程”我打开Dreamweaver，工程拖了个表格，工程设了cellpadding="0"，工程自以为很专业。工程结果在IE6里看着好好的工程，到了Netscape就错位两像素——客户用的工程是Mac，直接打电话骂人。工程

那两像素让我明白一件事：HTML不是工程设计工具，它是工程结构语言。你用<div>堆出一堆嵌套，浏览器照样能渲染，但屏幕阅读器读起来像乱码。你拿<br>当间距使，打印的时候全乱套。我见过一个工程师用<font>标签控制颜色，整个页面像打翻的调色盘，改一个色号要动两百行。

2010年之后我参与过几个政府项目，无障碍标准卡得很死。<h1>到<h6>必须按顺序来，<img>必须有alt，表单控件得配<label>。一开始嫌烦，后来自己用读屏软件试了一次——那感觉像戴着眼罩走迷宫。<div onclick>和<button>的区别，键盘用户最清楚：前者根本按不动。

语义化不是洁癖。有回我接手一个电商详情页，整页只有三个<div>，商品标题是<div class="title">，价格是<div class="price">。SEO团队抱怨收录差，我改成<h1>和<data>，两周后自然流量涨了12%。老板问我施了什么魔法，我说只是告诉浏览器“这是标题，这是价格”。

HTML5出来那阵子，大家跟风用<section>和<article>。我见过一个博客，每段文字都包在<article>里，连“阅读更多”按钮也是。其实<article>应该能独立分发，比如一条新闻、一篇帖子。你把导航菜单塞进<article>，就像把螺丝刀放进冰箱——东西没错，地方不对。

现在写React或Vue，JSX里还是那些标签。有人觉得HTML过时了，但每次浏览器解析你的组件，最后生成的都是DOM树。你写<div className="card">，和二十年前写<table>没本质区别——除非你用了<dialog>或者<details>这种原生组件。我去年重构一个弹窗，把三百行JS换成<dialog>加showModal()，代码少了，焦点管理还自动了。

有个实习生问我：“为什么不用<div>加role="button"？”我让他用键盘Tab走一遍自己的页面。他试了五分钟，发现根本聚焦不上去，得手动加tabindex，还得监听空格和回车。而<button>天生就支持这些。浏览器送你的礼物，别自己拆了重装。

最后说个真事。前年帮一个非营利组织改捐赠页，原来的表单用<div>模拟输入框，光标是假的，移动端键盘弹不出来。我全换成<input>和<select>，加了autocomplete属性。上线一个月，捐赠完成率从31%跳到58%。他们以为是文案优化，其实只是让浏览器知道“这是邮箱，这是信用卡号”。

HTML没那么多玄学。你尊重它的规则，它就帮你干活。你把它当画布乱涂，它就让你在凌晨三点调兼容性。就这么简单。

```