网页设计不只是美观就行了，最关键的还是得有条理清晰、意思明了的代码。身为网页设计师，我明白HTML5标签的重要性，因为乱用会让整个内容变得杂乱无章。今天，我给你们说说怎么正确地用好这些标签，防止犯错。
My super duper page
Header content
My super duper page
理解section元素的真正含义
首先，section元素在HTML5里面，就是用来给整个文档分块的。你可不能就把它当作普通的盒子随随便便用。之前我就犯过这个错，把section当成普通的容器用了，结果页面乱七八糟，连搜索引擎都找不着北了。从那儿以后，我明白了，section一定得专门分出一个个独立的小块来，才不会搞混。
My super duper page
header和hgroup元素的正确使用
关于header和hgroup这俩玩意儿，我在工作中可是见多了。header本来就是给文档或某个地方加个头的，可有些人却误以为多用几次就能突出重点，结果反而把文档搞得乱七八糟。至于hgroup，它其实是用来把标题放在一起的，要是header里啥都没放，那用hgroup就有点画蛇添足。
nav元素的适用场景
My best blog post
记住一件事nav元素不是啥东西都往里装。nav主要是用来搞导航的那玩意儿。比方说，网页底部那些服务条款啊、版权声明之类的链接，其实用不着nav，直接用footer就行，它自己就能搞定这些事儿。
My best blog post
figure元素的灵活运用
请不要复制这段代码!此处不需要hgroup –>My best blog post
by Rich Clark
你知道吗？figure元素超级棒，它可以放图片、表格或者代码什么的。最牛的地方在于，它还能单独存在，不受主文档影响。有次我做项目时，把一堆图表放进了figure里，结果设计说要放到旁边，还是figure元素厉害，直接偸出来就行，不需要改整个文件。
My best blog post
by Rich Clark
form新属性的注意事项
My company
Established 1893
HTML5给我们带来了不少有用的form属性，比如那个required属性，让我们的表单变得更严格了。但是，有时候用得不对就会闹出笑话来。所以，知道怎么使这个属性才是最要紧的。
避免无意义的标签嵌套
My company
Established 1893
写代码的时候，我发现自己总是不小心把标签套来套去，其实就是没完全搞懂这些标签是干嘛用的。比如说，如果header里面啥都没有，那header这个标签就多余了。这样乱七八糟的嵌套，让代码难看不说，还不好维护理解。
通过实践学习最佳实践
实战经验告诉我这样做最好：尽量别在自动生成的代码里面加不必要的type属性。觉得奇怪？其实这些东西可能是CMS自动添加上去的，但是我们既然能掌控模板，干嘛不让它更清爽些？就为了让代码看着舒服，跑起来更快呗！
总结与提问
这些年学做网站，真心觉得会用好HTML5标签太重要了！这个不仅能让网站好看好改，还能提升用户体验，对改善网站在搜索引擎上的排名也有好处。所以，我就把自己学到的这些经验分享出来，希望能帮到更多的网页设计师们避免犯错。最后，我想问问大家：你们在做项目时有没有碰到过类似问题？怎么解决的？快来评论里分享下，别忘了点个赞和转发这样更多人就能从中受益。
 My company name
评论0