要养成编写有语义的HTML的习惯

2021-10-15 11:43:52 浏览数 (1)

有语义的使用一个词就是用正确的方式使用它。有语义的编写HTML和它非常相似。这就意味着你使用的标签必须描述其中的内容。 F例如,你的页脚应该是

标签,,而不是

标签.另一个常见的陷阱是根据它们在页面上的外观来选择标签。页面的外观将是什么样应该与你选择的标签没有关系,应该把那完全留给 CSS。

为什么要使用有语义的 HTML?

1.无障碍(Accessibility)

使用语义元素后对使用屏幕阅读器(screen readers)的人来说有很大的不同。如果你的标记是更有意义的并且有合乎逻辑的构造,那么使用屏幕阅读器的人将能更方便的使用它。

2. SEO : 搜索引擎优化(Search Engine Optimization)

有语义的编写 HTML 让搜索引擎和浏览器更容易理解内容。例如,假设您写了一篇关于本地新闻报道的文章。您可以轻松地将文章放在

中,并且使用一个

标签作为标题。但是,您应该改用

标签和

标签。搜索引擎将能够更容易识别你的内容的相关性。

3. 对你自己或其他人来说,更容易维护 Ease of Maintenance(for yourself and others)

如果不使用有语义的 HTML,大型项目很快就会变得混乱且难以维护。其他人处理你的代码会特别困难。很容易将一个

与另一个混淆。和 更难混淆。

使用有语义的 HTML 的这三个原因都有一些共同点。它们与帮助其他人理解您编写的代码有关。如果它可以帮助其他人并使您的代码看起来井井有条,为什么不这样做呢?

本文的目的不是告诉您在什么情况下使用什么标签。那是很疯狂的。如果您不确定要使用什么标签,您可以查看MDN!MDN对每个 HTML 标签都有很好的文档。他们还有专门关于有语义的 HTML 的文章,包括哪些标签是有语义的完整的列表。

要记住的一件事是,一个标签只有在您正确使用它时才是真正的语义化。

可能是有语义的标签,但如果您使用它代替 或 ,则不是。名称本身并不是标签有语义的原因。

几个要注意的坏习惯

1.为了审美的需要而使用HTML的某些标签

例如,使用

标记进行缩进。虽然以这种方式快速缩进某些内容可能很不错,但这绝对是 CSS 的工作。另一个常见的例子是使用标题标签来改变字体大小而不是利用 CSS font-size 属性。

2. 使用 以外的任何东西来表示按钮

这里最常见的违规用法是

和 。对于使用屏幕阅读器( screen reader)、co-worker或搜索引擎的任何人来说,这都没有意义。

3. 默认将所有内容放在

例如,让你的页眉、页脚和导航栏都是

标签,类名称为“header”、“footer”、“nav”等(这可能是我最内疚的一个)。

4. 糟糕的标题用法

永远不要有多个

标签。从语义上讲,每页应该只有一个 ,并且它应该与您的标题相匹配。当您向下浏览页面时,您的标题也应该变小。尽量避免跳过任何标题级别。 感谢您的阅读!

0 人点赞