V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chill777
V2EX  ›  程序员

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

  •  
  •   chill777 · 129 天前 · 9412 次点击
    这是一个创建于 129 天前的主题,其中的信息可能已经有所发展或是发生改变。
    本人是学完了 web.dev 和 mdn 的 a11y 课程,但是基本不会在项目中实践,除非项目中 lint 规定或者特殊需求。

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

    很想知道那些表示注重 a11y 的"大佬们",做的都是什么项目哈?
    第 1 条附言  ·  128 天前

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

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

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

    120 条回复    2024-07-07 19:44:16 +08:00
    1  2  
    catch
        1
    catch  
       129 天前
    我不用
    amlee
        2
    amlee  
       129 天前   ❤️ 13
    理那些口嗨的人干嘛,喊着规范,糊着屎山,面向 leader 编程就对了,交活万事大吉
    gongym
        3
    gongym  
       129 天前
    什么情况下会写 html 啊。大部分时间都是用 ui 库写模板吧。但是模板又有多少是需要语义化呢
    koor
        4
    koor  
       129 天前
    一般看心情,但是点击事件一定会用<a>和<button>,有意义的图片会写 alt
    buf1024
        5
    buf1024  
       129 天前
    用不用都是一坨,没什么意义。
    xiaoming1992
        6
    xiaoming1992  
       129 天前
    我现在用 mui ,不自觉得就注意语义化和 a11y 了。
    renmu
        7
    renmu  
       129 天前 via Android
    标题会用 h1 ,链接会有意识用 a 标签,图标会加上 title 属性,按钮会用 button ,我也仅限于此了
    fwh
        8
    fwh  
       129 天前
    https://conf.juejin.cn/xdc2024/ 稀土开发者大会 2024 网站 , 里面的链接和按钮都是用的 div,用户体验极差,点击跳转后,在当前页面跳转的,返回后状态都丢失,如果是用 a 标签做跳转,就可以用鼠标中键,或者 ctrl+左键,起码可以自己控制在新窗口打开。
    z0ffy
        9
    z0ffy  
       129 天前
    div 一把梭,垃圾项目,不值得费这么多事
    Felldeadbird
        10
    Felldeadbird  
       129 天前
    模块化的前端下,语义化感觉并不是很强需求。
    header,nav,main,footer 这些在 JQ 年代还是很好的。现在 VUE 下,除了 UI 库提供布局,大部分时间 div + 基础标签处理了。甚至来说,a 标签的作用都少了。
    TimG
        11
    TimG  
       128 天前 via Android   ❤️ 1
    会用 h1 、a 、图片绑 alt ,其他的几乎不用。主要是总下意识觉得在什么奇怪版本的浏览器会有坑。另外有个古怪的 div 洁癖,就是文本一定会套 span 再进 div 。自己说不上有什么用,但是不套 span 直接写就有种指甲划光盘、铁铲耙不粘锅的痛苦。
    k9982874
        12
    k9982874  
       128 天前 via Android
    图片 img ,链接 a 标签,按钮 button ,段落 p 标签什么的不都是几十年前的标准了吗?
    现在前端都 div 一把梭了?还发明出个新名词,讨论有没有必要?
    前端开发已经魔怔到这种地步了?
    ccbikai
        13
    ccbikai  
       128 天前 via iPhone
    我会用,Light House 也接近满分了

    https://mt.ci/
    DOLLOR
        14
    DOLLOR  
       128 天前   ❤️ 1
    用组件库吧,组件库用了==我用了
    duan602728596
        15
    duan602728596  
       128 天前
    有可能考虑到兼容性。还有就是 js 开发的比重太大了,html 、css 等等被认为“无关紧要”的东西都被忽略掉了。
    不过 jd 和 weibo 可以用键盘操作,还是考虑了一些的。
    至于为什么注重,就是怕网站负优化,各种反人类的交互。
    angrylid
        16
    angrylid  
       128 天前   ❤️ 6
    先表明立场:原则上我是非常乐意为了残障人士做些适配的,但是倘若老板不为这些多出来的工时给我加一分钱工资的话,我却还这么做,那么我才是残障人士。
    DeWjjj
        17
    DeWjjj  
       128 天前   ❤️ 2
    很少,尤其是 react 中。
    基本只有四个 sidebar header footer main 外加若干个<h1> <span>和<p>
    以及必备的 div input button 其他基本不用。
    leo72638
        18
    leo72638  
       128 天前 via iPhone   ❤️ 3
    我会用,和做什么项目无关,起码的自我要求
    noahlias
        19
    noahlias  
       128 天前
    htmx?
    BeiChuanAlex
        20
    BeiChuanAlex  
       128 天前
    啥是语义化 html ?
    IvanLi127
        21
    IvanLi127  
       128 天前
    用一部分常用的,不全为了 UA 用,用它也是为了代码看起来结构清晰些。更全的那些就靠 ui 库的语义化做得怎么样了。
    luzemin
        22
    luzemin  
       128 天前
    @BeiChuanAlex 就是使用语义明确的 html tag ,让人一看就知道做什么的。比如内容使用<article>,侧边使用<aside>
    huihushijie1996
        23
    huihushijie1996  
       128 天前
    title span p h a 等标签还是会用的 不过还是 div 居多
    twofox
        24
    twofox  
       128 天前
    div 一把梭哈
    songray
        25
    songray  
       128 天前
    坚持语义化标签的公司: https://37signals.com/
    现代前端拆分了逻辑的最小块, 其意义也可以从组件名推断, 所以对 html 标签表达逻辑的需求小了很多.
    yuhaofe
        26
    yuhaofe  
       128 天前
    如果是项目肯定还是根据实际需求来,就算不是真的为了无障碍,官网、博客类的项目使用语义化也是有意义的,至少对塑造企业、个人品牌形象是有帮助的。至于互联网服务,口碑没有太大意义,为了获取某些独家服务、内容也还是不得不用,语义化对他们来说可能就是徒增成本。
    yuhaofe
        27
    yuhaofe  
       128 天前
    说到底语言也只是工具,先有了需求再说怎么做,而不是因为规范里有这个东西我就要去用,而且无障碍支持就跟道德一样,是用来约束自己而不是拿来抨击别人的,因为别人支持无障碍去反对他们更是倒反天罡
    jguo
        28
    jguo  
       128 天前   ❤️ 14
    大部分人变道还不打灯呢。顺手就能做好的事,没那意识就承认自己不行,非要找各种理由。
    Baymaxbowen
        29
    Baymaxbowen  
       128 天前
    toB 的业务根本就不需要使用
    qwertyzzz
        30
    qwertyzzz  
       128 天前
    @fwh 确实不咋地 和 vue 那个比起来
    MrDarnell
        31
    MrDarnell  
       128 天前
    语义化主要是给机器读的,尤其是搜索引擎,我现在基本不会面向搜索引擎开发了,所以不在乎语义化的问题!
    zy0829
        32
    zy0829  
       128 天前
    前端开发都用 ui 组件库,组件库很少用语义化的标签
    shizhibuyu2023
        33
    shizhibuyu2023  
       128 天前
    之前学 nextjs 的互动教程的时候,里面也提到了你说的这 2 个课程,还提到个 eslint 插件 eslint-plugin-jsx-a11y 。我是不会学的,除非公司硬性要求。这需要顶层设计,你这个开发想用不想用一点都不重要
    jguo
        34
    jguo  
       128 天前   ❤️ 8
    一个明显是导航的区域用 nav 比用 div 会多花一秒钟时间吗?不这么做只有两种原因,要么不知道 nav 标签,要么敲下三个字母前没考虑元素的作用。不论是哪种原因,本质上都是水平不行。
    marcong95
        35
    marcong95  
       128 天前   ❤️ 4
    你既然知道这个东西,顺手用上也不难吧,又不是让你多花时间弄 aria 那种

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

    @k9982874 开喷之前麻烦把「语义化标签」贴到搜索引擎搜一下
    me1onsoda
        36
    me1onsoda  
       128 天前   ❤️ 2
    有点后端 restful 内味
    Yanlongli
        37
    Yanlongli  
       128 天前   ❤️ 1
    三个标签打天下:div 、a 、input
    Yanlongli
        38
    Yanlongli  
       128 天前
    @Yanlongli 哦不对,再加上 img
    test4zhou
        39
    test4zhou  
       128 天前
    一方面是 html 语言方面实现的语义化标签,但是不同浏览器之间解析的问题,样式不统一

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

    但是现在都是使用的 UI 组件库,这些语义化的工作都是组件库提前帮我们处理好了。日常工作中大部分的时间其实会书写的 html 的需求几乎只会有页面布局的场景,大量使用 div 也是没问题。
    换一个更加实际的话来说,其实说不需要语义化的人,大部分的工作内容都是一些管理后台相关的业务。这些内部业务其实就对语义化/无障碍没有什么需求,是否在开发过程中使用语义化就完全是看自己的习惯和自己对于代码的要求。
    Q65f257Thf3o2cyZ
        56
    Q65f257Thf3o2cyZ  
       128 天前
    自己写的项目会注意.
    公司的项目,除非公司要求 ......
    hahastudio
        57
    hahastudio  
       128 天前
    即便不想写,WCAG 和 VPAT 也会按着头让写
    xqk111
        58
    xqk111  
       128 天前
    少,语义化的标签有时候还会带一些样式,还得改,不如 div 方便
    zictos
        59
    zictos  
       128 天前
    语义化有利于 seo ,反正我找到博客模版都是用了语义化标签的
    bzj
        60
    bzj  
       128 天前
    不用语义化标签,全部用 div 有种脱裤子放屁的感觉
    xxmym
        61
    xxmym  
       128 天前
    我用, 语义标签结构清晰,而且能省掉一些 class
    yunlongV
        62
    yunlongV  
       128 天前
    只有需要 seo 和 layout 的地方我才用语义化..比如 a 标签,h1-h6 ,img ,其他的地方基本上是 div 一把梭
    mixuxin
        63
    mixuxin  
       128 天前
    @ccbikai 好奇这个首页是用了什么框架还是纯手写的?见了好多主页都长这个样
    wysnxzm
        64
    wysnxzm  
       128 天前
    有点像 restfull 和 post 的问题
    7gugu
        65
    7gugu  
       128 天前
    除非是无障碍化的需求单,否则不可能主动去写语义化标签,用 div 就是为了减少心智负担,做业务最重要的是功能,功能实现好了再讨论美不美吧,很多需求在讨论美不美之前就已经暴毙了,写的再漂亮又有何用,徒增自己的工作量,让下班时间无限延后。
    Hilong
        66
    Hilong  
       128 天前
    用的 figma 自动生成的 html+tailwindcss 生成的代码就是 div 一把梭,刚入行的时候我还会用一些其他标签,现在已经习惯了 div 一把梭了
    Arrowing
        67
    Arrowing  
       128 天前
    @jguo 这个可不能一概而论,变道不打灯影响的是安全,绝对支持提前打灯。语义化标签在绝大多数场景下都是可有可无,没影响。
    mandex
        68
    mandex  
       128 天前
    我用的。内部系统用 react 的时候不太关注这个。但是我做了很多游戏官网,这个时候是要用的,因为真的要考虑 SEO ,还是有点影响的。
    hazy
        69
    hazy  
       128 天前 via iPhone
    非前端,习惯看着 MDN 能用的都尽量用。
    elevioux
        70
    elevioux  
       128 天前
    我。

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

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

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

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

    不过现在都习惯前后端分离,不关注 SEO ,搞封闭,也就无所谓了。
    keithwhisper
        71
    keithwhisper  
       128 天前   ❤️ 7
    看到补充里的 "保持谦卑,不断学习才是最重要的。"以及后面的 "个人表示 js 才是前端的核心,前端的卷是在于技术迭代更新的快", "某些老前端扣新人代码扣不出毛病,搁那里扯颜色,间距、字体...的毛病"

    你既不谦卑, 也不学习
    shqingda
        72
    shqingda  
       128 天前 via Android
    div 一把梭,span 都很少用。如果本身不是 div ,就在套一个 div 解决🤣
    awinds
        73
    awinds  
       128 天前
    老项目一般都 div table 吧,现在新的框架或 html 才会出现
    wonderfulcxm
        74
    wonderfulcxm  
       128 天前
    哈哈 ,用啊,看老外教程经常用,我也用了,特别是写 wordpress 的模板,什么 header, footer, nav , article 很常见,WP 站的的 SEO 比较好跟这是有一部分原因的。
    chill777
        75
    chill777  
    OP
       128 天前
    @keithwhisper
    。。。这你都可以看不出来?具体指什么方面?我好改正
    qiaobeier
        76
    qiaobeier  
       128 天前
    用不用都可以,不懂还用,比如我们组里的一个台妹,用<LI>不用<UL>, 或者 UL 下面跟着 DIV 这你受得了吗。
    chill777
        77
    chill777  
    OP
       128 天前
    @qiaobeier
    就是这种,我也遇到过,一会用一会不用的,读代码真的很累。
    keithwhisper
        78
    keithwhisper  
       128 天前   ❤️ 4
    Reply to #17 @chill777

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

    "某些老前端扣新人代码扣不出毛病,搁那里扯颜色,间距、字体...的毛病" 别人提出颜色, 间距, 字体的问题, 如果不符合预期, 就是问题, 被指出了就应该改好, 而不是觉得 "老前端扣不出新人代码的毛病"
    GoNtte
        79
    GoNtte  
       128 天前
    比如标签这些顺手就写了,再细致点的 aria 就算了,项目又没特殊需求,尽快搞完需求要紧
    wzdsfl
        80
    wzdsfl  
       128 天前
    @Yanlongli #38 img 也给用上 backgroud-image 给代替了
    Greendays
        81
    Greendays  
       128 天前
    原来这叫语义化,看这个帖子之前我还以为 HTML 只有这种写法(
    SniperXu
        82
    SniperXu  
       128 天前
    @wzdsfl 😂这个大可不必
    alleluya
        83
    alleluya  
       128 天前
    @TimG 这个 span 里套 div 我看有的 UI 库里写的时候也这样
    treblex
        84
    treblex  
       128 天前
    专门做网站的时候会注意,现在都是小程序就用不到了
    不过我比较在意可点击的内容要有交互效果,最简单的就是可以做个按下半透明,很多应用做出来都是铁按钮,按下去一点儿反应都没有
    qin20
        85
    qin20  
       128 天前
    1. 语义化的好处是什么,成本又需要多少,是不是什么项目都需要语义化呢?
    - 在我看来大部分项目都不需要语义化,收益很小,但是需要付出的成本却很大,很繁琐
    2. 语义化很难吗,是一个很高深的技术吗,需要炫耀和比较吗?
    - 只能扯这个的人都纯属扯淡,吃饱没事干
    TORYOI
        86
    TORYOI  
       128 天前
    细心+基础才是前端的核心
    ssb4
        87
    ssb4  
       128 天前
    水平不行,菜还不承认
    Rebron1900
        88
    Rebron1900  
       128 天前
    @chill777 不是在讨论用不用吗?用你也让人拉倒?再说现在做网站几个不用框架的?
    zhx643
        89
    zhx643  
       128 天前
    像 header section footer 经常使用
    NerbraskaGuy
        90
    NerbraskaGuy  
       128 天前
    这玩意跟水平也没啥关系吧,引申一下就是 CSS 脑子记得多就算水平高吗,靠这些东西来定于水平那前端整体上限也不会高到哪里去
    seki
        91
    seki  
       128 天前
    a11y 不一定需要语义化标签,用 role 之类的也行
    mxT52CRuqR6o5
        92
    mxT52CRuqR6o5  
       128 天前 via Android
    csr 对 seo 的影响明显远大于语义化标签啊,不把 csr 的因素排除是怎么得出 seo 全靠语义化的结论的
    k9982874
        93
    k9982874  
       128 天前 via Android
    @marcong95 发帖之前就查过这是什么“新玩意”毕竟前端喜欢搞概念,天天搞重复发明。
    有什么观点直说,别当谜语人。
    哦,你可以把「谜语人」贴到搜索引擎搜索一下
    tomowang
        94
    tomowang  
       128 天前
    我在个人项目中用,nav, main, section, footer 这些,主要想看看 lighthouse 评分之类的。但是公司项目,大部分不考察这些,很多时候也是 div 。不过基本的原则比如链接 a 标签、button 这种,能注意的还是会注意
    Torpedo
        95
    Torpedo  
       128 天前
    常年做内场项目 、app 里的 webview ,我已经不会语义化了

    另外,复杂的应用很难兼顾语义化的
    chill777
        96
    chill777  
    OP
       128 天前
    #88
    @Rebron1900
    。。。你点进去看了吗?你玩过博客吗? astro 自己生成的标签,你管是自己注重语义化?这么会往脸上贴金? git clone 的代码,你怎么不说是自己写的呢?不懂少说话,丢人玩意
    chill777
        97
    chill777  
    OP
       128 天前
    #78
    @keithwhisper
    1. 如果没有 js ,前端永远只是是切图仔。
    2. 身为程序员,code review 时扣无关紧要的外观,很 low ,都是按照 ui 和标准来的。就算扣也是产品和 leader 来说。而不是有的人仗着资历,去刷存在感。谁又比谁的审美高级?

    我说的谦卑,不代表要接受别人的 pua 。不断学习,是学习技术和知识,不是学习在不合理的指责下还要说谢谢你,我要改的。OK ?
    ccbikai
        98
    ccbikai  
       128 天前
    @chill777 #52 请问是什么框架?

    @mixuxin 我开源了一版,在这边 https://github.com/ccbikai/astro-aria
    chihiro2014
        99
    chihiro2014  
       128 天前
    all in div
    LavaC
        100
    LavaC  
       128 天前

    also the <div>
    看到这个话题就想到这个 meme 。
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2881 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 14:23 · PVG 22:23 · LAX 07:23 · JFK 10:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.