main、header、footer、nav、article、section的正确用法
HTML5添加了诸如main、header、footer、nav、article、section等大量新标签，这些新标签为开发人员提供更多的选择和辅助特性。
默认情况下，浏览器呈现这些新标签的方式与p相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。
标签main
main标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。
main标签的语义化特性可以使辅助技术快速定位到页面的主体。有些页面中有 “跳转到主要内容” 的链接，使用main标签可以使辅助设备自动获得这个功能。
示例：
<header><h1>WeaponsoftheNinja</h1></header><main>//网页的主体内容</main><footer></footer>//main标签应该在header标签与footer标签之间。
标签article
article是另一个具有语义化特性的 HTML5 新标签。article是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。
示例：
<h1>DeepThoughtswithMasterCamperCat</h1><main><article><h2>TheGarfieldFiles:LasagnaasTrainingFuel?</h2><p>Theinternetislitteredwithvaryingopinionsonnutritionalparadigms,fromcatnippaleotohairballcleanses.Butlet'sturnourattentiontoanoftenoverlookedfitnessfuel,andexaminetheprotein-carb-NOMtrifectathatis***gna...</p></article>//用于呈现独立及完整的内容<imgsrc="samuraiSwords.jpeg"alt=""><article><h2>DefeatingyourFoe:theRedDotisOurs!</h2><p>Felinestheworldoverhavebeenwagingwaronthemostpersistentoffoes.Thisrednemesiscombinesbothcunningstealthandlighteningspeed.Butchinup,fellowfighters,ourtimeforvictorymaysoonbenear...</p></article><imgsrc="samuraiSwords.jpeg"alt=""><article><h2>IsChuckNorrisaCatPerson?</h2><p>ChuckNorrisiswidelyregardedasthepremiermartialartistontheplanet,andit'sacompletecoincidenceanyonewhodisagreeswiththisfactmysteriouslydisappearssoonafter.Buttherealquestionis,isheacatperson?...</p></article></main>
请注意section和p的区别。
标签section
section也是一个 HTML5 新标签，与article标签的语义含义略有不同。article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用p。
<p>-内容组<section>-有联系的内容组<article>-独立完整的内容
标签header
header也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
与main类似，header的语义化特性也可以使辅助技术快速定位到它的内容。
注意：header用在 HTML 文档的body标签中。这点与包含页面标题、元信息的head标签不同。
示例：
<body><header><h1>TrainingwithCamperCat</h1></header>//适用于那些在多个页面顶部重复出现的内容，导航或简介信息<main><sectionid="stealth"><h2>Stealth&AgilityTraining</h2><article><h3>Climbfoliagequicklyusingaminimumspanningtreeapproach</h3></article><article><h3>NotrainingisNP-completewithoutparkour</h3></article></section><sectionid="combat"><h2>CombatTraining</h2><article><h3>Dispatchmultipleenemieswithmultithreadedtactics</h3></article><article><h3>Goodbyeworld:5provenwaystoknockoutanopponent</h3></article></section><sectionid="weapons"><h2>WeaponsTraining</h2><article><h3>Swords:thebesttooltoliterallypideandconquer</h3></article><article><h3>Breadth-firstordepth-firstinmulti-weapontraining?</h3></article></section></main></body>
标签nav
nav也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。
对于页面底部辅助性质的站点链接，不需要使用nav，用footer会更好。
示例：
<body><header><h1>TrainingwithCamperCat</h1><nav><ul><li><ahref="#stealth">Stealth&Agility</a></li><li><ahref="#combat">Combat</a></li><li><ahref="#weapons">Weapons</a></li></ul></nav>//用于呈现页面中的主导航链接</header><main><sectionid="stealth"><h2>Stealth&AgilityTraining</h2><article><h3>Climbfoliagequicklyusingaminimumspanningtreeapproach</h3></article><article><h3>NotrainingisNP-completewithoutparkour</h3></article></section><sectionid="combat"><h2>CombatTraining</h2><article><h3>Dispatchmultipleenemieswithmultithreadedtactics</h3></article><article><h3>Goodbyeworld:5provenwaystoknockoutanopponent</h3></article></section><sectionid="weapons"><h2>WeaponsTraining</h2><article><h3>Swords:thebesttooltoliterallypideandconquer</h3></article><article><h3>Breadth-firstordepth-firstinmulti-weapontraining?</h3></article></section></main></body>
标签footer
与header和nav类似，footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
示例：
<body><header><h1>Training</h1><nav><ul><li><ahref="#stealth">Stealth&Agility</a></li><li><ahref="#combat">Combat</a></li><li><ahref="#weapons">Weapons</a></li></ul></nav></header><main><sectionid="stealth"><h2>Stealth&AgilityTraining</h2><article><h3>Climbfoliagequicklyusingaminimumspanningtreeapproach</h3></article><article><h3>NotrainingisNP-completewithoutparkour</h3></article></section><sectionid="combat"><h2>CombatTraining</h2><article><h3>Dispatchmultipleenemieswithmultithreadedtactics</h3></article><article><h3>Goodbyeworld:5provenwaystoknockoutanopponent</h3></article></section><sectionid="weapons"><h2>WeaponsTraining</h2><article><h3>Swords:thebesttooltoliterallypideandconquer</h3></article><article><h3>Breadth-firstordepth-firstinmulti-weapontraining?</h3></article></section></main><footer>©2016CamperCat</footer>//用于呈现版权信息或者相关文档链接</body>
转载自：blog.csdn.net/weixin_43386439/article/details/90208824