HTML 中的语义元素:为什么要使用它们

语义元素是最重要的,因为它们使我们的代码易于阅读、访问,并且同样导致代码更加一致;因此我们应该使用语义元素,以便屏幕阅读器可以轻松地解释我们的网页。此外,语义 HTML5 元素需要以人类和机器可读的方式描述我们的代码,以使其看起来更好。因此,要获得更好的用户体验,就需要使用 Semantic HTML5 元素来获得最佳体验。

hero.png

HTML 最初是作为一种标记语言来描述文档而创建的,但随着互联网的发展,人们希望让网络看起来更漂亮;div因此人们开始使用像and这样的“非语义”标签span,但作为程序员,您需要语义元素才能编写干净的代码,以便向浏览器和开发人员描述其含义。在本文中,我们将描述可用的语义 HTML 元素并解释它们的优点。

什么是“语义元素”?

“语义”作为一个词涉及意义,涉及语言中意义的研究,也意味着对单词和句子意义的研究。我们认为语义是人们流利地交流和理解彼此时通常发生的魔法。语义只是意味着“意义”。

语义元素是那些具有某种意义的元素。在编程中,“语义”一词与代码的含义有关。语义 HTML 元素与使 HTML 非常易于理解的语法有关,从而为网页带来了良好的意义,而不仅仅是呈现。语义元素自然地向开发人员和浏览器表示它们的含义,以使视力受损的人使用的屏幕阅读器可以轻松地轻松理解代码。

语义元素具有以下优点:

  • 易于理解的代码:语义元素使开发人员和屏幕阅读器可以轻松理解代码。
  • 结构化我们创建的代码:它帮助我们结构化代码,从而使我们的代码可读且易于维护。
  • 更简洁的代码:语义元素使我们的代码更简洁,并且在每个元素使用适当的词时更有意义。
  • 有意义的代码:它让我们的代码有意义,让浏览器和开发者都能理解。
  • 有组织的代码:它更好地组织我们的代码以便人们理解。
  • 一致的代码:语义元素导致代码更一致

我们应该使用语义 HTML 元素,因为它使我们的代码更易于阅读,即使是非专业人士也可以轻松阅读和理解代码。同样,如果您使用语义 HTML 元素,您的代码将很容易被程序员理解。最后,使用语义元素将使更多人更容易理解您的代码,尤其是对于有视力障碍的屏幕阅读器。

语义元素示例

HTML5 中的语义元素如下:

  • article:文章内容元素包含我们将在文档中使用的信息,给定的文档可以有多个片段;一个很好的例子是一个博客,它在读者滚动浏览时一个接一个地显示每篇文章的文本,每个帖子都将包含在一个article元素中,其中可能包含一个或多个section元素。
  • 搁置:这表示文档的内容与主要内容间接相关的那部分。它不会为浏览器呈现任何特殊内容,但我们可以使用 CSS 来改进aside元素。
  • details:这指定了程序员在需要时可以打开和关闭的附加信息,我们可以在detail标签内放置任何内容。
  • figure:它是在主文档中引用的图像、图表、代码等,通常与名为figcaption.
  • figcaption : 我们使用figcaption来设置其父figure元素内容的描述。
  • footer:它是一个 HTML5 元素,我们用来定义包含 HTML 文档中作者信息的页脚。这在body标签中可以找到,可以应用于articlesectionbody等。如果你使用 afooter来写作者的地址,那么它必须用地址标签括起来。
  • headerheaderHTML 元素定义了一个部分,其中包含有关相关内容的标题和标题的信息。它可以包含一些标题元素、徽标、搜索表单、作者姓名等。
  • section:这个语义元素为用户代理和人类提供了关于所附内容的足够含义。
  • mainmain :这个 HTML 元素定义了文档中的主要内容,我们应该在整个文档中只有一个元素。该main元素位于body标签内。
  • mark:我们使用该mark元素突出显示 HTML 页面中的重要文本。
  • nav : navElement 使我们可以更轻松地创建一个简洁的文本链接菜单,并帮助屏幕阅读器正确识别文档中的主要导航区域。
  • time:此元素表示时间或日期。此外,此元素允许用户代理添加诸如生日和其他纪念日之类的偶然事件。
  • summary :summary元素提供了元素内容的简明描述details,并且在details元素切换关闭时显示。

使用新的 HTML 语义元素的优点有几个:

  • 帮助代码具有意义:一旦您使用新的 HTML Semantic 元素,代码就会变得有意义,因为它为模糊的 HTML 文件带来了意义。
  • 增加可访问性:新的 HTML 语义元素允许快速访问我们的网页,帮助视力不佳的人快速导航,轻松访问。
  • 它可以帮助视力受损的人理解代码:使用新的 HTML 语义元素的显着优势在于,它甚至可以帮助视力受损的人理解代码。
  • 更易于维护:一旦我们使用新的 HTML Semantic 元素,它将使我们的代码易于维护,帮助新开发人员和技术爱好者理解。
  • 帮助人们快速理解代码:人们倾向于快速理解代码,因为它是以人类和机器可读的方式编写的。
  • 快速解释:新的 HTML 语义元素帮助屏幕阅读器快速解释代码。
  • 有组织的代码:一旦我们使用新的 HTML 语义元素,我们的代码就会被组织起来。它们有助于保持我们的代码行非常有条理。

语义网页的布局示例

