想统计一下，有多少前端的 v 友会在开发中使用语义化 html？

[chill777]

本人是学完了 web.dev 和 mdn 的 a11y 课程,但是基本不会在项目中实践，除非项目中 lint 规定或者特殊需求。

看隔壁帖子发现有不少人赞成写语义化的 html ，不写就是屎山,能力不行？但是去看了[douyin.com]()、[weibo.com]()、[csdn.net]()、[jd.com]()、[bilibili.com]()等国内访问量高的网站，都极少使用语义化标签，控制台运行`document.querySelectorAll('section')`得到的都是空。

很想知道那些表示注重 a11y 的"大佬们"，做的都是什么项目哈？

发这个贴的目的只是很难理解，在项目中使用语义化标签成为区别屎不屎山和水平高低的标准？并不是说语义化不重要。但是这也是要看项目的需求吧。更不是用来抨击别人的点。

个人表示js才是前端的核心，前端的卷是在于技术迭代更新的快（工程化、node、跨端、图形可视化等等）。当一个需求，新人一个插件三行代码解决，而身为老人的你在啪唧啪唧的几百行的脚本代码，到底是谁水？

主要是某篇帖子，让我想起了我司的某些老前端扣新人代码扣不出毛病，搁那里扯颜色，间距、字体...的毛病。真的很恶心。前端这行绝对不是工作时间越长，技术越好的行业。新人不一定就比老人差。保持谦卑，不断学习才是最重要的。

[catch]

我不用

[amlee]

理那些口嗨的人干嘛，喊着规范，糊着屎山，面向 leader 编程就对了，交活万事大吉

[gongym]

什么情况下会写 html 啊。大部分时间都是用 ui 库写模板吧。但是模板又有多少是需要语义化呢

[koor]

一般看心情，但是点击事件一定会用<a>和<button>，有意义的图片会写 alt

[buf1024]

用不用都是一坨，没什么意义。

[xiaoming1992]

我现在用 mui ，不自觉得就注意语义化和 a11y 了。

[renmu]

标题会用 h1 ，链接会有意识用 a 标签，图标会加上 title 属性，按钮会用 button ，我也仅限于此了

[fwh]

https://conf.juejin.cn/xdc2024/ 稀土开发者大会 2024 网站 ， 里面的链接和按钮都是用的 div,用户体验极差，点击跳转后，在当前页面跳转的，返回后状态都丢失，如果是用 a 标签做跳转，就可以用鼠标中键，或者 ctrl+左键，起码可以自己控制在新窗口打开。

[z0ffy]

div 一把梭，垃圾项目，不值得费这么多事

[Felldeadbird]

模块化的前端下，语义化感觉并不是很强需求。
header,nav,main,footer 这些在 JQ 年代还是很好的。现在 VUE 下，除了 UI 库提供布局，大部分时间 div + 基础标签处理了。甚至来说，a 标签的作用都少了。

[TimG]

会用 h1 、a 、图片绑 alt ，其他的几乎不用。主要是总下意识觉得在什么奇怪版本的浏览器会有坑。另外有个古怪的 div 洁癖，就是文本一定会套 span 再进 div 。自己说不上有什么用，但是不套 span 直接写就有种指甲划光盘、铁铲耙不粘锅的痛苦。

[k9982874]

图片 img ，链接 a 标签，按钮 button ，段落 p 标签什么的不都是几十年前的标准了吗？
现在前端都 div 一把梭了？还发明出个新名词，讨论有没有必要？
前端开发已经魔怔到这种地步了？

[ccbikai]

我会用，Light House 也接近满分了

https://mt.ci/

[DOLLOR]

用组件库吧，组件库用了==我用了

[duan602728596]

有可能考虑到兼容性。还有就是 js 开发的比重太大了，html 、css 等等被认为“无关紧要”的东西都被忽略掉了。
不过 jd 和 weibo 可以用键盘操作，还是考虑了一些的。
至于为什么注重，就是怕网站负优化，各种反人类的交互。

[angrylid]

先表明立场：原则上我是非常乐意为了残障人士做些适配的，但是倘若老板不为这些多出来的工时给我加一分钱工资的话，我却还这么做，那么我才是残障人士。

[DeWjjj]

很少，尤其是 react 中。
基本只有四个 sidebar header footer main 外加若干个<h1> <span>和<p>
以及必备的 div input button 其他基本不用。

[leo72638]

我会用，和做什么项目无关，起码的自我要求

[noahlias]

htmx?

[BeiChuanAlex]

啥是语义化 html ？

[IvanLi127]

用一部分常用的，不全为了 UA 用，用它也是为了代码看起来结构清晰些。更全的那些就靠 ui 库的语义化做得怎么样了。

[luzemin]

