语义元素是最重要的，因为它们使我们的代码易于阅读、访问，并且同样导致代码更加一致；因此我们应该使用语义元素，以便屏幕阅读器可以轻松地解释我们的网页。此外，语义 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标签中可以找到，可以应用于article、section、body等。如果你使用 afooter来写作者的地址，那么它必须用地址标签括起来。 -
header：
headerHTML 元素定义了一个部分，其中包含有关相关内容的标题和标题的信息。它可以包含一些标题元素、徽标、搜索表单、作者姓名等。 - section：这个语义元素为用户代理和人类提供了关于所附内容的足够含义。
-
main
main：这个 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 © 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)]
- 将
main、article和aside语义元素添加到文档中，以替换多个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)]
- 在我们代码的页脚部分，我们将替换
div为footer语义元素。
<footer>
<p>Copyright & copy; 2022</p>
</footer>
[图片上传失败...(image-ea468d-1664289224187)]
差异总结
该表总结了语义元素的差异和优势。
| 语义标记 | 非语义标记 |
|---|---|
| 1. 它们有意义。 | 它们没有意义。 |
| 2. 视力受损的人可以轻松阅读语义标记。 | 视力受损的人不能轻易阅读非语义。 |
3. 语义标记使用header, nav, section,article等元素main。 |
非语义标记使用div等span。 |
| 4. 非开发人员可以很容易地理解语义标记。 | 非开发人员无法轻易理解非语义标记。 |
| 5. 语义标记中的内容描述了其中的内容应该如何表现。 | 内容可以是任何东西。 |
| 6. 代码组织得很好。 | 代码组织得不好。 |
| 7. 语义标记对其结构具有特定属性。 | 非语义标记只有一个可用于结构的“类”属性。 |
| 8.语义标记元素用于为非语义标记添加意义。 | 非语义标记只能在语义标记元素的帮助下才有意义。 |
结论
作为 21 世纪的程序员，您必须使用语义 HTML5 元素来使您的代码有意义、可访问、可读、有条理、一致且完美。非常感谢您到达我关于“应该使用语义 HTML5 元素的原因”的文章的结尾。
网友评论