还记得在春招的时候，某面试官让我手写代码，其中HTML部分我用了header、section、footer等HTML5标签，写完之后就发问了：为什么要用HTML5标签呀？当时我就回答了一个语义化，然后就没然后了。
现在想起真是羞愧。再看HTML5标签，已经不似当年单纯，就仿佛看山不像山，看水不像水一样。
目前只要是前端团队比较厉害一点的，项目里总是离不开三大框架的身影，不论是V、A还是R，都始终贯穿着一个组件化的思想。而这个组件化的基础，就是HTML5标签。
HTML5标签，是组件，却更像是一种数据结构，它其中的内涵，以及设计思想和规范上来说，真是从众多解决方案里脱胎而得到的。举个例子，如果浏览器不支持HTML5标签，那就只能自己来造了，有一个库html5shiv，短短几百行代码完美诠释了HTML5的魅力。就拿这个创建自定义元素的函数来说，创建了一个相应的节点后，其实就等于创建了一个新的组件，或者说数据结构。
/**
* returns a shived element for the given nodeName and document
* @memberOf html5
* @param {String} nodeName name of the element
* @param {Document} ownerDocument The context document.
* @returns {Object} The shived element.
*/
function createElement(nodeName, ownerDocument, data){
if (!ownerDocument) {
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createElement(nodeName);
}
data = data || getExpandoData(ownerDocument);
var node;
if (data.cache[nodeName]) {
node = data.cache[nodeName].cloneNode();
} else if (saveClones.test(nodeName)) {
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
} else {
node = data.createElem(nodeName);
}
// Avoid adding some elements to fragments in IE < 9 because
// * Attributes like `name` or `type` cannot be set/changed once an element
// is inserted into a document/fragment
// * Link elements with `src` attributes that are inaccessible, as with
// a 403 response, will cause the tab/window to crash
// * Script elements appended to fragments will execute when their `src`
// or `text` property is set
return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
}
定义完之后，就是在这个新的标签元素里添加一些属性、方法了。和大学时课程上定义一个数据结构简直有异曲同工之妙。
