网站建设之正确的HTML5语义

如果您仔细计划HTML文档的结构，则可以帮助计算机理解内容的含义。正确的语法肯定很重要，但是它基本上只是为解析器，搜索引擎和辅助技术提供了毫无意义的数据。

如果您通过关注语义来改善前端工作流，则可以创建吸引更多访问者的更高质量的内容。语义学是对意义的研究，从广义上讲，它是逻辑学和语言学的一个分支。

在Web开发领域中，当计算机理解文档的结构以及文档内部元素的作用时，我们谈论的是语义内容。如果我们要建立正确的语义，我们需要深刻理解结构我们的内容和功能的前端技术。

那么有什么实际的好处呢？正确的语义意味着更可搜索的内容，从而导致更好的搜索引擎排名。我们还增加了可访问性，因为诸如屏幕阅读器之类的辅助技术可以更好地解释我们内容的含义。

有许多不同的前端开发技术，使开发人员可以实现语义页面结构。这篇文章将为您简要介绍语义HTML标签和文档大纲的概念。

语义和非语义HTML标签

语义的概念并不像它看起来的那么新，它早在HTML5时代就已存在。语义网一词最早由Tim Berners-Lee爵士于2001年提出。在“语义网”下，他表示可以由机器处理的数据网。

这主要意味着单独的HTML元素需要具有其可区分的结构角色。根据W3C的定义， “语义元素向浏览器和开发人员都清楚地描述了其含义”。

HTML5之前的语义元素

语义元素也存在于HTML5之前，只是在大多数情况下，开发人员并不知道他们使用的某些标签实际上是语义的。只需考虑<form></form>或<img>标签即可。

对于我们和用户代理，他们的角色都很清楚：<form>只包含一个表单，就像<img>包含一个图像一样。没有人会在里面放置桌子或标题并<img>标记（或至少希望如此）。

的<table></table>元素，和其相关的标记，如表中的行，表格单元格等也都是HTML5之前存在的语义标签，但是由于这是大量使用了很多年的基于表的布局，大部分开发商并没有利用他们在语义方式。这导致网络牺牲了布局的逻辑结构。

有序列表和无序列表，段落，h1-h6标题标记都是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>为突出显示的文本。

请参阅此列表以获取当前正在使用的所有文本级语义元素。

HTML5中的文档大纲

文档大纲是HTML文档的结构。它显示了元素如何相互关联。仅通过映射元素（例如标题，表标题，表单标题以及早期版本的HTML（例如HTML4.01和XHTML）中的其他元素）生成文档大纲。

在HTML5中，概述算法已通过新的sectioning元素得到增强，即：

<section></section>用于围绕特定主题分组的部分
<article></article>用于完整或独立的作品，例如博客文章或小部件
<nav></nav>用于导航块
<aside></aside>用于补充内容，例如侧边栏。

HTML5中有第五个sectioning元素，但这并不是新的，而是<body></body>标签。在<header></header>和<footer></footer>标签也是新的，但他们没有在文档中产生新的章节，他们瓜分了里面部分的内容。这意味着每个sectioning元素（body，article，section，nav和aside）都可以具有自己的header和footer。

语义结构化内容的提示

如果我们要创建结构合理的文档大纲，则需要注意以下规则：

1.最外面的section元素始终是<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标记一起使用的结构化数据，可以使网页的内容变得更加有意义。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261734.html