能规范用标签的地方还是规范使用。
但就我自己的经验而言,这个还真的是看项目。
<button>
有些政府机构的项目,它们不要求页面多花里胡哨,但要求页面需要严格遵循一些设计准则。
特别是字体样式,行间距,页面颜色等等……特别有些政府公告的页面,配色布局在我们看来简直不忍直视,殊不知这个布局甚至可以适配到IE 6,殊不知这个颜色是色盲和色弱人群都可以清晰辨别的配色,殊不知有些听力障碍的人事在“听”这个网页的内容时,加粗的字体是可以重音念出来的等等(我相信很多前端分不清 和 的区别)。
对于这类项目,标签的规范使用尤为重要。该用<button>的时候别给我整些幺蛾子。/<button>
<custom-button>
对于一些产品/个人展示用的页面,项目要求是“新颖,酷炫,吊炸天”。所谓的“按钮”其实是指“
封装。
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, consequuntur!
Add to favorite
/<aside>
<article>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, assumenda?
/<article>
<button>Next Page/<button>
/
<footer>
copyright@2018
/<footer>
/<progress>
加上现在 Chrome 为首的一众浏览器又在大力拥抱 Web Components。用户可以自定义/封装标签,打开源代码全都是见都没见过的标签等等。所以针对这部分用户而言,为打到最终的体验效果,不得不用封装过后的可点击元素。
图为 Github 源码中使用的 Web Component
为什么要用语义化标签?
语义化是给其他程序猿,更是给搜索引擎。
比如我一个页面可以这样写
This is the heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, consequuntur!
我也可以这样写
Home
My Articles
<aside>
Like
Share
Add to favorite
/<aside>
This is the heading
<article>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, assumenda?
/<article>
<button>Next Page/<button>
/
<footer>
copyright@2018
/<footer>
明显后者的SEO友好程度更高,搜索引擎也更容易将你的内容准确的展示出来。
链接:https://www.zhihu.com/question/296706208/answer/503036289