本章定位前面几章里我们已经做了三件事建立了前端开发的整体认知。写出了第一个 HTML 页面。认识了列表、链接、图片、表格和表单等常用内容标签。到这里很多初学者会进入一个新阶段页面里的内容会写了但一到“整个页面该怎么组织”时又开始乱了。比如一个页面里可能有顶部区域导航区域主内容区侧边栏底部信息区如果你只是随手写很多个div虽然页面也可能显示出来但结构会越来越模糊。等页面稍微复杂一些你自己回头看都不一定容易看明白。所以这一章要解决的问题是如何让网页不只是“有内容”还要“结构清楚”。这就会引出一个非常重要的概念语义化 HTML。本章学习目标学完这一章后你应该能做到理解什么是语义化 HTML。知道为什么页面结构不应该只靠很多个普通div堆出来。认识常见结构标签header、nav、main、section、article、aside、footer。能从页面功能角度思考“这个区域为什么存在”。能把一个简单页面改造成更清晰的语义化结构。初步学会拆解博客页、内容页这类常见页面的结构。一、什么是语义化 HTML“语义化”这个词刚听起来有点抽象但你可以先把它理解成一句话用更能表达内容含义的标签来组织网页结构。这里的重点不在“标签长什么样”而在“这个标签表达了什么角色”。例如页面顶部信息区域用header导航区域用nav主要内容区域用main文章内容用article侧边栏用aside页脚区域用footer这些标签的意义不是为了让页面自动变好看而是为了让页面结构更清楚。1. 为什么不是所有地方都用div很多初学者会问“我全用div能不能写页面”答案是能写但不够好。例如下面这种写法divdiv网站标题/divdiv首页 关于我 联系我/divdivdiv文章标题/divdiv文章正文/div/divdiv版权信息/div/div浏览器当然能显示但你很难一眼看出哪一块是页头哪一块是导航哪一块是正文哪一块是底部如果改成更有语义的结构headerh1网站标题/h1/headernavahref./index.html首页/aahref./about.html关于我/aahref./contact.html联系我/a/navmainarticleh2文章标题/h2p文章正文/p/article/mainfooterp版权信息/p/footer结构就清楚很多。这就是语义化最直观的价值让人和工具都更容易理解这个页面。二、为什么语义化很重要有些初学者会觉得“反正页面能显示为什么还要管结构是不是语义化”这个问题非常好。因为语义化的价值很多时候不是立刻体现在“显示效果”上而是体现在长期收益上。1. 可读性更好当你回头看自己写的页面或者别人接手你的代码时语义化结构会让人更快理解页面组成。比如看到header就知道是页头nav就知道是导航main就知道是主要内容footer就知道是底部区域这样比看到一长串无意义的div更容易读懂。2. 可维护性更强页面变复杂以后结构清楚会极大降低维护成本。如果一个页面里有几十上百行 HTML语义化标签能帮你快速定位哪一块负责导航哪一块负责正文哪一块负责侧边信息否则后期很容易越改越乱。3. 更有利于搜索引擎理解页面搜索引擎在分析网页时也会参考页面结构。如果页面结构清楚搜索引擎更容易判断哪部分是正文哪部分是导航哪部分是补充内容初学阶段你不需要把 SEO 想得很深只要先知道结构清晰的页面通常也更利于搜索引擎理解。4. 更有利于辅助工具理解页面一些辅助阅读工具会根据页面结构来帮助用户理解内容。比如哪一块是主内容哪一块是导航哪一块是附加信息语义化标签在这类场景下也会很有帮助。5. 更能帮助你形成正确的页面拆解思维这其实是对初学者最重要的一点。学习语义化不只是为了“标签写得专业一点”更重要的是你会慢慢学会先思考页面的组成和角色再开始写代码。这个思维会直接影响你后面学 CSS 布局、React 组件拆分甚至做更复杂项目时的结构能力。三、常见的语义化结构标签下面我们来认识最常见的几个结构标签。这一章不追求把它们讲得特别复杂而是先建立直觉。四、header页面或区域的头部header通常表示页面头部或者某个内容区块的头部。例如一个网站顶部区域headerh1我的博客/h1p记录前端学习过程/p/header这类内容通常放的是网站标题网站介绍logo顶部操作区要注意header不一定只能在整个页面里出现一次。某个文章卡片、某个区块内部也可以有自己的头部。你现在先把它理解成某个页面或内容区域的开头部分。五、nav导航区域nav用来表示导航区域也就是那些帮助用户跳转到其他页面或其他位置的链接集合。例如navahref./index.html首页/aahref./articles.html文章/aahref./about.html关于我/a/nav适合放进nav的通常是主导航分类导航页内目录导航不适合放进nav的是那些和导航无关的普通链接。你可以先这样判断如果这一组链接的主要作用是“帮助用户导航”就可以考虑使用nav。六、main页面的主要内容main表示页面的核心内容区域。例如mainh2最新文章/h2p这里是页面的主要内容。/p/main你可以把它理解成用户来到这个页面最主要就是来看这里的内容。比如在博客首页里main里通常会放文章列表重点推荐内容页面主说明内容而像导航、页脚、侧边说明等通常不属于main的核心范围。这一章你先建立一个很重要的意识一个页面通常应该有一个明确的主内容区。七、section主题分区section表示页面中的一个主题区块。例如sectionh2最新文章/h2p这里展示最近更新的内容。/p/section你可以把section理解成页面里一个有自己主题的小部分。它常用于最新文章区热门推荐区个人介绍区联系方式区什么时候适合用section一个很实用的判断方法是如果这一块内容可以有一个标题并且它围绕同一个主题展开那通常可以考虑用section。八、article可以独立成立的内容article通常表示一块相对独立、可以单独存在的内容。例如一篇博客文章一条新闻一篇帖子一个独立卡片内容示例articleh2我为什么开始学前端/h2p这是文章摘要内容。/p/article你可以把article理解成就算把这块内容从当前页面拿出来它本身也还是一块完整内容。比如博客首页里的每篇文章卡片就很适合用article。九、aside补充信息或侧边内容aside通常表示补充性的内容或者侧边栏中的附加信息。例如asideh2个人简介/h2p这里是作者介绍。/p/aside常见场景侧边栏简介推荐阅读广告位相关链接标签云你可以先这样理解aside不是页面最核心的内容但它对页面有补充作用。十、footer页面或区域的底部footer表示页面底部或者某个内容区块的底部。例如footerpCopyright 2026 我的博客/p/footer常见放置内容版权信息联系方式备案信息底部导航和header一样footer也不一定只能在整个页面里出现一次。某个article里也可能有自己的底部区域。十一、把这些结构标签放到一起看如果你分别看这些标签可能觉得都懂了但一组合起来又不太确定怎么用。我们先看一个博客首页风格的结构示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title我的博客首页/title/headbodyheaderh1我的博客/h1p记录前端学习过程/p/headernavahref./index.html首页/aahref./articles.html文章/aahref./about.html关于我/a/navmainsectionh2最新文章/h2articleh3从零开始认识前端开发/h3p这是文章摘要。/p/articlearticleh3我的第一个 HTML 页面/h3p这是第二篇文章摘要。/p/article/sectionasideh2作者简介/h2p一名前端学习中的初学者。/p/aside/mainfooterpCopyright 2026 我的博客/p/footer/body/html看到这里你可以试着这样理解这个页面header网站头部nav导航菜单main页面主内容section主内容中的“最新文章”区article每一篇独立文章摘要aside右侧补充信息footer页面底部这时候页面虽然还没加样式但骨架已经非常清楚了。十二、语义化的重点不是“长得像什么”而是“它为什么存在”这是这一章最核心的一句话。很多初学者会陷入一个误区“这块内容在页面最上面所以我就写header。”这个判断不一定完全对。更准确的判断方式应该是这一块内容在页面里承担什么角色例如因为它是导航所以用nav因为它是主内容所以用main因为它是补充信息所以用aside因为它是独立文章所以用article也就是说语义化不是看视觉位置而是看功能角色。十三、把普通结构改造成语义化结构这一部分很重要因为很多初学者真正写页面时一开始基本都会从普通div结构开始。我们来看一个对比例子。1. 普通写法divdivh1我的个人网站/h1/divdivahref./index.html首页/aahref./about.html关于我/aahref./contact.html联系我/a/divdivdivh2关于我/h2p我正在学习前端开发。/p/divdivh2最近文章/h2divh3我的第一篇学习记录/h3p这是文章摘要。/p/div/div/divdivp版权信息/p/div/div它的问题不是“不能用”而是结构角色不够清楚。2. 改造成语义化结构headerh1我的个人网站/h1/headernavahref./index.html首页/aahref./about.html关于我/aahref./contact.html联系我/a/navmainsectionh2关于我/h2p我正在学习前端开发。/p/sectionsectionh2最近文章/h2articleh3我的第一篇学习记录/h3p这是文章摘要。/p/article/section/mainfooterp版权信息/p/footer这样改完之后你会明显感受到页面骨架更清楚每一部分角色更明确后续写样式和继续扩展时更容易定位十四、新手最容易踩的几个误区1. 以为语义化标签会自动带来样式不会。header、nav、main这些标签本质上还是 HTML 结构标签。它们不会自动把页面变好看。它们的主要价值是表达结构和含义。页面美化和布局主要还是靠 CSS。2. 看到顶部就用header看到右边就用aside这也是一个很常见的误区。语义化标签的判断标准不是“出现在页面哪里”而是“它承担什么角色”。例如一个顶部弹窗不一定是header一个右边区域如果是主功能区也不一定就是aside3. 以为语义化后就完全不需要div这也不对。div仍然是非常常用的通用容器标签。只不过当有更合适的语义化标签时优先考虑语义化标签当确实只是一个普通包裹容器时使用div完全没有问题你可以这样理解div不是不能用而是不要把所有结构都无脑写成div。4.section和article总是分不清这很正常初学阶段很多人都会混。你可以先用一个简单方法区分section更像“一个主题区域”article更像“一个独立内容单元”比如博客首页“最新文章”这一大块可以是section里面每一篇文章卡片可以是article5. 语义化标签用得越多越好不是。语义化的目标是“结构合理”不是“把所有标签都塞进去”。如果为了追求语义化而写出过度复杂的结构反而会让代码更难理解。十五、如何拆一个页面的结构从这一章开始你要练习一种很重要的能力先拆页面再写代码。拿一个简单博客首页举例你可以按下面步骤思考。1. 先找页面的大区块比如页头导航主内容侧边栏页脚2. 再看主内容里有没有子主题例如主内容里可能包含最新文章推荐文章自我介绍这些子主题区就可以考虑用section。3. 再看哪些内容是独立单元例如每一篇文章摘要每一条新闻每一个独立卡片这类内容通常就可以考虑用article。4. 最后再补普通容器如果某些地方只是为了包一层结构暂时没有特别强的语义角色那就可以使用div。这样做的顺序通常会更稳先定大结构再定主题区再定独立内容最后才补普通容器。十六、本章实践练习这一章特别适合做“结构改造型练习”因为真正的难点不在语法而在判断。练习 1把旧页面改造成语义化结构从前两章你写过的页面里任选一个把它从普通结构改成语义化结构。至少尝试使用headermainfooter如果页面里有导航也可以加入nav练习 2模仿一个博客首页结构不要求样式只要求结构。页面至少包含网站标题导航一块主内容区至少两篇文章摘要一个侧边简介区域页脚建议你先在纸上或笔记里写出哪一块是header哪一块是nav哪一块是main哪一块是aside然后再开始写 HTML。练习 3拆解一个真实网页找一个你常看的博客、资讯站或文档站首页尝试回答哪一部分是页头哪一部分是导航哪一部分是主内容有没有侧边补充信息哪些内容适合看作article这个练习很重要因为它能帮你从“自己写页面”走向“会分析别人的页面”。练习 4写一个简单个人主页骨架页面至少包含顶部标题区导航区自我介绍区学习计划区联系方式区底部版权区你可以先只写结构不写 CSS。关键目标是能不能把每一块放进更合适的结构标签里能不能一眼看出页面骨架十七、学习重点提示这一章最重要的不是把所有语义化标签都背下来而是建立“页面结构意识”。请重点记住语义化的核心是让标签更能表达内容角色。判断标签时要看“这块区域为什么存在”而不是只看它长在哪。header、nav、main、section、article、aside、footer都是在帮助你搭页面骨架。div不是不能用而是不要无脑把所有结构都写成div。结构先于样式先把页面骨架搭清楚再考虑后面的 CSS 美化。如果你只记一句话请记住语义化不是为了换个标签名而是为了让页面结构更有意义。十八、本章小结这一章我们正式从“会写页面内容”走向“会搭页面结构”。你已经学习了什么是语义化 HTML为什么语义化有价值常见结构标签的基本用途如何从页面角色角度判断标签如何把普通结构改造成语义化结构如何拆解一个页面的骨架这一步非常关键因为后面你学习 CSS 布局时会越来越依赖一个清晰的 HTML 结构。如果骨架搭得不对后面的样式和布局就会越写越别扭。十九、课后思考题请你思考下面几个问题为什么说语义化的重点是“为什么这个区域存在”而不是“它在页面的哪个位置”section和article的区别你现在会怎么用自己的话解释为什么一个页面如果全是div后期会更难维护如果一个页面右侧区域放的是“相关推荐”为什么它通常更适合aside你可以不用追求标准答案但建议一定要自己试着解释一遍。只要你能把这些问题讲给别人听说明你已经不只是“见过这些标签”而是真的开始理解它们了。二十、下一章预告下一章我们会正式进入样式开发的第一步从零开始学前端 | 第五章CSS 入门与选择器基础到那时你会第一次让页面“变好看”也会开始理解 HTML 和 CSS 是如何配合工作的。