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

各位前端 er 写 html 的时候用语义化标签吗?

  •  
  •   VDimos · 2019-09-26 23:34:16 +08:00 via Android · 6115 次点击
    这是一个创建于 1870 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如题,w3c 倒是给出了不少参考语义化标签,但我每次都是本能性的 div 一把梭,除了少数几个功能化标签。
    比如 header,我本能性的就是 div.header 这种类型。
    根据我的观察,我发现国内绝大部分网站似乎都喜欢用 div,那么问题来了,这谁先带的头啊?
    48 条回复    2019-09-29 16:24:32 +08:00
    ayase252
        1
    ayase252  
       2019-09-26 23:37:18 +08:00
    div 不是历史遗留吗?
    VDimos
        2
    VDimos  
    OP
       2019-09-26 23:38:01 +08:00 via Android
    @ayase252 感觉这个改不回来了😂
    sker101
        3
    sker101  
       2019-09-26 23:38:45 +08:00 via iPhone
    新项目用 旧项目除非有目标用户需求 否则谁管
    molvqingtai
        4
    molvqingtai  
       2019-09-26 23:39:23 +08:00 via Android
    没有
    murmur
        5
    murmur  
       2019-09-26 23:40:02 +08:00   ❤️ 1
    我认为能写到 ul/li/a 或者 th、tr、td 这种级别就算语义化做的不错了,没什么理由强制别人要求用 footer、header、section 这些
    unicloud
        6
    unicloud  
       2019-09-26 23:49:23 +08:00 via iPhone   ❤️ 1
    想让网页更具语意化,除了在适合的场景用适合的标签外,可以了解下 schema.org
    xiaoming1992
        7
    xiaoming1992  
       2019-09-27 00:08:01 +08:00 via Android   ❤️ 1
    div 一把梭,像 @murmur 说的,用 ui/li, tr/td, button 什么的就已经够给他面子了
    ericgui
        8
    ericgui  
       2019-09-27 00:14:25 +08:00
    语义化标签对 SEO 有好处,但问题是,这个年代了,大家不搞 SEO 了

    如果你需要优化对 google 的 seo,还是用语义化标签比较好
    xiaoming1992
        9
    xiaoming1992  
       2019-09-27 00:17:29 +08:00 via Android
    @unicloud 不是一般的麻烦,事物意向千千万,要想全部用 itemtype 指明根本不可能,可能只能适用 /流行于特定场合吧。
    chenliangngng
        10
    chenliangngng  
       2019-09-27 02:02:48 +08:00
    用有自带样式的标签简直是场灾难,代表的 h 系列,p,更冷门的 em,strong,blockquote。你也许可以在自己写的页面去除掉它们所有的样式,请等一下,谁知道什么时候又会在什么地方重新复用它们呢?也许你下一份代码的使用者并未清除原有样式,或者不同的浏览器完全长得不一样,你把时间全浪费在这些琐碎无比的事情上,应该想着最开始用 div 去写是不是就好了。
    听说有更新更棒的语义话标签,header,footer,aside,article,section,我尝试着学习 article 和 section 到底有什么不同,并在实际开发中尝试使用它们所有的。可是令人沮丧的是,你有把握你的 aside 在 1 个月以后还存在吗,你的 article 在 3 个月以后是不是会变成 section 呢,这里有着全世界最高效的执行力,以及变化最快的需求。

    我看过某 html 入门书,里面强推 html 的语义化标签叫读者不要大量用 div,我读这本书的感受大概就像上面写的
    dartabe
        11
    dartabe  
       2019-09-27 03:42:58 +08:00   ❤️ 1
    搜遍了网上也很难找到 article 和 section 该怎么用的答案...
    akvo
        12
    akvo  
       2019-09-27 05:04:13 +08:00 via Android
    萌新一只,目前基本 div 一把梭
    ericgui
        13
    ericgui  
       2019-09-27 05:29:38 +08:00
    @dartabe 直接看 mdn
    dartabe
        14
    dartabe  
       2019-09-27 06:05:30 +08:00
    @ericgui 区别很模糊
    DOLLOR
        15
    DOLLOR  
       2019-09-27 08:06:37 +08:00 via iPhone
    这些语义化标签,会不会隐藏一些默认样式,甚至隐式特性呢?比如 p 标签,有多少人知道,它内部,是不允许再嵌套任何块级元素的?
    skallz
        16
    skallz  
       2019-09-27 08:15:45 +08:00   ❤️ 1
    个人感觉语义化标签,其实更多的是为了无障碍,比如给盲人朗读网站内容,那么语义化标签可以带来重读等语气变化,至于 seo,你见过国内有几个网站强调用语义化标签来优化 seo 的,在欧洲的部分网站倒是看到过些语义化标签使用的比较好点的,估计也是更多的响应无障碍这点
    bojackhorseman
        17
    bojackhorseman  
       2019-09-27 08:17:48 +08:00 via iPhone
    @DOLLOR 等到开发者发现问题的时候,隐藏特性带来的 bug 不就为人所知了。
    starcraft
        18
    starcraft  
       2019-09-27 08:33:20 +08:00
    啥卵用 反正都要清样式 div 就完事了
    NikoLan
        19
    NikoLan  
       2019-09-27 09:01:43 +08:00
    @chenliangngng 对于语义化标签的样式,每个项目的需求也是不一样的,可以先引入全局样式,在其中定义这些标签的样式,这样能最简化重复定义。语义化的标签也有助于别人阅读代码。
    minglanyu
        20
    minglanyu  
       2019-09-27 09:14:38 +08:00
    @chenliangngng 我也用了很久了 article 和 section 我是真的分不清。后来干脆全用 section 了。
    VDimos
        21
    VDimos  
    OP
       2019-09-27 09:19:13 +08:00 via Android
    @DOLLOR 对,所以记起来也麻烦
    tanranran
        22
    tanranran  
       2019-09-27 09:21:17 +08:00
    移动版用的多
    KuroNekoFan
        23
    KuroNekoFan  
       2019-09-27 09:21:45 +08:00
    前两年强调,现在可以不用强调了,div 一把梭毫无问题
    annielong
        24
    annielong  
       2019-09-27 09:29:31 +08:00   ❤️ 1
    很早以前就是 div 堆砌了,html 标签都想全部抛弃,html 标签本身就是一种标准,好多地方可以按照这个标准来无缝对接,如无障碍阅读等
    SSW
        25
    SSW  
       2019-09-27 09:35:50 +08:00
    直接 div 梭啊
    learnshare
        26
    learnshare  
       2019-09-27 10:00:04 +08:00
    近几年的技术发展已经没办法再强调语义化了
    azcvcza
        27
    azcvcza  
       2019-09-27 10:19:06 +08:00
    现在都是在用框架,啥时候不都是 div 一把梭了。
    最多 ul > li 渲染列表,
    table>tr>td 渲染表格
    别的基本就不用了吧。
    duan602728596
        28
    duan602728596  
       2019-09-27 10:48:32 +08:00 via iPhone
    用啊。我 js 变量 a、b、c、d、e 你能接受吗?
    signalas1
        29
    signalas1  
       2019-09-27 10:51:17 +08:00
    把 html 当文档就去语义化,只是借着 html 做 web app 就不用那么较真
    yahon
        30
    yahon  
       2019-09-27 11:00:17 +08:00
    1、用比不用好
    2、不用比用错好
    3、直接 DIV SPAN 一把梭
    xuejianxianzun
        31
    xuejianxianzun  
       2019-09-27 11:05:10 +08:00
    用啊,常用的那些也很好用啊,偏门的不用就完事了。
    我常用的就这几个 header、nav、section、article、aside、footer
    至于楼上诱人说的什么各个标签的隐藏特性,这些我用着反正是没发现有什么问题
    p 和 h 标签都要用 div 代替的,我觉得更多的是思维惰性吧。
    (话说为什么非要在 p 里放块级元素,这种情况本来就不该用 p
    userdhf
        32
    userdhf  
       2019-09-27 11:08:38 +08:00
    搭车问个问题,dl 里面能不能放多个 dt ?
    17681880207
        33
    17681880207  
       2019-09-27 11:22:44 +08:00
    p section article 谁分的清楚什么时候该用什么啊?
    header 和 footer 到还是可以用下。
    说到底,还是因为文化差异。
    KuroNekoFan
        34
    KuroNekoFan  
       2019-09-27 11:28:47 +08:00
    @DOLLOR 印象深刻,p 里面放 div 会导致渲染问题,而且非常隐蔽
    dusu
        35
    dusu  
       2019-09-27 11:30:40 +08:00 via iPhone
    语义化? vuetify 了解一下
    kid1412621
        36
    kid1412621  
       2019-09-27 14:26:35 +08:00 via Android
    @ericgui 想求问下 seo 怎么搞,除了服务端渲染
    xnode
        37
    xnode  
       2019-09-27 14:28:56 +08:00
    会 但是只在 服务器渲染的 情况搞
    icebreaker12
        38
    icebreaker12  
       2019-09-27 16:43:37 +08:00
    @DOLLOR 同,p 标签内嵌套块元素在初学时困扰了本人好久
    ClericPy
        39
    ClericPy  
       2019-09-27 18:52:03 +08:00
    现在怎么这么多喜欢加 er 的叫法...... 直接叫 FE 不好听么...
    当拼音发音都有一种很厉害的感觉: 我真特么 fe 了

    至于语义化标签, 这个有什么 Google firefox 准则规范之类的参考么, 平时大部分操作都是框架里直接复制的, 挺多大厂网站确实是语义化的...
    programmerM
        40
    programmerM  
       2019-09-27 21:20:25 +08:00
    在不需要兼容老 IE 的情况下我都会用语义化标签,语义化标签对于屏幕阅读器还是比较重要的。在需要兼容老 IE 的情况下,我一般用 role 属性来代替语义化标签。
    redbuck
        41
    redbuck  
       2019-09-27 22:13:07 +08:00 via Android
    @ClericPy +1 搞得用户起名困难,好名字都给占了😂
    xiangyuecn
        42
    xiangyuecn  
       2019-09-27 23:11:02 +08:00
    记一个 div 比 记一堆乱七八糟+本来就不是给人看的 玩意强得多😂 而且还不用动脑子多好😁

    毕竟 div 永远比那些表面看起来认识,实际上一无所知的玩意可靠
    ericgui
        43
    ericgui  
       2019-09-27 23:30:08 +08:00
    @kid1412621 我也在摸索中,不是大佬
    old9
        44
    old9  
       2019-09-27 23:59:42 +08:00 via Android
    @userdhf 能,且应当
    old9
        45
    old9  
       2019-09-28 00:04:42 +08:00 via Android
    dl 的问题是没有 li——ul 有 li,ol 有 li,偏偏 dl 没有
    好在 WHATWG 允许 dl 中用 div 了
    zqx
        46
    zqx  
       2019-09-28 06:25:20 +08:00 via Android
    只用 div span 说明是开发者以功能角度或当作编程语言去看待 html 的,这样写出来的功能和样式严格符合期望,兼容性还好。
    但 html 不是编程语言,是标记语言,它应该像文档一样段落分明,语义清晰......
    就好像穿衣服一样,不同场合穿不一样的,永远穿一套 divspan 就等同于只满足了保暖的低阶需求
    starsriver
        47
    starsriver  
       2019-09-28 19:59:28 +08:00 via Android
    什么年代了,我一般都是<elm:name></elm>现代 css 那么多好用的东西,非要折磨自己。

    js+:name 解决一切冲突问题。
    userdhf
        48
    userdhf  
       2019-09-29 16:24:32 +08:00
    @old9 #44 感谢老哥!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1212 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 18:23 · PVG 02:23 · LAX 10:23 · JFK 13:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.