欢迎来到语义世界，代码在其中讲内容的语言。在当今快节奏的数字景观中，创建可访问和搜索引擎友好的网页对于成功至关重要。作为freelance web developer，我注意到许多新建的网站在HTML中正确实现语义时仍然错过了标记。在这篇博客文章中，我们将深入研究语义的重要性，探索具有正确语义的基本HTML结构，并为进一步的学习提供资源。
语义的重要性
正确使用语义可以使您可以通过代码在网站上传达内容块的含义。这对于搜索引擎和屏幕阅读器来说是无价的，因为它使您的网站更容易访问和易于理解。
具有适当语义的基本HTML结构
这是如何用正确的语义结构页面的一个示例：
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page</title>
</head>
<body>
<h1>This is my page</h1>
<header>
<figure>
<img src="logo.svg" alt="My brand" />
</figure>
<nav>
<h2>Primary navigation</h2>
<menu>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</menu>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<h3>Subtitle 1</h3>
<p>Paragraph 1</p>
<h3>Subtitle 2</h3>
<p>Paragraph 2</p>
<h3>Subtitle 3</h3>
<p>Paragraph 3</p>
</article>
</main>
<footer>
<nav>
<h2>Footer navigation</h2>
<menu>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</menu>
</nav>
<p>© 2023 My Brand</p>
</footer>
</body>
</html>
您可能会注意到<h1>元素是在<body>元素之后立即定位的。这意味着随后的标题元素应从<h2>元素开始，而在<h2>元素下方，应该有<h3>元素。遵守这些规则对于在HTML中正确实施语义至关重要。有关更多指导，您可以参考MDN上的semantics in HTML的资源。
将<h1>元素放在<body>元素下方的下方可能具有挑战性。我通常要做的是使此<h1>元素仅在使用CSS筛选读取器上可见。请记住，此元素的内容对于搜索引擎至关重要，因此请确保对SEO进行优化。
更好的语义的资源和工具
HTML中的许多切片元素需要由小时候标题元素识别。您可以从MDN咨询每个元素的要求，也可以使用HTML5 Outliner之类的工具来检查您的工作。如果您错过了标题元素，则此工具将使查找并纠正问题。通过实现正确的标记，您将为您的页面创建一个结构良好的目录。
博客文章的语义
对于那些有兴趣深入研究该主题的人，我写了一篇有关特定元素和semantics to use for blog post pages的单独博客文章。检查一下以增强您对博客上下文中HTML语义的理解和应用。
结论
在HTML中理解和应用正确的语义对于创建可访问的搜索引擎友好网站至关重要。通过遵循提供的基本结构并使用提到的资源，您将可以解锁网络开发项目中语义的全部潜力。请记住，代码不仅与功能有关 - 还与通信有关。使您的代码用语义的力量说出内容的语言。