TIL：HTML 标签可以自己造
原文链接：You can make up HTML tags
写前端时大家都默认 HTML 标签是一套固定的词汇表： div 、 span 、 p 、 h1 …… 想要新的语义就往上加 class。但其实你可以直接造一个标签出来，浏览器照样老老实实渲染它。
造一个标签试试
原文给出的例子，把 div 加 class 的写法：
<div class=cool-thing> Hello, World! </div>
换成自己造的标签：
<cool-thing> Hello, World! </cool-thing>
再配上 CSS：
cool-thing { display: block; font-weight: bold; text-align: center; filter: drop-shadow(0 0 0.5em #ff0); color: #ff0; }
浏览器就把 Hello, World! 按上面的样式渲染出来了：黄色加粗、居中、带一圈黄色光晕。
这不是什么歪门邪道的 hack，是 HTML 规范规定好的行为。浏览器遇到不认识的标签，会把它当成一个自定义元素（custom element），不会报错。
为什么带连字符就安全
如果你担心自己造的标签哪天被新版 HTML 抢先占用了，有个简单的保险：标签名里加个连字符（ - ）。
<article-header>...</article-header> <quote-body>...</quote-body>
HTML 规范明确把「带连字符的名字」这个命名空间留给了自定义元素，以后任何新出的标准 HTML 标签都不会带连字符。所以只要你的标签名里有连字符，就保证永远不会跟未来的 HTML 撞车。
告别数 </div> 的地狱
这招真正实用的地方在可读性。看一段典型的 div 嵌套：
<div class=article> <div class=article-header> <div class=article-quote> <div class=quote-body> ... 一堆 HTML ... </div> </div> </div> </div>
想在某层 div 里插点东西，光数那一串 </div> 哪个对哪个就能数到眼花，第一次基本不可能插对位置。
换成自造的语义标签，每个闭合标签都自带名字，一眼就能看出谁包着谁：
<main-article> <article-header> <article-quote> <quote-body> ... 一堆 HTML ... </quote-body> </article-quote> <!-- 想插在这里，清清楚楚 --> </article-header> </main-article>
小结
当然，如果已经有合适的内置标签（ header 、 article 、 nav 这些语义标签），该用还是用。真到了手里只剩 div 和 span 两个选择的时候，与其靠一堆 class 名硬撑可读性，不如直接造一个能说明用途的标签。