做网页最容易省掉的一步，是把文档结构写清楚。视觉可以后补，<div> 套 <div> 的页面，屏幕阅读器和搜索引擎都只能猜。
一份能用的骨架
html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>日和 · 随笔</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<a class="skip-link" href="#main">跳到正文</a>
<header>
<p><a href="/">日和</a></p>
<nav aria-label="栏目">
<a href="/writing">随笔</a>
<a href="/about">关于</a>
</nav>
</header>
<main id="main">
<article>
<h1>先把 HTML 骨架写对</h1>
<p>正文从这里开始。</p>
</article>
</main>
<footer>
<p>© 2026 日和</p>
</footer>
</body>
</html>lang="zh-CN" 决定语音合成用哪套发音。viewport 不做的话，手机端会按 980px 缩放，字小得没法点。
标题是大纲，不是字号
一个页面只放一个 <h1>。后面用 h2 / h3 嵌套，不要为了好看直接跳到 h4。字号用 CSS 调，层级留给文档。
css
.skip-link {
position: absolute;
left: 12px;
top: -40px;
}
.skip-link:focus {
top: 12px;
}键盘用户 Tab 一次就能进正文，这比任何进场动画都实在。
地标标签别省
| 标签 | 用途 |
|---|---|
header | 全站或文章头 |
nav | 导航，最好写 aria-label |
main | 每页一个 |
article | 独立成篇的内容 |
footer | 版权、次要链接 |
按钮用 <button>，链接用 <a href>。没有地址的「链接」是按钮；会跳走的「按钮」是链接。混用之后，键盘和读屏都会乱。
骨架对了，CSS 和 JS 才是在装修，而不是在修补一栋没有梁的房子。