语义网页的布局示例如下:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Non Semantic Element</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- navigation -->
    <div>
      <ul>
        <li><a href="#">Home</a></li>
        <li></li>
        <li><a href="#">About</a></li>
        <li></li>
        <li><a href="#">Products</a></li>
        <li></li>
        <li><a href="#">Contact</a></li>
        <li></li>
      </ul>
    </div>

    <!-- header-->
    <div>
      <h1>Tom's Fruit Co.</h1>
      <img src="https://bit.ly/2KYbBR1" alt="main banner" />
      <button>Find out more</button>
    </div>

    <!-- about section -->
    <div>
      <h2>About Us</h2>
      <p>
        Life in flower goes on when a male meet a female to protect itself.
        While growing up to be a man! I equally found out that life in human
        goes on when a male meet a female to protect itself also.
      </p>
    </div>

    <!-- products section-->
    <div>
      <h3>Our Products</h3>
      <ul>
        <li>Apples</li>
        <li>Oranges</li>
        <li>Grapes</li>
        <li>Limes</li>
      </ul>
    </div>

    <!-- contact -->
    <div>
      <h3>Get in Touch!</h3>
      <form>
        <label>Name:</label>
        <input type="text" />
        <label>Email:</label>
        <input type="email" />
        <label>Message:</label>
        <textarea></textarea>
        <input type="submit" value="Submit" />
      </form>
    </div>

    <!-- footer -->
    <div>
      <p>Copyright &copy; 2022</p>
    </div>
  </body>
</html>

上面的 Toggle 代码块显示了没有语义元素的文档的外观。我使用 CSS 使这个 HTML 文档看起来更好。我同样会放一张它在浏览器上的显示截图,比如谷歌浏览器,下面是截图:

[图片上传失败...(image-586340-1664289224187)]

[图片上传失败...(image-1aec59-1664289224187)]

上面的屏幕截图显示了文档在浏览器上的外观。我现在将对其应用语义元素以使其更具可读性和更有意义。我将从文档顶部开始,一直添加所需的语义元素,直到向下;我们会注意到,随着我添加语义元素,文档变得更有意义。我将开始使文档语义从首页开始向下,因此:

  • nav语义元素添加到文档中:在导航部分,我将用div语义nav元素替换开头。该nav部分可帮助屏幕阅读器快速识别主要导航区域。
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li></li>
    <li><a href="#">About</a></li>
    <li></li>
    <li><a href="#">Products</a></li>
    <li></li>
    <li><a href="#">Contact</a></li>
    <li></li>
  </ul>
</nav>

[图片上传失败...(image-1ced49-1664289224187)]

  • header语义元素添加到文档中:在 Header 部分中,我将用语义元素替换开头和div结尾。/div``header
<header>
  <h1>Tom's Fruit Co.</h1>
  <img src="https://bit.ly/2KYbBR1" alt="main banner" />
  <button>Find out more</button>
</header>

[图片上传失败...(image-eaab12-1664289224187)]

  • mainarticleaside语义元素添加到文档中,以替换多个div元素。
<main>
  <!-- about section -->
  <article>
    <h2>About Us</h2>
    <p>
      Life in flower goes on when a male meet a female to protect itself. While
      growing up to be a man! I equally found out that life in human, goes on
      when a male meet a female to protect itself also.
    </p>
  </article>

  <!-- products section-->
  <aside>
    <h3>Our Products</h3>
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Grapes</li>
      <li>Limes</li>
    </ul>
  </aside>
</main>

main元素定义主要内容,article元素显示有关内容的信息。相反,该aside元素使与主要内容间接相关的内容可读。这三个语义元素的使用赋予了 Chrome 浏览器上的文档意义,使“关于我们”和“我们的产品”具有可读性。

[图片上传失败...(image-a910a-1664289224187)]

  • 在我们代码的联系部分中将语义元素添加section到文档中,以替换另一个div.
<section>
  <h3>Get in Touch!</h3>
  <form>
    <label>Name:</label>
    <input type="text" />
    <label>Email:</label>
    <input type="email" />
    <label>Message:</label>
    <textarea></textarea>
    <input type="submit" value="Submit" />
  </form>
</section>

[图片上传失败...(image-a2f638-1664289224187)]

  • 在我们代码的页脚部分,我们将替换divfooter语义元素。
<footer>
  <p>Copyright & copy; 2022</p>
</footer>

[图片上传失败...(image-ea468d-1664289224187)]

差异总结

该表总结了语义元素的差异和优势。

语义标记 非语义标记
1. 它们有意义。 它们没有意义。
2. 视力受损的人可以轻松阅读语义标记。 视力受损的人不能轻易阅读非语义。
3. 语义标记使用header, nav, section,article等元素main 非语义标记使用divspan
4. 非开发人员可以很容易地理解语义标记。 非开发人员无法轻易理解非语义标记。
5. 语义标记中的内容描述了其中的内容应该如何表现。 内容可以是任何东西。
6. 代码组织得很好。 代码组织得不好。
7. 语义标记对其结构具有特定属性。 非语义标记只有一个可用于结构的“类”属性。
8.语义标记元素用于为非语义标记添加意义。 非语义标记只能在语义标记元素的帮助下才有意义。

结论

作为 21 世纪的程序员,您必须使用语义 HTML5 元素来使您的代码有意义、可访问、可读、有条理、一致且完美。非常感谢您到达我关于“应该使用语义 HTML5 元素的原因”的文章的结尾。

推荐阅读更多精彩内容