这篇东西直接告诉你html5标签怎么用最省事，别去背那些没用的属性，直接看代码就能上手，解决你写页面结构乱、SEO权重低的问题。
说实话，刚入行那会儿我也觉得html5标签是个噱头，不就是div套div吗？后来被产品经理怼了几次，说页面加载慢、代码像天书，我才真去啃了这块硬骨头。现在回头看，html5标签真不是用来装逼的，是用来保命的。特别是现在百度对代码结构越来越敏感，你再用一堆class为box1、box2的div，搜索引擎根本不知道哪块是导航，哪块是正文。
咱们先说最基础的几个，header、footer、nav、main、article、section。别嫌我啰嗦，这几个是核心。以前我们写页面，头部用div class="header"，现在直接header。看着没啥区别，但机器看得懂。比如你写一个博客列表，每个文章块用article，里面再套section放标题和摘要，这样结构清晰，爬虫抓取的时候，直接就能识别出这是主要内容，而不是侧边栏的广告。
我有个朋友，之前做电商后台，页面全是div嵌套，层级深达十几层，改个样式能改半天。后来我让他试试html5标签，把导航部分换成nav，主要内容区换成main，侧边栏用aside。结果你猜怎么着？CSS选择器都变短了，调试速度提升至少30%。这不是玄学，是语义化的力量。
当然，别一上来就全换。有些老项目，牵一发而动全身，乱改会出bug。建议你先从新页面开始尝试。比如写个简单的落地页，试试用header放logo和菜单，用section分块展示产品卖点，用footer放版权信息。你会发现，代码读起来像人话，维护起来也轻松。
还有个小坑，就是form标签。html5里的form新增了很多属性，比如placeholder、required、pattern。别小看这些，能省不少JS验证的代码。比如输入邮箱，直接加type="email"，浏览器自动校验格式，用户填错了，浏览器自己弹窗提示，多爽。当然，别完全依赖前端校验，后端还得再查一遍，安全第一。
另外，audio和video标签也是好东西。以前嵌入视频得用flash，现在直接video标签，支持多种格式，还能加controls属性显示播放控件。不过要注意兼容性，有些老浏览器可能不支持，得准备备用方案，比如用JS检测，不支持的话再加载flash或者图片。
说到这儿，可能有人问，html5标签对SEO真的有用吗？我可以说，绝对有用。虽然百度说内容为王，但结构也是王道。语义化的标签能让爬虫更好地理解页面结构，从而更准确地索引你的内容。比如你用article包裹文章内容，爬虫就知道这是独立的文章块，而不是普通的文本。
最后，别被那些复杂的框架迷了眼。React、Vue确实好用，但底层还是html5标签。搞懂这些基础，你才能写出更健壮的代码。别嫌我啰嗦，代码这东西，越简洁越好。
本文关键词：html5标签
