作为网络开发人员,您需要确保您的代码干净、有效且可访问。这也可以帮助您改进搜索引擎优化 (SEO)。幸运的是,您可以使用 W3C 验证器来确保您的工作符合标准。

在本文中,我们将仔细研究 W3C 及其不同的验证器。然后,我们将向您展示如何使用这些工具来验证您的代码并解释结果。最后,我们将了解一些常见的 W3C 验证错误以及如何修复它们。开始吧!

什么是 W3C 验证?

W3C 代表万维网联盟,这是一个监督整个网络编码标准的国际组织。它提供验证器服务来帮助您验证您的 HTML 和 CSS 代码是否有效且没有错误。

CSS验证器叫做Puzzle,它将基于W3C web标准。

HTML 验证器的工作方式非常相似。它验证 HTML、XHTML、SMIL、MathML 等 Web 文档的标记有效性。

通过遵循这些网络标准,您可以确保您的内容易于使用且易于访问。这些工具还将帮助您验证工作的跨平台兼容性,从而创造更好的用户体验 (UX)。反过来,这可能会提高您的 Core Web Visibility 分数并改善您的 SEO。

如何使用 W3C 验证代码

如前所述,W3C 验证程序会扫描您的 HTML 和 CSS 代码,以确保它们符合该组织制定的 Web 标准。本教程将向您展示如何使用这些工具来检查您的工作。

验证 HTML 代码

让我们从 HTML 验证器开始。您可以输入要检查的文档的 URI,上传包含代码的文件,或在提供的字段中输入要验证的标签:

在提交页面或文档进行检查后,验证器将生成一个列表,其中包含与以下内容相关的所有错误和警告HTML代码:

理想,您需要零错误和警告。然而,这并不总是可能的,因为验证器不会考虑用户可以看到的所有内容。

例如,如果你有一张带有渐变的图像,验证器将抛出一个错误,指出图像和背景之间的对比度不清晰。但是,您可以通过人工检查清楚地区分。

请注意,如果您的页面包含任何 JavaScript 或 CSS,HTML 验证器将不会对其进行检查。为此,您需要为 CSS 使用 W3C Jigsaw 工具(我们稍后会谈到)或为 Javascript 使用 JSHINT。

验证 CSS

CSS 验证器的工作方式相同。提交 URI、文档或标记进行验证后,您将获得一个包含错误和警告的页面:

如您所见,CSS 和 HTML 结果都非常详细。让我们探讨如何解释它们。

如何解释验证器结果

正如我们所见,验证器生成两种不同的输出:错误和警告。您通常可以忽略警告,因为它们不会突出显示任何严重问题。但是,发布无错误内容是一种很好的做法。

错误和警告都会显示问题所在的行号。他们还提供了有关如何解决问题的建议:

如果您单击错误或警告提供的链接(例如,从第 1 行第 16 列;到第 2 行第 16 列),验证器将突出显示代码中的相应行:

请注意HTML验证器发现该错误会影响依赖屏幕阅读器等辅助工具访问在线内容的用户。作为编码人员很容易忽略这些可访问性问题。但是,它们可能会对您的听众产生不利影响。我们将在下一节中仔细研究这些常见错误。

常见的 W3C 验证错误

CSS 和 HTML 验证器都会突出显示代码中的任何错误。一些最常见的问题包括:

  • 未闭合的元素。向页面添加新元素需要打开和关闭标记。当您收到此错误时,您还没有包含结束标记。这是使用网格时非常常见的问题。
  • 缺少 alt 标签。每个图像都需要一个 alt 标记,如果图形加载失败,将显示该标记。它描述了图片,屏幕阅读器会读出它。添加 alt 标签是一项基本的可访问性要求。
  • 标题标签使用不当。当开发人员使用 标记作为特定副标题的字体样式时,就会出现此 CSS 问题。选项卡是为导航而非样式目的而设计的,因此应使用 font:size=# 属性调整非导航字幕的大小。

您可能还会注意到一些解析错误。这些表明您的代码中存在错误,但验证器并不总是向您显示问题出在哪里。你需要做你的工作来找到问题。

下面是一个解析错误的例子:

当 CSS 样式表包含 HTML 元素时会出现此错误。尽管 CSS 验证器不提供错误的行号,但您可以简单地复制提供的代码块并在您的代码编辑器或 IDE 中对其进行编辑。

如何修复常见错误

Lucky 最重要的是,W3C Validator 会告诉您在哪里可以找到错误以及如何修复它们。例如,如果您缺少 alt 标签,验证器会告诉您需要将其包含在何处。

如果您有开始标签,验证器不会告诉您结束标签在哪里。但是,它会为您提供打开标签的位置,因此您可以简单地导航到该代码块并添加缺少的标签。

此外,如果您在验证器中使用直接输入选项,将显示完整代码并突出显示错误。因此,您可以将其与 IDE 中的原始代码进行比较,以更快地查找和修复错误。

结论

使用 W3C Validator 可以提高网站的整体性能。它使您能够避免代码膨胀、解决可访问性问题并修复常见错误。所有这些元素都会带来更快的加载时间和更好的用户体验,进而提升您网站的搜索引擎优化。

正如我们所见,您可以使用 W3C 来验证您的 HTML 和 CSS 代码。该工具将生成警告和错误列表,并提供修复建议。常见问题包括未闭合的元素、缺少 alt 标记和解析错误。

您对使用 W3C Validator 有任何疑问吗?在下面的评论部分让我们知道!

特色图片来自 Chaosamran_Studio / shutterstock.com

来源