@BeiChuanAlex 就是使用语义明确的 html tag ，让人一看就知道做什么的。比如内容使用<article>，侧边使用<aside>

[huihushijie1996]

title span p h a 等标签还是会用的 不过还是 div 居多

[twofox]

div 一把梭哈

[songray]

坚持语义化标签的公司: https://37signals.com/
现代前端拆分了逻辑的最小块, 其意义也可以从组件名推断, 所以对 html 标签表达逻辑的需求小了很多.

[yuhaofe]

如果是项目肯定还是根据实际需求来，就算不是真的为了无障碍，官网、博客类的项目使用语义化也是有意义的，至少对塑造企业、个人品牌形象是有帮助的。至于互联网服务，口碑没有太大意义，为了获取某些独家服务、内容也还是不得不用，语义化对他们来说可能就是徒增成本。

[yuhaofe]

说到底语言也只是工具，先有了需求再说怎么做，而不是因为规范里有这个东西我就要去用，而且无障碍支持就跟道德一样，是用来约束自己而不是拿来抨击别人的，因为别人支持无障碍去反对他们更是倒反天罡

[jguo]

大部分人变道还不打灯呢。顺手就能做好的事，没那意识就承认自己不行，非要找各种理由。

[Baymaxbowen]

toB 的业务根本就不需要使用

[qwertyzzz]

@fwh 确实不咋地 和 vue 那个比起来

[MrDarnell]

语义化主要是给机器读的,尤其是搜索引擎,我现在基本不会面向搜索引擎开发了,所以不在乎语义化的问题!

[zy0829]

前端开发都用 ui 组件库，组件库很少用语义化的标签

[Xu3Xan89YsA7oP64]

之前学 nextjs 的互动教程的时候，里面也提到了你说的这 2 个课程，还提到个 eslint 插件 eslint-plugin-jsx-a11y 。我是不会学的，除非公司硬性要求。这需要顶层设计，你这个开发想用不想用一点都不重要

[jguo]

一个明显是导航的区域用 nav 比用 div 会多花一秒钟时间吗？不这么做只有两种原因，要么不知道 nav 标签，要么敲下三个字母前没考虑元素的作用。不论是哪种原因，本质上都是水平不行。

[marcong95]

你既然知道这个东西，顺手用上也不难吧，又不是让你多花时间弄 aria 那种

看楼上态度，现在流行的是连 h1-h6 p span 乃至 a button 也用 div 代替？那活该被喷屎山

@k9982874 开喷之前麻烦把「语义化标签」贴到搜索引擎搜一下

[me1onsoda]

有点后端 restful 内味

[Yanlongli]

三个标签打天下：div 、a 、input

[Yanlongli]

@Yanlongli 哦不对，再加上 img

[test4zhou]

一方面是 html 语言方面实现的语义化标签，但是不同浏览器之间解析的问题，样式不统一

另一方面是编码规范上的语义化。统一用 div ，class 命名语义法

[kissmenow]

section 很少用，header footer aside 用的多，无意识的就用上了

[fengshils]

@test4zhou 加上 span i p

[wyl986]

