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

2024-06-26 21:24:51 +08:00
 chill777
本人是学完了 web.dev 和 mdn 的 a11y 课程,但是基本不会在项目中实践,除非项目中 lint 规定或者特殊需求。

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

很想知道那些表示注重 a11y 的"大佬们",做的都是什么项目哈?
13000 次点击
所在节点    程序员
120 条回复
fengshils
2024-06-27 09:51:19 +08:00
@test4zhou 加上 span i p
wyl986
2024-06-27 09:57:21 +08:00
浏览器解析样式不统一?十几年前就有解决方案了 [normalize.css]( https://necolas.github.io/normalize.css/)
x2ve
2024-06-27 10:03:03 +08:00
感觉现在的前端都好大,带宽小能加载好久;开发倒是比较爽
qW7bo2FbzbC0
2024-06-27 10:17:50 +08:00
@TimG 文本不是应该用<p>吗
dd0754
2024-06-27 10:21:39 +08:00
div 一把梭~
bladeRunner2049
2024-06-27 10:34:44 +08:00
语义化标签好像就用了这三个 header section footer ,其他基本都是 div
chill777
2024-06-27 10:35:14 +08:00
@jguo 想知道阁下高水平的作品项目有?
ciaoca
2024-06-27 10:39:58 +08:00
纯表现形式的
标题不用 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
2024-06-27 10:40:36 +08:00
后端,写前端时严格要求使用语义化标签。
工作是外贸方面的,很在意 Google 优化,还有各种无障碍。
chill777
2024-06-27 10:45:10 +08:00
#35
@marcong95 。。。。麻烦了解清楚再来。半拉玩意还优越上了?
keithwhisper
2024-06-27 10:48:50 +08:00
做开源项目, 会坚持语义化, 不仅自己看代码会有逻辑性, 未来扩展(到其他平台)也方便.
要求合作者用基础的语义化
以前面试的时候, 语义化必问, 很少有人能满足要求, 只有在苹果工作过的一个 web 开发者是到了我想要的线的
chill777
2024-06-27 10:49:46 +08:00
#13
@ccbikai 拉到吧,人家框架自己的东西
flytsuki
2024-06-27 10:59:06 +08:00
全是 div
ResetCode
2024-06-27 11:02:09 +08:00
@twofox 同道中人
dfkjgklfdjg
2024-06-27 11:03:11 +08:00
section 的定义本来就有一些模糊。喷没有语义化的多半都是因为按钮、链接都是使用 div 来模拟的吧。那确实会有很多问题,没办法脱离鼠标来完成对应的操作。
至于无障碍性(a11y)是在 html 语义化之上为障碍人士做的更进一步。就比如大部分人提到的 div 一把梭中使用模拟按钮,就没办法使用空格/回车或者一些辅助设备来实现按钮功能(大部分都是通过 mouse_click 来完成点击功能的)。

但是现在都是使用的 UI 组件库,这些语义化的工作都是组件库提前帮我们处理好了。日常工作中大部分的时间其实会书写的 html 的需求几乎只会有页面布局的场景,大量使用 div 也是没问题。
换一个更加实际的话来说,其实说不需要语义化的人,大部分的工作内容都是一些管理后台相关的业务。这些内部业务其实就对语义化/无障碍没有什么需求,是否在开发过程中使用语义化就完全是看自己的习惯和自己对于代码的要求。
Q65f257Thf3o2cyZ
2024-06-27 11:06:52 +08:00
自己写的项目会注意.
公司的项目,除非公司要求 ......
hahastudio
2024-06-27 11:08:46 +08:00
即便不想写,WCAG 和 VPAT 也会按着头让写
xqk111
2024-06-27 11:11:38 +08:00
少,语义化的标签有时候还会带一些样式,还得改,不如 div 方便
zictos
2024-06-27 11:16:33 +08:00
语义化有利于 seo ,反正我找到博客模版都是用了语义化标签的
bzj
2024-06-27 11:18:53 +08:00
不用语义化标签,全部用 div 有种脱裤子放屁的感觉

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1052902

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX