咱们常常用到的HTML5里，有三哥们儿特别频繁：p、section和article，你知道他们具体都有啥用途吗？做前端的小伙伴可得关注了！那就跟着我来了解下 HTML5中这仨哥们儿的不同之处，再看看W3C怎么解读和举例的呗！

1.p标签的应用

首先，我们得知道啥时候才能用 p 标签。这个 p 呐，就像是给你的大段文章戴上一顶帽子似的，专门用来包装。不过，p标签虽然看起来简单，但是它并没藏着什么厉害的门道，主要就是方便你去处理样式和脚本。那如果你想给某个段落搞点特殊的样式，或是动点手脚，那就可以考虑给他套个 p 标签了。举个例子比如你要在网页上放几句话或是一些简短的介绍，这时候用 hormones 标签就正好适合。

老铁们瞧见没？要是你看的就是目录里的内容，那就大大方方的用上P标签！这样写出来的文章分区清晰，浏览起来更容易哈~

别忘了，P标签其实挺有用的，尤其是在正确的位置，比如在无特别语义要求的文本段落里，用了它会让排版变得更好看。

2. section标签的特点

来，咱们直接进入正题，说说为啥要用section这个标签。你是不是觉得相比于单纯占位置的div来说，section算是个有料的容器元素了？没错，这不就是专门用于存放那些有趣内容的div~

HTML里，Section就是帮你把网页围起来的，比如搞个标题。这么一分类，整个页面就井然有序。就拿咱们天天上的博客网站来说，文章也能用section分门别类，看着清晰分明，各有所属。

虽然section这个东西有点儿事儿多，但它确实挺实用的，比如在文章中分段落、对话框里占标签啊啥的。要是想让网页看起来整齐点，那就用section呗！

3. article标签与section的区别

    
 
Apples
 
Tasty, delicious fruit!
 
    
The apple is the pomaceous fruit of the apple tree.
    

        
Red Delicious
        
These bright red apples are the most common found in many supermarkets.
    
    

        
Granny Smith
        
These juicy, green apples make a great filling for apple pies.
    

不知道article和section傻傻分不清？那就把它们想成兄妹俩，不过article比section要牛那么一点点。因为它更直观，独立性强，给你的感受也是完整的呢～

文章里，头部就是head和tail它们俩，能拼成个长条形的物体；相比之下，sections，就像好几块互相关联却又不够独立的地方。

大家可以试着用article标签搭配评论区使用哒！在微博这种地方，每个评论都能被包裹进article里面~

4. article内嵌article应用场景

我们来深入唠唠 article嵌套article，这样你就能更好地理解这种结构。HTML手册明确指出，内层的article必须与外层的item有联系。

所以，你写博客的时候，别忘了看看别人给的留言。其实，这些留言也是可以自己独立完成内容的，但是，还是要记得把它们融入到你的博客主体中。这样的话，当你看完整篇文章时，就会觉得条理清晰多了，就像是一颗树，既有大枝干还有小枝丫，每一部分都特别分明。

来，给大家科普下nav、aside、section、article这四个家伙是什么关系？

    

        
The Very First Rule of Life
        

    
    
If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.
    
...
    


    

        
The Very First Rule of Life
        

    
    
If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.
    
...
    

        
Comments
        

            
            
Yeah! Especially when talking about your lobbyist friends!
        
          

            
            
Hey, you have the same first name as me.
        
    

不只是常见的P啊、Section呀、Article，HTML5那儿还有一堆神奇的东西，比如Nav就是专门用来摆链接地址的区域，至于Aside，有点像咱们平时见到的那种侧边栏或者补充说明啥的。

挑 nav 和 aside 要用时，确保说清楚，也跟网页整体效果相符。比如，网站导航就摆nav；边角小东西可以试试aside。

说实话，“有问题先放用户这边，再到作者、执行者、制定者、理论派。”这句话就是让咱们多照顾用户感受，别忘了遵守HTML规矩和语法规则。

6.总结与思考

搞清楚了HTML5里的那些p啊、section啊什么的标签是干啥子的、在哪儿能用以后，咱们做网页就会顺手点，用户体验也会好很多，还对搜索引擎排名有益！

最终，咱们聊聊。你在日常中搞前端，怎么不把HTML5那几个重要的元素给玩明白点呀？像是p啦、section啦、article啦啥的，是不是有时分不清？想到啥就随便说说呗~