词语是很重要的。它们有意义，把某些词并列在一起可以让我们向他人传达信息。标点符号的情况也是如此。一个有标点的句子比没有标点的句子更容易理解。
我对语法和标点符号产生了兴趣--可以宽泛地称之为 "语义学"。作为一个前端开发者，我对网络的标点符号--即使用正确的标签来标记页面--和我对信息的显示一样感兴趣。
我们的网页是文件。它们包含一个主标题，由一个h1 元素表示。如果它们内部有章节，每个章节都有一个h2 元素，如果这些章节中的任何一个有进一步的小节，这些小节都将由一个h3 元素来命名。
如果我们看的是网站的主导航，我们希望一个ul ，放在一个nav 元素里面。一个侧边栏可能会放在一个aside 元素里面（尽管不是所有人都同意这是目前最好的元素）。
我们都知道这些一般的网络语义。然而，还有许多HTML元素可供我们用来标记我们的网页，了解这些元素对我们都有很大好处。你可以在Mozilla MDN网络文档中找到一份完整的HTML元素清单。
使用HTML5标签促进SEO和可访问性
你为什么要了解这些标签？如果你关心可访问性（你关心！），你会希望你的页面对尽可能多的用户来说是可以理解的。如果你关心搜索引擎，你会希望确保机器人能够理解、索引并在搜索引擎结果中返回你的内容，而且在社交媒体帖子（如Twitter卡片）中也是如此。
基本上，拥有一个 "语义网[site]"意味着一个网站，正如Tim Berner Lees所说，"信息被赋予了明确的意义，更好地使计算机和人能够合作工作"。
让我们来看看一些较少使用的元素，这些元素将帮助我们建立一个更具语义的网络。
你应该使用的重要HTML标签
<address> HTML标签
如果你认为<address> 元素只用于向网站添加地址，那是可以原谅的。它_可以_用于这一目的，但更具体地说，它是用来为最近的父<article> 或最近的父body 元素提供 "联系信息"。(我经常认为它应该被称为<contact> 元素)。让我们看看一些例子。
为一篇博客文章的作者提供联系信息。请确保你把它放在你的<article> 元素内。
<address>
Mark Conroy can be contacted at <a href="https://mark.ie/contact">his personal website</a>.<br>
On social media you can contact him via <a href="https://twitter.com/markconroy">Twitter</a> and <a href="https://www.linkedin.com/in/conroymark/">LinkedIn</a>.
</address>
你可以在你的网站的页脚包括你的企业联系信息。
<body>
<header>
Logo, Menu, Search, etc.
<header>
<main>
The main body
</main>
<footer>
<div>
Probably some newsletter signup form,
and links to cookies and privacy policies
</div>
<address>
Our Great Company<br>
123 Main Street<br>
New York.
</address>
</footer>
</body>
<address> 元素可以很好地帮助人们在搜索引擎结果页上找到你的位置、电话号码等。忽视它将给你带来危险。
使用<time> ，表示持续时间
<time> 元素被用来表示一个特定的时间或持续时间。一个可能使用它的例子是一个博客文章的日期，像这样。
<div>Published: <time>June 23, 2021 </time></div>
这是一个使用time 元素的基本例子。它通常与datatime 属性一起使用，这将容易被机器读取。你可以为这个属性使用任何机器可读的格式，例如Unix的时间戳。
<time datetime="1625572800">June 23, 2021 </time>
你也可以使用时间元素来描述持续时间，例如阅读博文可能需要多长时间。
<time datetime="PT7M">7m</time><span>Reading time</span>
然后，你可以以多种方式使用time 元素，让机器明白你的意思。让我们假设有一个前端会议即将召开。
<p>LogRocketBlogConf will take place on <time datetime="2018-08-01">August 1</time> all fully online.</p>
<p>Talks will start at <time datetime="09:00">09:00</time> and every hour thereafter until <time datetime="17:00">17:30</time> giving you <time datetime="PT8H30M">8h 30m</time> of pure frontend bliss.</p>
使用<abbr> 来表示缩略语
<abbr> 元素有助于让机器知道你所说的项目是其他东西的缩写，但对于可能不完全熟悉你所在行业的缩写的听众来说，更是如此。
如果缩写是众所周知的，例如NASA或USA，那么你就不需要把它放在<abbr> 标签中。但如果不是，这个标签就是你最好的朋友。更棒的是，它还有一个可选的title 属性，你可以用它来给出你的短语的完整译法。
<p>I'm tired arguing about whether <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> are programming languages. Let's move on from that.</p>
将全文放在内联也是完全可以的。在这种情况下，你可以不使用title 属性，像这样。
<p>JavaScript (<abbr>JS</abbr>) is the programming language of the web.</p>
<data> HTML标签
<data> 元素为一个特定的内容创建了一个机器可读的关系（或称为 "翻译"，在MDN上称为 "翻译"）。例如，如果你拥有一家T恤衫商店，你出售的T恤衫有三种颜色和三种尺寸，这就是九种变化。
这些变化中的每一个都将有一个单独的SKU或产品ID。你可以用数据元素（不是数据属性）来表示唯一的标识符，像这样。
<ul>
<li><data value="lr-gr-sm">Log Rocket T-shirt: Green, Small</data></li>
<li><data value="lr-gr-med">Log Rocket T-shirt: Green, Medium</data></li>
<li><data value="lr-gr-lrg">Log Rocket T-shirt: Green, Large</data></li>
<li><data value="lr-bl-sm">Log Rocket T-shirt: Blue, Small</data></li>
<li><data value="lr-bl-med">Log Rocket T-shirt: Blue, Medium</data></li>
<li><data value="lr-bl-lrg">Log Rocket T-shirt: Blue, Large</data></li>
<li><data value="lr-rd-sm">Log Rocket T-shirt: Red, Small</data></li>
<li><data value="lr-rd-med">Log Rocket T-shirt: Red, Medium</data></li>
<li><data value="lr-rd-lrg">Log Rocket T-shirt: Red, Large</data></li>
</ul>
使用<mark> 来突出显示
<mark> 标签是用来突出显示文本的。它与使用斜体或粗体不同，因为被这个标签标记的文本不是由原作者标记的。你可以把它看作是用荧光笔来突出你正在阅读的一本书中的文本。
这本书的原作者并没有这样做。相反，你这样做是因为该文本中有你特别想为自己突出的东西。
我发现在创建网页时，需要记住在网页上添加一些东西，这样我就不会在以后忘记（这并不完全是它的本意，因为我是作者，但它非常方便）。通常在写博文时，我可能会有这样的东西。
请看CodePen上Mark Conroy (@markconroy) 的Pen
Log Rocket博客样本--标记元素
。
使用<mark> 标签的一个例子经常可以在搜索结果页中看到，你搜索的短语被搜索引擎突出显示，而不是原作者。在这种情况下，突出显示的文字只在这个搜索范围内是重要的。
请看CodePen上Mark Conroy (@markconroy) 的Pen
Log Rocket Blog Sample - mark element 2
。
使用<bdo> 和<bdi> ，以获得双向的文本
当你想在你的文档中拥有双向的文本时，请使用<bdo> 标签。如果你用一种从左到右的语言写作，但你需要引用另一种从右到左的语言（如阿拉伯语），这很方便。
请参阅CodePen上Mark Conroy (@markconroy) 的Pen
Log Rocket Blog Sample - bdo
。
与<bdo> 标签相对应的还有一个标签，叫做<bdi> 。这个标签用于双向内容，应该与周围的文字分开考虑。如果你要动态地将文本注入你的文档，但不知道被注入的文本是什么语言，请使用<bdi> 。
使用<wbr> 进行断字
你有没有遇到过一长串文本导致水平滚动的情况，比如一个长的URL，无法在一行中显示？那么，<wbr> 标签是你的朋友。这个标签建议在一个适当的地方进行断字。
因此，如果你有一个像 [https://example.com/this/is/a/long/url](https://example.com/this/is/a/long/url)这样的URL不能放在一行中（例如，在手机上），你可以建议浏览器在某些地方分割这个词。
你可以像这样做。 [https://example.com/<wbr>this/is/a/long/url](https://example.com/<wbr>this/is/a/long/url).现在，如果你调整你的页面大小，那一串文字就会在下面断开 [https://example.com/](https://example.com/).
<i> 作为习惯性文本
我有一种感觉，你可能正在使用<i> 元素。但我也感觉到，你是把它用于像这样的图标：<i class="fa fa-facebook"></i> ，而不是作为一种使文本斜体的方式。你在一些情况下使用这个元素，比如你想给出你读过的一本书的名字。
<p>I enjoy <i>One Hundred Years of Solitude</i> by Gabriel Garcia Marquez.</p> ，它将呈现出这样的效果。我喜欢读加布里埃尔-加西亚-马尔克斯的《百年孤独》。让我们试着正确使用这个元素，这样屏幕阅读器就能理解我们，而不是让人们劫持我们的语义用于自己的用途。
结语
这就是我认为可以更广泛地使用的一些HTML元素的快速综述，这些元素将使网络更具语义性，具有更好的可访问性，并改善SEO。我强烈建议你看一下MDN文档网站上的所有可用元素，以便更加熟悉可用的内容。
The postUncommon HTML tags that improve web semanticsappeared first onLogRocket Blog.
