自学前端应优先使用header、nav、main、article、aside、footer六个语义化标签，而非堆砌div，因其能提升结构清晰度、seo效果和读屏器可访问性，并自带基础样式。
直接说结论：自学前端时，别一上来就堆 div，先用好 header、nav、main、article、aside、footer 这六个标签，就能写出结构清晰、SEO 友好、读屏器可读的页面——而且浏览器自带默认样式，连基础排版都省了。
为什么 div 堆出来的页面总被说“不专业”
不是因为 div 不能用，而是它完全没语义：浏览器、搜索引擎、读屏器看到 div，只当它是“一个空盒子”，根本不知道里面是导航、正文还是广告。你写十个 div 套娃，自己三个月后回看都要猜哪块是侧边栏。
而 header 一出现，机器立刻知道“这是页头”；nav 一嵌套，读屏器会提示“导航区域，共5个链接”；main 是唯一允许全文档只出现一次的标签，搜索引擎靠它锁定核心内容。
自学阶段最容易踩的坑：
• 把 nav 当成“只是放链接的容器”，结果把它塞进 div 里，语义就断了
• 在 article 外面再套一层 div，等于告诉浏览器“这段内容不独立”
• 用 section 替代 article 写博客正文，丢失了“可独立分发、可被 RSS 抓取”的关键语义
article 和 section 到底怎么选
这是新手查 MDN 最常卡住的地方。记住一句话：article 是“能单独存在、能被转发、能被 RSS 订阅的内容单元”，比如一篇博客、一条新闻、一个用户评论；section 是“为组织内容而设的逻辑分组”，比如“技术栈介绍”“项目亮点”“团队成员”这些同属一个大板块下的小节。
实操建议：
• 博客列表页里每条新闻用 article 包裹，整个列表外用 main
• 同一 article 内部，如果要分“背景”“实现细节”“效果对比”三块，用 section
• 不要为了“看起来像分块”就硬加 section——没有标题的 section 通常没必要
• section 必须有 h2–h6 标题，否则语义残缺（读屏器会跳过无标题的 section）
用 aside 做侧边栏时的兼容性陷阱
aside 不是“视觉上在右边的栏”，而是“与当前内容相关但可独立存在的补充信息”。比如博客正文旁的作者简介、同类文章推荐、标签云——这些即使删掉，也不影响主内容理解。
容易被忽略的关键点：
• aside 可以出现在 article 内部（如某段技术说明旁的术语解释），也可以在 main 外（整页通用的侧边导航）
• 如果侧边栏放的是广告或纯导航，用 nav 或普通 div 更合适，强行套 aside 反而误导读屏器
• 所有现代浏览器都支持 aside，但旧版 IE（≤10）不识别，需配 document.createElement('aside') 或用 polyfill，自学阶段可暂不处理
time 和 figure+figcaption 是加分项
这两个标签不写不影响页面跑起来，但加了立刻拉开和“只会写 div”的差距。尤其对博客、文档类页面：
time 的价值在机器可读：
• 写 <time datetime="2026-08-25">今天</time>，搜索引擎能提取发布日期，读屏器会读成“二零二六年八月二十五日”
• 避免手写“2026年8月25日”，机器无法解析为标准时间格式
figure+figcaption 解决图片/代码块归属问题：
• 图片必须用 figure 包裹，figcaption 写说明文字，否则读屏器只读 alt，不读上下文
• 代码块也适用：<figure><code>fetch(...)
• 注意：figcaption 必须是 figure 的第一个或最后一个子元素，放中间会破坏语义
真正难的不是记标签名，而是判断“这段内容在网页中扮演什么角色”。每次写新模块前，先问一句：如果去掉样式，仅靠屏幕阅读器朗读，用户能不能立刻听懂这块是干什么的？答案越明确，语义就越到位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
