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 等我看到他们时应该会加进来。