HTML 中的一些语义化标签
HTML/语义化
HTML 中的一些语义化标签
看 A Blog Post With Every HTML Element 有感
一些不常用的标签
<base>
用来记录 base url 的,也就是当前页面的 relative url 会基于它,而不是基于地址栏里的,属于 Metadata,毕竟会改变浏览器的行为。<dl>
<dt>
和<dd>
这个感觉也很少用,一般<ul>
<ol>
<li>
用的多一些,这个和他们差不多,它有个默认的缩进在<dd>
上。<menu>
感觉很罕见,实际上很早就在规范里了,但是很少使用,看 MDN 说和<ul>
等价了,所以一般没有使用的必要。<data>
挺怪异的,文章里也吐槽谁会用到它的 value 属性,感觉很少用。<dfn>
用于下定义的,用它来包裹在定义内的被定义的对象名,这种情况其实还蛮常见的,比如解释一个东西或者自己定义一些说法什么的,但是很少很少会有人去使用这个 tag,虽然它很早就被提出,但似乎几乎没有用过。<var>
用来放符号的,或者说是变量的,感觉会很少用。<mark>
感觉会和<strong>
重合,如果都用做强调的话,我会选择 strong,除非是某些特殊情况的标记,比如 Medium 中的文本标记,自己写的时候应该会较少使用。<small>
很少使用,如果想要放一些注释什么的,可能会用吧。<wbr>
方便给长单词 break 用的,作者给了个 URL 的例子,但是现在大部分 url 都会加-
来切割单词了,所以应该很少很少会用。<map>
<area>
用来构建一些带有形状的<a>
,目前想不到会在什么情况下用它,感觉怪怪的。<embed>
和<object>
有些年代的元素,应该会很少使用。<picture>
<source>
用来 fallback img src 的,虽然感觉很难用上,但还是了解一下吧。<noscript>
在关闭 js 了之后网站能否正常的工作在 2024 年似乎不是很重要。<col>
<colgroup>
很少见的<table>
里的标签,应该不会使用,这是在必须满足 1FN(一范式)下用的嘛?
一些不常用但是想使用的标签
<bdi>
<bdo>
两个应该属于 RTL 支持专属,如果需要处理用户输入的话可以套上。<cite>
和<q>
感觉用的比较少,甚至不如<abbr>
,如果要在<blockquote>
里引用,我觉得可以尝试一下<cite>
。<kbd>
如果需要用到按键标记的话,会考虑使用的。<rp>
<rt>
<ruby>
注音用的,有需要的话就使用吧。<u>
用来展示错误拼写的。<samp>
用来展示计算机输出的,以前一般都会用<pre>
+<code>
的形式吧,以后可以考虑把那种 Plain Text 的 Code Block 换成这个标签,或者在内联使用。<time>
已经用上了,用来标记一些时间应该还不错。<track>
用来放字幕的,估计会用上。<ins>
和它相比<del>
用的倒是挺多的,如果可能的话,也试试<ins>
吧。<details>
<summary>
如果要用到 toggle,记得使用它们。<dialog>
自定义 dialog 的时候可用。
一些容易错用的标签
<b>
<strong>
<em>
,<b>
就是单纯的想要加粗,不具有语法意义,通常用于单个单词。<strong>
表示强调,默认 sytle 会加粗文本,通常用于整句话。<em>
则用于语气上的重音强调,一般用于单个单词,而且他是斜体的,如果拿它和<li>
比较,就和去比较<b>
和<strong>
一样。
一些碎碎念
语义化肯定是没有问题的,但是有些古老的标签真的很少很少被使用,这种情况应该统计它们在互联网上的使用频次并尝试移除的,不然会给初学者带来一些困惑。还有就是有些 web 教程也确实该更新了,<main>
<section>
这样理应被广泛使用的标签在教程里并不常见,到最后只能看到 <div>
。
还有一些 web component 等我看到他们时应该会加进来。