对HTML5标签的一些思考

还记得在春招的时候，某面试官让我手写代码，其中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;
  }

定义完之后，就是在这个新的标签元素里添加一些属性、方法了。和大学时课程上定义一个数据结构简直有异曲同工之妙。