我们忘记的前3个HTML元素

哈Ha! 我向您介绍Stas Melnikov撰写的文章“我们忘记的前3个HTML元素”的翻译。

我最近阅读了规范,并意识到我们使用的是一组有限的HTML元素。 因此,我想谈谈我们遗忘的三个要素,但它们在每个项目中都存在。

地址元素


通常,您需要在我们的项目中标记一些社交网络或其他联系信息。 通常,开发人员使用以下代码:

<div class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </div> 

但是WHATWG规范包含用于此任务的特殊地址元素。
地址元素代表最接近的文章或正文父元素的联系信息。 如果这是正文元素,则联系信息适用于整个文档。
因此,以下代码更真实:

 <address class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </address> 

Ol元素


我们应该使用列表来标记导航项,例如面包屑,分页等。 这对于帮助屏幕阅读器阅读导航中的项目数量很有必要。

 <nav class="breadcrumb"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ul> </nav> 

通常我们使用ul元素。 但是规范包含一个更合适的标签-ol。 WHATWG规范说:
ol元素表示项目清单,其中的项目被有意地排序,因此更改顺序将更改文档的含义。
如果我们在面包屑导航中对项目进行重新排序,则会更改网站的价值。 因此,以下代码更真实:

 <nav class="breadcrumb"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ol> </nav> 

时间要素


我们使用span元素来标记各种出版物的日期。

 <span>October 5</span> <span>two days ago</span> <span>a Saturday</span> 

但是我们可以为此使用时间标签,它包含在WHATWG规范中。 这就是WHATWG规范所说的:
time元素在datetime属性中表示其内容以及该内容的机器可读形式。 内容受各种日期,时间,时区和持续时间的限制。
因此,我们必须使用时间元素标记日期。

 <time datetime="2019-10-05">October 5</time> <time datetime="2019-01-29">two days ago</time> <time datetime="2019-09-23">a Saturday</time> 

Source: https://habr.com/ru/post/zh-CN480010/


All Articles