当我开始学网页设计时，HTML的结构分块总是让人头疼。特别是HTML4的时候，看起来有点乱糟糟的，让人摸不着头脑。但是HTML5来了以后，引入了一些新的语法元素，比如section啊、article啊、nav啊、aside等等，这下子，文档结构一下子就清晰多了。所以今天，我想跟大家聊聊我对这些新元素的理解以及它们在实际项目中的运用。

	
	
	
		
第一章 小强的HTML5移动开发之路
		
1.1 HTML5概述
		
1.1.1 HTML5是什么？
		
1.1.2 HTML5和HTML4的区别
		
1.2 HTML5快速入门
		
1.2.1 HTML与XHTML
	

section元素的重要性

学HTML5的时候，第一次见到的就这个section元素，把网站的内容分成好几块。像在新闻网站里，用上这个元素能把新闻归类，每个板块都带上个明确的名字，用户看起来方便多了。我自己做项目时发现，用好了section元素，网页结构更清楚明了，维护和更新也简单多了。

	
	
	
		

			
第一章 小强的HTML5移动开发之路
			

				
1.1 HTML5概述
				

					
1.1.1 HTML5是什么？
				

				

					
1.1.2 HTML5和HTML4的区别
				

			

			

				
1.2 HTML5快速入门
				

					
1.2.1 HTML与XHTML
				

			

		

	

article元素的使用场景

吃了article元素后，我可以轻松搞定各个独立内容块儿。例如，在制作博客和新闻报道页面时，我会给每个文章包上article元素，这样就能保证它们都是完整又独立的！如果有人想把我这儿的文章拎走，它们仍然可以独立存在，不会影响到别人家的网站。这个小小的细节，对提升用户感受和网站排名都大有益处。

nav元素在导航设计中的作用

	
	
	
		

			
第一章 小强的HTML5移动开发之路
			

				
1.1 HTML5概述
				

					
1.1.1 HTML5是什么？
				
				

					
1.1.2 HTML5和HTML4的区别
				
			
			

				
1.2 HTML5快速入门
				

					
1.2.1 HTML与XHTML
				
			
		

	

导航得用nav元素，以前我会拿ul列表凑合下。HTML5出来后，就知道要用nav了。这样一来，代码就简洁明了多了，还方便屏幕阅读器的朋友理解。说实话，用nav元素真的提高了网站的可访问性。

aside元素的灵活运用

aside元素帮我更灵活地设计网页布局。比如，它能放些附属的但是不关键的内容，比如侧栏的广告或相关文章链接等。就算没了这些东西，核心内容也能独立运行，保持页面清晰明了，主次有序。在我做的项目里，合理利用aside元素，使页面布局更优，用户体验更好。

HTML5轮廓检测工具的实践应用

	
标题
	
	
副标题

为了让自己的文档排版整洁，我会用HTML5的布局工具检查页面。它能找出我在组织页面时可能犯的小错，比如说，有没有误用section或者article之类的语义标签。反复试错之后，我渐渐明白怎样才能更好地利用它们，使页面结构更加清晰易读。

总结与展望

学了用HTML5拆分网页文档，感觉section啊、article啊、nav啊、aside啥的很重要，让我编的代码简单易懂，一看就会修，网站做出来也更专业更好玩儿！以后还得研究研究HTML5还有哪些新高级功能，把网页整备技能再提上几个档次！

这篇文章就是想告诉大家如何去用HTML5新的文档结构划分类别，以及如何把这个弄明白后用到自己的项目里。你们有人试过这些新的元素吗？效果怎么样？请在下面留言说说你们的经历和感想，咱们一块儿互相提高！觉得这篇文章有用的话就点个赞或者分享出去，让更多的朋友们受益！