哈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>