如果您仔细计划HTML文档的结构，则可以帮助计算机理解内容的含义 。 正确的语法肯定很重要，但是它基本上只是为解析器，搜索引擎和辅助技术提供了毫无意义的数据。
如果您通过关注语义来改善前端工作流，则可以创建吸引更多访问者的更高质量的内容。 语义学是对意义的研究 ，从广义上讲，它是逻辑学和语言学的一个分支 。
在Web开发领域中，当计算机理解文档的结构以及文档内部元素的作用时，我们谈论的是语义内容。 如果我们要建立正确的语义，我们需要深刻理解我们的内容的结构和前端技术的能力 。
那么有什么实际的好处呢？ 正确的语义意味着更可搜索的内容 ，从而导致更好的搜索引擎排名 。 我们还增加了可访问性，因为诸如屏幕阅读器之类的辅助技术可以更好地解释我们内容的含义 。
有许多不同的前端开发技术，使开发人员可以实现语义页面结构。 这篇文章将为您简要介绍语义HTML标签和文档大纲的概念。
语义和非语义HTML标签
语义的概念并不像它看起来的那么新，它早在HTML5时代就已存在。 语义网一词最早由Tim Berners-Lee爵士于2001年提出。 在“语义网”下，他表示可以由机器处理的数据网。
这首先意味着单独HTML元素需要具有其可区分的结构角色 。 根据W3C的定义， “语义元素向浏览器和开发人员都清楚地描述了其含义”。
HTML5之前的语义元素
语义元素也存在于HTML5之前，只是在大多数情况下，开发人员并不知道他们使用的某些标签实际上是语义的 。 只需考虑<form></form>或<img>标记。
对于我们和用户代理，它们的角色都很清楚： <form>仅包含一个表单，就像<img>包含图像一样。 没有人会在<img>标记内放置表格或标题（或者至少希望如此）。
<table></table>元素及其相关标签（如表行，表单元格等）也是HTML5之前存在的语义标签，但是由于基于表的布局已被大量使用，因此大多数开发人员没有以语义方式使用它们。 这导致网络牺牲了布局的逻辑结构 。
非语义元素
非语义元素没有任何特殊含义，它们之间的层次关系只是虚幻的。 非语义HTML标签最广泛使用的示例是<div></div>和<span></span>标签。
如果您的网站曾经感染过可怕的神经病 ，那么您知道我在说什么。 是的 Divs不一定是错误的，但是如果我们要编写可维护的，模块化的和有意义HTML代码，就必须格外注意 。
Smashing Magazine精美地解释了<div>标签的过度和不合理使用是什么真正的问题 。 要点是，如果我们在div内包含一个div ，则似乎外部div将是内部div的父元素，而实际上并非如此 。
两者之间没有关系，就像<span>标记以相同的方式工作一样，只是在内联级别上。
但是，即使您仍然对<div> -s和<span> -s仍然感到恐惧，也不必惊慌，因为您不必完全抛弃它们 。 它们仍然是仅出于样式目的以及在其他不得已的情况下对内容进行分组的最佳选择。
HTML5中的文本语义
HTML5引入了许多新的语义元素，使内容的组织变得容易。 它们不仅帮助您在整个文档级别上组织内容（请参阅下一节的详细信息），而且还可以在文本块内将它们作为内联标签。
可能最流行的文本级语义标签是<strong></strong>和<em></em> ，但它们也早于HTML5。 在新的内联语义元素中，我们可以找到例如<time></time>, 人类可读日期时间的 <mark></mark>和<mark></mark> 突出显示的文本 。
请参阅此列表以获取当前正在使用的所有文本级语义元素。
HTML5中的文档大纲
文档大纲是HTML文档的结构。 它显示了元素如何相互关联。 仅通过映射元素（例如标题，表标题，表单标题以及早期版本HTML（例如HTML4.01和XHTML）中的其他元素）生成文档大纲。
在HTML5中， 概述算法已通过新的sectioning元素得到增强，即：
-
<section></section>用于围绕特定主题分组的部分 -
<article></article>用于完整或独立的<article></article>，例如博客文章或小部件 -
<nav></nav>用于导航块 -
<aside></aside>用于补充内容，例如侧边栏 。
HTML5中有第五个sectioning元素，但这并不是新的元素，它是<body></body>标记。 <header></header>和<footer></footer>标记也是新的，但是它们不会在文档中生成新的节，而是将内容划分为节。 这意味着每个sectioning元素 （body，article，section，nav和aside） 都可以具有自己的header和footer 。
语义结构化内容的提示
如果要创建结构合理的文档大纲，则需要注意以下规则：
1.最外面的sectioning元素始终是<body></body>标记。
2. HTML5中的节可以嵌套。
3.每个部分都有自己的标题层次结构。 它们每个（甚至是最里面的嵌套部分）都可以带有h1标签。
4.虽然文档大纲主要由5个部分组成，但每个部分都需要适当的标题。
5.始终是定义给定节标题的第一个标题元素（让它为h1或较低级别的标题标签）。 同一部分中的以下标题标记需要与此相关。 （如果第一个标题是sectioning元素内的h4，则不要在其后放置h4。）
6. <nav></nav>和<aside></aside>标记定义的部分不属于HTML文档的主要轮廓，通常它们最初并不是由辅助技术呈现的。
7.每个部分（正文，部分，文章，旁白，导航）都可以具有自己的<header></header>和<footer></footer>标记，用于定义标题（例如徽标，作者的姓名，日期，元信息等）和该部分的页脚（版权，注释，链接等）。
示例：语义大纲
让我们看一个语义文档大纲的示例，以更清楚地了解其工作方式。 我们的示例代码将导致以下文档结构：
这是带有适当语义部分的代码：
<body>
<header>
<h1>Welcome On Our Website!</h1>
<p>Here is our logo and slogan.</p>
</header>
<nav>
<header>
<h2>Choose Your Interest</h2>
</header>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
<article>
<header>
<h1>Title of Article</h1>
<h2>Subtitle of Article</h2>
</header>
<section>
<h4>First Logical Part (e.g. "Theory")</h4>
<p>Paragraph 1 in first section</p>
<h5>Some Other Subheading in First Section</h5>
<p>Paragraph 2 in first section</p>
</section>
<section>
<h4>Second Logical Part (e.g. "Practice")</h4>
<p>Paragraph 1 in second section</p>
<p>Paragraph 2 in second section</p>
</section>
<footer>
<h5>Author Bio</h5>
<p>Paragraph in Article's Footer</p>
</footer>
</article>
<aside>
<h2>Get To Know Us Better</h2>
<section>
<h4>Popular Posts</h4>
<ul>...</ul>
</section>
<section>
<h4>Partners</h4>
<ul>...</ul>
</section>
<section>
<h4>Testimonials</h4>
<ul>...</ul>
</section>
</aside>
<footer>
<ul>
<li>Copyright</li>
<li>Social Media Links</li>
</ul>
</footer>
</body>如果您看一下上面的代码片段，您会发现页眉和页脚是可选的，我们可以自由选择是否要使用它们，但是强烈建议始终为每个部分包括一个标题 ，否则文档大纲中的“无标题”部分。
幸运的是，互联网上有很多很棒的工具可以让我们检查文档的轮廓，这次我们将使用html5.org的Outliner工具。
如果我们将代码段插入到大纲显示器提供的表单中，然后单击“概述此！”。 按钮，我们将看到以下结果：
这是我们的示例代码的文档概述 ，这是搜索引擎看到它的方式，屏幕阅读器将它们提供给视障用户。 它是语义性的，结构合理的，并且其中没有讨厌的“无标题”部分。
如果要查看“大纲视图”中“无标题”部分的外观，只需删除示例代码中的某些标题标签即可。
Web语义学的其他方面
语义HTML标签和文档大纲只是Web语义的一小部分。 借助WAI-ARIA可访问性协议以及可与RDFa协议，微数据或JSON-LD标记一起使用的结构化数据 ，可以使网页的内容变得更加有意义。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
