HTML语义化标签入门：用对header、nav、main写规范网页

很多新手写HTML，通篇都是div套div，页面能出来，但搜索引擎和屏幕阅读器看不懂哪块是导航、哪块是正文。HTML语义化标签就是专门解决这个问题的：用有意义的标签替代无意义的div，让网页结构一目了然。今天老陈带新手入门，搞懂语义化到底怎么用。

一、什么是HTML语义化

语义化，说白了就是用对的标签表达对的内容。比如顶部放header、导航放nav、正文放main、底部放footer，而不是全部用div。浏览器、搜索引擎、读屏软件都能通过这些标签理解页面结构。对新手来说，语义化最大的好处是：代码更好读、SEO更友好、后期维护更省事。

二、最常用的语义化标签

下面这几个是日常写页面必用的，建议背下来：

• header：页头，放网站logo、主导航、搜索框。
• nav：导航区，放栏目链接，一个页面可以有多个。
• main：页面主体内容，整页只出现一次。
• article：独立内容块，如一篇文章、一条评论。
• section：按主题分节，比div更有意义。
• aside：侧边栏，放相关推荐、广告等次要内容。
• footer：页脚，放版权、备案号、联系方式。

三、一个语义化页面长什么样

举个最简单的结构例子，新手照着写就能用：

最外层用header包住logo和nav，中间main里放article写正文，右侧aside放推荐，底部footer写版权。这样从外到内层次分明，别人接手你的代码一看就懂。注意main一个页面只能有一个，别把侧边栏也塞进去。

四、新手最容易踩的坑

• 所有结构都用div：这是通病，能用语义标签就别用div凑数。
• main写多个：main代表主体，重复会出现结构混乱。
• 用section乱套内容：section要有标题才合理，纯布局别硬套。
• 忽略heading层级：h1到h3要有序，别跳级，利于SEO和阅读。

老陈总结

HTML语义化不是炫技，而是让网页结构清晰、搜索引擎好懂、维护轻松的基础功。核心就记住：header页头、nav导航、main主体、footer页脚，article和section做分块。行动建议：打开你正在写的页面，把没意义的div换成对应语义标签，改完你会发现代码清爽一大半。想系统学HTML、CSS、JS建站实战的，看老陈的课程，或在评论区留言，我发链接给你。