有语义的使用一个词就是用正确的方式使用它。有语义的编写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. 糟糕的标题用法
永远不要有多个