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

还没有评论哦...