作者 HTML5 是让 Web 变得更好的必要演变。在 HTML5 规范创建之前，我们使用（并且现在仍在使用）一组用来描述和链接文档以创建应用程序的拼凑系统。我们使用通用元素来模拟桌面开发中使用的丰富交互模块，并假设用户代理（浏览器）可以为最终用户执行什么操作。
这种混乱的优点在于它教会我们在过去几年中在开发方法上保持警惕——我们意识到，为了交付有效、可访问、可维护和可扩展的系统，我们必须在决策中，尤其是在规划和架构中保持专业性和智慧。
问题是，随着人们对 HTML5 新功能的兴奋，许多这些原则被遗忘或被认为过时了。它们并没有过时——Web 混乱的部分原因是，在 1999 年，许多人抛弃了所有其他东西，只专注于当时最流行的 Internet Explorer 6 和 DHTML。我们不要重蹈覆辙。
HTML5 热情的两面
现在，HTML5 有两件事值得我们兴奋：新元素更丰富、更有意义的语义，以及提供对浏览器和操作系统工作原理的深入访问的 API。前者使我们能够构建更丰富的界面，而后者使我们能够构建更复杂的应用程序。
所有这些都伴随着源代码查看（或在开发工具中检查）的优势，可以进行调试。您可以通过编写干净且有用的标记来宣传 HTML5。您也可以通过将标记视为二等公民来扼杀它，而标记仅仅是为了服务脚本而存在的。
标记爱好者对 HTML5 非常满意，这使得人们很容易进行升级——许多酷炫的新 博客模板 和 HTML 模板 正在被构建，并且 polyfills 被创建以允许使用新功能，而不留下过时的浏览器。
在应用程序开发方面，情况看起来截然不同，这令人感到难过。我唯一可能的解释是，来自桌面环境的人现在开始使用 HTML5 API，而无需关心标记。HTML5 的实用性允许比 XHTML 更宽容的语法，但这并不意味着我们可以简单地重新应用所有导致我们多年来在维护方面受阻的错误。
在我作为 Web 开发人员的职业生涯中，我意识到在构建 Web 应用程序时，一些事情非常有意义
- 如果有用于特定任务的元素，就使用该元素。该元素很可能附带免费的可访问性和交互功能，否则您将不得不模拟这些功能。
- 将 CSS、JavaScript 和 HTML 分开——这意味着您可以轻松地重构代码，而无需更改所有代码。这也意味着您可以与他人并行工作，而不是相互破坏对方的代码
- 永远不要依赖标记或内容——因为迟早会出现一些编辑工具，会破坏您创建的所有内容
这意味着很多事情
- 首先，这意味着内联样式根本是邪恶的，因为它们会覆盖样式表中的任何设置。只有在确切需要这样做或动态计算样式时才使用它们。
- 内联脚本也是如此。如果您在 HTML 中的某个位置有
onclick="foo()"并且foo()更改为bar()，则必须在每个 HTML 文档中重命名它（当然现在是一个模板，但这仍然意味着要查找您可能错过的引用）。 - 如果您不使用本机 HTML 元素来完成特定工作，而是使用 SPAN 和 DIV，则必须添加类才能使它们看起来和工作——并且还要模拟键盘可访问性。
- 您不能依赖任何元素的文本值。
<button>edit</button>使用“edit”作为某些功能的触发器，在您创建德语<button>bearbeiten</button>时，必须对 JS 进行本地化。
等等等等……来吧，Chris，没那么糟糕！
上述最佳实践已经提到了很多年，许多人厌倦了反复看到它们。毕竟，这是智能开发，也是后端技术中的标准做法。但是，最近我在查看 HTML5 演示（特别是 HTML5 圣诞日历中的演示）的源代码时，发现了很多“创造性”用法。以下是我的收获。
模拟导航列表
我遇到的第一个是绘图工具，该工具将创建的图形库作为背景。对我来说，这将是一个简单的列表
但我发现的标记是这样的
[...]
当然，这是由后端生成的。我的第一个抱怨是阴影图像，毕竟这是一个 HTML5 演示——只需使用 CSS3。我们还有三个生成的样式和双重类实例。当然，额外的类可以让你控制所有图像，而不是瓷砖，所以为什么不呢。但是由于图像周围没有真正的链接，点击处理程序必须从某个地方读取 URL。这里在 DOM 和脚本之间存在很多不必要的来回操作，这确实会减慢整个演示的速度。鉴于这也是从入口页面到编辑器的主要导航，这可以是 nav 元素内部的列表。列表将这些项目组合在一起，一堆 DIV 不会（例如，屏幕阅读器会告诉您列表中有多少个项目）。
我发现的另一个列表应该链接到刷新应用程序并具有层次结构，但它是一个扁平的列表，使用类来定义层次结构和分组
- Simple
- {name} [... repeated ...]
- {parent name}
- {name} [... repeated ...]
这可以，当然，您也可以改变键盘焦点，但为什么不
这将免费提供样式钩子和功能。链接和按钮非常适合触发功能——但似乎这太容易了。
单击（可能）这里以获得功能
如果我为应用程序构建一个按钮来触发某个功能，那么标记就是这样的
按钮 是触发功能的元素——无论是后端脚本还是 JavaScript。它们是键盘可访问的，具有禁用状态，并具有明智的开箱即用的样式，这些样式现在可以完全覆盖。类可以是按钮应该执行的操作的定义——而不是文本，文本会发生变化。您可以使用 ID，但类允许重复按钮（例如，在结果列表的顶部和底部）。
但我发现的按钮略有不同
Start Drawing
View the Mural
{title}
Draw
View
Help
因此，我们没有使用嵌套列表，每个按钮都有类，并且层次结构在嵌套中，而是一堆类和一个手工制作的 DIV 结构。我们没有真正禁用按钮，而是依靠不透明度，并且混合了内联图像和背景图像（如果都是背景图像，它们可以是一个雪碧！）。键盘导航将必须为此编写，如果要添加一个按钮，则必须想出另一个 ID。
HTML5 实际上有一个用于此的结构。有一个 menu 元素，其中包含 command 子元素。这些元素例如在 Chrome 的侧边栏中使用，应该是我们应该使用的元素。如果您希望它对所有人都有效，则应使用包含 button 元素的嵌套列表。
过度复杂的 DIV 结构使用相当广泛——这是另一个例子
Start Game
Help
High Scores
如有疑问，请为所有内容添加 ID 和类。
我遇到的其他按钮实际上是链接到 javascript:// 的链接，使用内联样式来指示层次结构
说到内联——这是一个很好的例子，一个工具生成很多代码，这些代码可以用一个事件处理程序和 事件委托 代替
[...repeated 20 times...]
请注意，如果按钮的图像由于某种原因无法加载（或您根本看不到它们），那么这个应用程序确实非常令人困惑——图像没有替代文本，也没有文本内容可以回退。我也非常肯定，in 和 out 处理程序会触发 CSS 可以更好地处理的视觉效果。
原因和影响
我知道这可能有很多原因，而且我相信当我赶时间或想快速完成工作时，也会做错事。但我们必须理解的是，现在我们有责任展示我们能做的最优秀的演示。
我们不能一方面宣扬开放式网络和技术以及查看源代码，另一方面却忘记过去十年学到的东西。我发现其中一些东西看起来像是 90 年代 Frontpage 或 Dreamweaver 生成的代码，导致了大量性能低下、难以维护的产品，这些产品要么仍然困扰着必须使用它们的人，要么每两年就要被替换一次。
我们肩负着教育新一代网络开发者的重任。忘掉一些东西比学习它要难得多，所以让我们不要从臃肿的代码和快速修复开始，这些代码虽然有效，但却忽略了提倡干净的代码以及思考你的产品对最终用户（考虑无障碍性）和将来维护你产品的人的影响。我们不是来宣传效果和产品，而是来推广工具，让任何人都可以轻松地构建出既酷又容易理解的东西。
HTML5 是关于将网络作为一个平台进行演进的，我们也需要与之同步发展，承担更多责任。我们有应用程序开发人员，也有标记语言爱好者。让我们让他们共同努力，构建既有出色功能又有干净语义的东西。
关于 Chris Heilmann
HTML5 和开放式网络的布道者。让我们修复它！
10 条评论