各位前端 er 写 html 的时候用语义化标签吗? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
VDimos
V2EX    程序员

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

  •  
  •   VDimos 2019-09-26 23:34:16 +08:00 via Android 6604 次点击
    这是一个创建于 2205 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如题,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
    xiaming1992
        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 区别很模糊
    AV1
        15
    AV1  
       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 的,在欧洲的部分网站倒是看到过些语义化标签使用的比较好点的,估计也是更多的响应无障碍这点
    dumbass
        17
    dumbass  
       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
    &nsp;  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
       
    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 的问题是没有 liul 有 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     Solana     3443 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 29ms UTC 04:23 PVG 12:23 LAX 21:23 JFK 00:23
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86