使用HTML5元素与自定义

时间:2016-01-01 18:03:35

标签: html css html5

我原来是iOS和移动工程师,最近,我一直在重新开始进行Web开发。为了尽可能深入地学习,我学到了很多东西,比如Webpack,更高级的SCSS,React,Redux等等。在我所有的研究之后,我仍然留下了一个亟待解决的问题。

为什么我应该在标记中使用HTML(特别是HTML5)元素,而不是使用div而不是header来创建所有自定义元素(例如标题,在<time />中包装日期,{ {1}}元素等)。作为一名iOS工程师,我经常发现设计要求使我构建自定义视图,几乎没有构建视图组件,如果我这样做,它们通常是我自己构建的nav s(相当于UIView,ish)。在网络开发中,与移动设备不同,有很多built in elements,我认为这是有原因的。

以另一种方式提问:

1)将更多HTML5元素集成到我的标记中是否具有特定的性能优势?

2)优点纯粹是语义上的吗?也就是说使用内置元素更多地为我的网站提供了更好的语义和可读性乍一看?

3)使用内置元素是否具有可访问性优势?

这似乎是使用HTML5元素的主要原因。支持可访问性实际上只是良好用户体验的延伸,并且总是值得实施。

4)如果我更多地使用HTML5标准元素,那不会给我的项目带来一些风险吗?

风险我的意思是引入意想不到的行为。如果我在我的标记中使用全部div并且只使用divs,那么我可以全面预测元素行为,特别是在样式方面。在这方面,所有的div都是平等的。如果我使用的HTML5元素完全没有读过,那么我是否会冒险注入不需要的(不一定是有害的)行为?

1 个答案:

答案 0 :(得分:2)

我明白你的意思,我从未真正考虑过这一点。但是,在查看了一些文章和消息来源之后,普遍的共识是没有证据表明使用自定义元素会导致任何性能问题超过标准HTML元素。然而,有一些消息来源表示为了语义正确性而坚持某种指导方针。

将更多HTML5元素集成到我的标记中是否具有特定的性能优势?

1)特别是,我在多个平台上遇到的标记几乎没有任何性能问题。

优势纯粹是语义上的吗?也就是说使用内置元素更多地为我的网站提供了更好的语义和可读性乍一看?

2)是和否。遵循HTML5元素标记确实使其他开发人员更容易找到错误或在某些时候重构标记。并没有HTML纯粹是为了语义方面的东西,尽管语义确实使事情变得更容易,在SEO方面,以及浏览器如何为屏幕阅读器读取网站对于创建完全可访问的内容至关重要网站上的网站。

使用内置元素是否具有辅助功能优势?

3)HTML5使得创建可访问的网站变得更容易,主要有两个原因:语义和ARIA。新的(一些当前可用的)HTML标题(如<header><footer><nav><section><aside>等允许屏幕阅读器轻松访问内容。之前,即使您为其分配了ID或类,您的屏幕阅读器也无法确定给定<div>的内容。

如果我更多地使用HTML5标准元素,是否会给我的项目带来一些风险呢?

4)我自己也没有遇到这个问题所以我对这个潜在问题没有经验。

我想说如果你想要它,但请记住主要使用HTML5元素的优点和使用自定义元素的缺点。我个人大部分时间都使用完全标准的HTML5元素,但有时候我可能会使用我自己的自定义元素,因为这种情况似乎会从中获益,例如为我编写自己的元素会产生更好的语义感与使用可能导致后来混淆的元素给我和其他开发人员。