H5的最大优势就是可以在网页上直接调试和修改，而且更重要的是，它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统：Android和iOS，一个做应用的团队，怎么着也得准备两套班子来适应用户两种手机。而在Android体系中，版本的分裂和机型的五花八门，想要求得极致的体验，还得反复测试各种版本和机型。这无疑大大抬高了开发成本。
就像开发一个网站无需太多关注用户究竟是windows机器还是MAC机器（少许关注还是需要的，但比起开发软件所需要的关注，那就少多了），开发H5同样能够大幅降低成本。
第二个非常重要的优势在于版本升级。正如网站升级和用户无关一样，H5应用的升级，用户也不需要去update什么东西。这某种程度上就等于“强制升级”，这给开发者带来的好处也是巨大的：他们不需要考虑应用的各种版本的兼容性问题。
第三个也必须注意到的优势是，如果使用H5（甚至是更低版本的html）开发出网络应用（web app），它可以绕过苹果的应用商店，让用户直接从网站上下载，这可以避免让应用商店在收费上扣去3成的分成制度。
不过，这绝不是H5在时下忽然大火的原因。因为上述这些特点，H5早就具备了。
第一个重要的原因在于，一直到去年10月29日，万维网联盟才宣布，经过近8年的艰辛努力，H5标准规范终于最终制定完成了，并已公开发布。有了标准规范，给H5打下了非常重要的基石。对于互联网世界而言，标准规范几乎就是生命线。
第二个重要的原因在于移动互联网终于如燎原之势普及开来，而在中国，移动互联网的主要应用之一微信，又一直在很多模块里使用H5技术，比如微信公众账号。
微信的朋友圈中，除了图片和文字以外，能发送进去和朋友们分享的，都是网页。过去一般都是分享公众账号的一篇文章，但很快，商业组织们意识到，如果把他们的商业信息做得有趣一些，借助用户们的分享，他们的传播效率会高很多。于是，我们就会看到今天的朋友圈里动辄就会出现商业组织的H5制作，比如会议邀请，比如组织招聘，比如活动策划。
于是，有人开始惊呼：H5会杀死原生应用（native app）——不过，这句话其实好几年之前就有人喊过，Facebook一度还使用所谓的“网络应用”来替代原生应用（不过但没过多久，就退了回去。网络应用还是有很多问题，比如对交互性的即时响应）。
但我始终不这么认为。网站并没有杀死软件，web app也很难杀死native app，即便得到H5支持的web app。更有可能的是，一个native app里在部分甚至大部分模块里包含H5——事实上，微信就是这样的应用，Facebook所谓退回native app，本质上也是网页打包进入它的那个原生应用。很难有泾渭分明的web app或者native app。
还有一点是值得我们担心的，那就是今天对H5的使用，过于营销化了。朋友圈里动辙可见的H5，都是营销信息。这让我不得不想起了一度非常火爆的minisite，商业公司曾经疯狂在这种小型网站上烧钱，一个策划专题投入上百万都不算罕见，最终，minisite可以说是营销需求催动，也毁于过于营销化。普通用户图个新鲜第一次会看，第二次第三次，他们总有厌烦的一天。
真正能让H5大火的，绝不是今天朋友圈这些移动互联网里的“minisite”，而是能切实解决某种需求的H5式解决方案。一个我个人很看好的方向是视频。H5理论上是不再需要嵌入什么Flash技术了。不过，到目前为止，以谷歌、Firfox、Opera为一方，苹果为另外一方，就视频格式问题，还在继续纠结讨论中。
一、首先从功能与设计目标来看， H5专网页主要有以下4大类型：
1.活动运营型
为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。
2.品牌宣传型
不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
3.产品介绍型
聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。
这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。
4.总结报告型
自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。
二．形式为功能服务
在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。
1.简单图文
简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。
2.礼物/贺卡/邀请函
每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。
3.问答/评分/测试
问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。
4.游戏
从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。
三．为设计加分的4个要点
一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：
1.细节与统一
要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。
2.紧跟热点，利用话题效应
想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。
3.讲个好故事，引发情感共鸣
不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。
4.合理运用技术，打造流畅的互动体验
随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。
结语
随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。
section 表示一段专题性的内容，一般会带有标题。section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。section 不仅仅是一个普通的容器标签。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。article：这是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说，
article 会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。当 article 内嵌 article 时，原则上来说，内部的 article 的内容是和外层的 article 内容是相关的。例如，一篇博客文章中，包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。
section article ，语义是从无到有，逐渐增强的。div
无任何语义，仅仅用作样式化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。nav 和 aside的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。