浏览器解析样式不统一？十几年前就有解决方案了 [normalize.css]( https://necolas.github.io/normalize.css/)

[x2ve]

感觉现在的前端都好大，带宽小能加载好久；开发倒是比较爽

[qW7bo2FbzbC0]

@TimG 文本不是应该用<p>吗

[dd0754]

div 一把梭~

[bladeRunner2049]

语义化标签好像就用了这三个 header section footer ，其他基本都是 div

[chill777]

@jguo 想知道阁下高水平的作品项目有？

[ciaoca]

纯表现形式的
标题不用 h1~h6 ，用 <div class="title"> ?
列表不用 ul / ol ，用 <div class="list"> ?
按钮不用 button ，用 <div class="button"> ?
引用内容不用 blockquote ，用 <div class="blockquote"> ?
代码展示不用 pre / code ，用 <div class="code"> ?
常规表格不用 table ，用 <div class="table"> ?
重点字词不用 em / strong ，用 <span class="strong"> ?
删除线文字不用 del ，用 <span class="delete"> ?

交互形式的
<form> 标签内的任意输入框 / 下拉框按回车，就能提交表单（表单验证做不好，不想要这种特性，故 <div class="form">）
<button type="submit"> 提交表单按钮
<button type="reset"> 表单重置按钮
<input> / <select> / <textarea> / <button>，tab 键切换 / 手机键盘上下一项切换

以上仅仅是个人比较常用的标签，仍有很多语义标签因为未涉及到具体场景没有用到。

[yKXSkKoR8I1RcxaS]

后端，写前端时严格要求使用语义化标签。
工作是外贸方面的，很在意 Google 优化，还有各种无障碍。

[chill777]

#35
@marcong95 。。。。麻烦了解清楚再来。半拉玩意还优越上了？

[keithwhisper]

做开源项目, 会坚持语义化, 不仅自己看代码会有逻辑性, 未来扩展(到其他平台)也方便.
要求合作者用基础的语义化
以前面试的时候, 语义化必问, 很少有人能满足要求, 只有在苹果工作过的一个 web 开发者是到了我想要的线的

[chill777]

#13
@ccbikai 拉到吧，人家框架自己的东西

[flytsuki]

全是 div

[ResetCode]

@twofox 同道中人

[dfkjgklfdjg]

section 的定义本来就有一些模糊。喷没有语义化的多半都是因为按钮、链接都是使用 div 来模拟的吧。那确实会有很多问题，没办法脱离鼠标来完成对应的操作。
至于无障碍性(a11y)是在 html 语义化之上为障碍人士做的更进一步。就比如大部分人提到的 div 一把梭中使用模拟按钮，就没办法使用空格/回车或者一些辅助设备来实现按钮功能（大部分都是通过 mouse_click 来完成点击功能的）。

但是现在都是使用的 UI 组件库，这些语义化的工作都是组件库提前帮我们处理好了。日常工作中大部分的时间其实会书写的 html 的需求几乎只会有页面布局的场景，大量使用 div 也是没问题。
换一个更加实际的话来说，其实说不需要语义化的人，大部分的工作内容都是一些管理后台相关的业务。这些内部业务其实就对语义化/无障碍没有什么需求，是否在开发过程中使用语义化就完全是看自己的习惯和自己对于代码的要求。

[Q65f257Thf3o2cyZ]

自己写的项目会注意.
公司的项目,除非公司要求 ......

[hahastudio]

即便不想写，WCAG 和 VPAT 也会按着头让写

[xqk111]

少，语义化的标签有时候还会带一些样式，还得改，不如 div 方便

[zictos]

语义化有利于 seo ，反正我找到博客模版都是用了语义化标签的

[bzj]

不用语义化标签，全部用 div 有种脱裤子放屁的感觉

[xxmym]

我用， 语义标签结构清晰，而且能省掉一些 class

[yunlongV]

只有需要 seo 和 layout 的地方我才用语义化..比如 a 标签，h1-h6 ，img ，其他的地方基本上是 div 一把梭

[mixuxin]

@ccbikai 好奇这个首页是用了什么框架还是纯手写的？见了好多主页都长这个样

[wysnxzm]

有点像 restfull 和 post 的问题

[7gugu]

除非是无障碍化的需求单，否则不可能主动去写语义化标签，用 div 就是为了减少心智负担，做业务最重要的是功能，功能实现好了再讨论美不美吧，很多需求在讨论美不美之前就已经暴毙了，写的再漂亮又有何用，徒增自己的工作量，让下班时间无限延后。

[Hilong]

用的 figma 自动生成的 html+tailwindcss 生成的代码就是 div 一把梭，刚入行的时候我还会用一些其他标签，现在已经习惯了 div 一把梭了

[Arrowing]

@jguo 这个可不能一概而论，变道不打灯影响的是安全，绝对支持提前打灯。语义化标签在绝大多数场景下都是可有可无，没影响。

[mandex]

我用的。内部系统用 react 的时候不太关注这个。但是我做了很多游戏官网，这个时候是要用的，因为真的要考虑 SEO ，还是有点影响的。

[hazy]

非前端，习惯看着 MDN 能用的都尽量用。

[elevioux]

我。

不是专门前端，主要写 PHP 。

尽量写语义化标签是以前写博客、写门户类型的网站的时候，看到有文章说语义化标签有助于 SEO 。

这个习惯一直保留到现在。

h123456,main,header,nav,footer,section,quote,time,pre,code 等等，我是尽量分清楚的，即使是无关 SEO 的后台界面。

不过现在都习惯前后端分离，不关注 SEO ，搞封闭，也就无所谓了。

[keithwhisper]

看到补充里的 "保持谦卑，不断学习才是最重要的。"以及后面的 "个人表示 js 才是前端的核心，前端的卷是在于技术迭代更新的快", "某些老前端扣新人代码扣不出毛病，搁那里扯颜色，间距、字体...的毛病"

你既不谦卑, 也不学习

[shqingda]

div 一把梭，span 都很少用。如果本身不是 div ，就在套一个 div 解决🤣

[awinds]

老项目一般都 div table 吧，现在新的框架或 html 才会出现

[wonderfulcxm]

哈哈 ，用啊，看老外教程经常用，我也用了，特别是写 wordpress 的模板，什么 header, footer, nav , article 很常见，WP 站的的 SEO 比较好跟这是有一部分原因的。

[chill777]

@keithwhisper
。。。这你都可以看不出来？具体指什么方面？我好改正

[qiaobeier]

用不用都可以，不懂还用，比如我们组里的一个台妹，用<LI>不用<UL>, 或者 UL 下面跟着 DIV 这你受得了吗。

[chill777]

@qiaobeier
就是这种，我也遇到过，一会用一会不用的，读代码真的很累。

[keithwhisper]

Reply to #17 @chill777

"个人表示 js 才是前端的核心，前端的卷是在于技术迭代更新的快" 这是傲慢的想法, 觉得一门语言就是一个生态的核心. HTML, CSS 和 JS 都是解决生态里某一领域问题的, 哪个更重要肯定得看面对的问题是什么.
要极端地举例, 我可以说 HTML + CSS 就能呈现一个前端的展示, 缺少 HTML 是做不到的.

"某些老前端扣新人代码扣不出毛病，搁那里扯颜色，间距、字体...的毛病" 别人提出颜色, 间距, 字体的问题, 如果不符合预期, 就是问题, 被指出了就应该改好, 而不是觉得 "老前端扣不出新人代码的毛病"

[GoNtte]

比如标签这些顺手就写了，再细致点的 aria 就算了，项目又没特殊需求，尽快搞完需求要紧

[wzdsfl]

@Yanlongli #38 img 也给用上 backgroud-image 给代替了

[Greendays]

原来这叫语义化，看这个帖子之前我还以为 HTML 只有这种写法（

[SniperXu]

@wzdsfl 😂这个大可不必

[alleluya]

@TimG 这个 span 里套 div 我看有的 UI 库里写的时候也这样

[treblex]

专门做网站的时候会注意，现在都是小程序就用不到了
不过我比较在意可点击的内容要有交互效果，最简单的就是可以做个按下半透明，很多应用做出来都是铁按钮，按下去一点儿反应都没有

[qin20]

1. 语义化的好处是什么，成本又需要多少，是不是什么项目都需要语义化呢？
- 在我看来大部分项目都不需要语义化，收益很小，但是需要付出的成本却很大，很繁琐
2. 语义化很难吗，是一个很高深的技术吗，需要炫耀和比较吗？
- 只能扯这个的人都纯属扯淡，吃饱没事干

[TORYOI]

细心+基础才是前端的核心

[ssb4]

水平不行，菜还不承认

[Rebron1900]

@chill777 不是在讨论用不用吗？用你也让人拉倒？再说现在做网站几个不用框架的？

[zhx643]

像 header section footer 经常使用

[NerbraskaGuy]

这玩意跟水平也没啥关系吧，引申一下就是 CSS 脑子记得多就算水平高吗，靠这些东西来定于水平那前端整体上限也不会高到哪里去

[seki]

a11y 不一定需要语义化标签，用 role 之类的也行

[mxT52CRuqR6o5]

csr 对 seo 的影响明显远大于语义化标签啊，不把 csr 的因素排除是怎么得出 seo 全靠语义化的结论的

[k9982874]

@marcong95 发帖之前就查过这是什么“新玩意”毕竟前端喜欢搞概念，天天搞重复发明。
有什么观点直说，别当谜语人。
哦，你可以把「谜语人」贴到搜索引擎搜索一下

[tomowang]

我在个人项目中用，nav, main, section, footer 这些，主要想看看 lighthouse 评分之类的。但是公司项目，大部分不考察这些，很多时候也是 div 。不过基本的原则比如链接 a 标签、button 这种，能注意的还是会注意

[Torpedo]

常年做内场项目 、app 里的 webview ，我已经不会语义化了

另外，复杂的应用很难兼顾语义化的

[chill777]

#88
@Rebron1900
。。。你点进去看了吗？你玩过博客吗？ astro 自己生成的标签，你管是自己注重语义化？这么会往脸上贴金？ git clone 的代码，你怎么不说是自己写的呢？不懂少说话，丢人玩意

[chill777]

#78
@keithwhisper
1. 如果没有 js ，前端永远只是是切图仔。
2. 身为程序员，code review 时扣无关紧要的外观，很 low ，都是按照 ui 和标准来的。就算扣也是产品和 leader 来说。而不是有的人仗着资历，去刷存在感。谁又比谁的审美高级？

我说的谦卑，不代表要接受别人的 pua 。不断学习，是学习技术和知识，不是学习在不合理的指责下还要说谢谢你，我要改的。OK ？

[ccbikai]

@chill777 #52 请问是什么框架？

@mixuxin 我开源了一版，在这边 https://github.com/ccbikai/astro-aria

[chihiro2014]

all in div

[LavaC]

also the <div>
看到这个话题就想到这个 meme 。