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

有语义的使用一个词就是用正确的方式使用它。有语义的编写 HTML 和它非常相似。这就意味着你使用的标签必须描述其中的内容。 F 例如，你的页脚应该是 <footer> 标签,，而不是 <div>标签.另一个常见的陷阱是根据它们在页面上的外观来选择标签。页面的外观将是什么样应该与你选择的标签没有关系，应该把那完全留给 CSS。

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

1.无障碍（Accessibility）

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

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

有语义的编写 HTML 让搜索引擎和浏览器更容易理解内容。例如，假设您写了一篇关于本地新闻报道的文章。您可以轻松地将文章放在 <div> 中，并且使用一个<p>标签作为标题。但是，您应该改用<article>标签和 <h1>标签。搜索引擎将能够更容易识别你的内容的相关性。

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

如果不使用有语义的 HTML，大型项目很快就会变得混乱且难以维护。其他人处理你的代码会特别困难。很容易将一个 <div> 与另一个混淆。<header> 和 <footer> 更难混淆。

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

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

要记住的一件事是，一个标签只有在您正确使用它时才是真正的语义化。<footer> 可能是有语义的标签，但如果您使用它代替 <header>或 <nav>，则不是。名称本身并不是标签有语义的原因。

几个要注意的坏习惯

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

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

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

这里最常见的违规用法是 <div> 和 <span>。对于使用屏幕阅读器（ screen reader）、co-worker 或搜索引擎的任何人来说，这都没有意义。

3. 默认将所有内容放在 <div> 中

例如，让你的页眉、页脚和导航栏都是 <div> 标签，类名称为“header”、“footer”、“nav”等（这可能是我最内疚的一个）。

4. 糟糕的标题用法

永远不要有多个 <h1>标签。从语义上讲，每页应该只有一个 <h1>，并且它应该与您的标题相匹配。当您向下浏览页面时，您的标题也应该变小。尽量避免跳过任何标题级别。

感谢您的阅读！