HTML和HTML5都可以自定义标签。在浏览一些网站的源代码后，你会发现一些网页中存在你不认识的标签和元素，但是这些元素却能被浏览器执行。这就是自定义元素。自由定义标签而不必使用预定义好的语义标签之后，更能语义化我们的内容。
在HTML5之前，文档的开头都是这样标记的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">而HTML5中文档的标记是这样的。
<!DOCTYPE>
<html>这就会导致一些新增的h5元素header、footer，测试过发现IE不能解析h5新增的元素。但是我们给这些元素添加一些样式，却能被浏览器解析。组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。
浏览器处理
我们一般都使用标准的 HTML 元素。
面代码中，<p>就是标准的 HTML 元素。
如果使用非标准的自定义元素，会有什么结果？
<greeting>Hello World</greeting>上面代码中，<greeting>就是非标准元素，浏览器不认识它。这段代码的运行结果是，浏览器照常显示Hello World，这说明浏览器并没有过滤这个元素。
现在，为自定义元素加上样式。
greeting {
display: block;
font-size: 36px;
color: red;
}运行结果如下
接着，使用脚本操作这个元素。
function customTag(tagName, fn){
Array
.from(document.getElementsByTagName(tagName))
.forEach(fn);
}
function greetingHandler(element) {
element.innerHTML = '你好，世界';
}`
customTag('greeting', greetingHandler);结果如下
这说明，浏览器对待自定义元素，就像对待标准元素一样，只是没有默认的样式和行为。这种处理方式是写入HTML5 标准的
由上面的测试结果可以得知，自定义标签可以正常显示，可以使用css样式，可以由JavaScript脚本控制事实上，浏览器提供了一个HTMLUnknownElement对象，所有自定义元素都是该对象的实例。
ar tabs = document.createElement('tabs');
tabs instanceof HTMLUnknownElement // true
tabs instanceof HTMLElement // true上面代码中，tabs是一个自定义元素，同时继承了HTMLUnknownElement和HTMLElement接口。
import HTML
有了自定义元素，就可以写出语义性非常好的 HTML 代码。
<share-buttons>
<social-button type="weibo">
<a href="...">微博</a>
</social-button>
<social-button type="weixin">
<a href="...">微信</a>
</social-button>
</share-buttons>上面的代码，一眼就能看出语义。如果将<share-buttons>元素的样式与脚本，封装在一个 HTML 文件share-buttons.html之中，这个元素就可以复用了。
使用的时候，先引入share-buttons.html。
<link rel="import" href="share-buttons.html">然后，就可以在网页中使用<share-buttons>了。
<article>
<h1>Title</h1>
<share-buttons/>
... ...
</article>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。