一个网站的所有 HTML 都可以用 div 标签解决，为什么还会有各种不同的标签？？

[alwayshere]

href 属性可以用 js 的 location.href 代替，img 标签可以拿 background-image 配合 background-size 解决，input 可以用 div 的 contentEditable 解决，其余的什么 p、ul、li、span 等等更不用说了，都可以解决，而且我印象中谷歌也表示过，html 标签不影响 SEO，那么我全部用纯 div 写一个网页有什么弊端？

[allen6699]

写起来很累算不？

[mscb]

话说 href 属性用 js 的 location.href 代替，搜索引擎咋抓取呀？

[alwayshere]

@mscb googlebot 支持 js 解析啊

[viko16]

我想了一下，还有 <script> <noscript> <style> <iframe> 等等你怎么破

[luwu1991]

所有的代码都可以用 01 写，为什么要用 java，php 这些高级语言啊

[Sivan]

谷歌没表示过 HTML 标签不影响 SEO，最多表示对 HTML5 的新标签支持有限。

[liangguan5]

我也好奇，键盘明明一个键就够了

[lusheldon]

照这思路，不如手写二进制，所有函数，所有类都能用 0 和 1 表示😏

[Tunar]

因为代码是写给人看的

[yonoho]

这个问题就像，我在世界各地都可以刷美元，为什么还会有各种本地货币？？

[master13]

可读性比较差吧，另外赞一下 @luwu1991 的回复

[Tunar]

@liangguan5 不是两个键吗。。

[helone]

无非就是语义化、方便无障碍阅读和搜索引擎分析等，你要是觉得都不重要，而且觉得自己用普通标签去实现 input 方便的话大可以这样玩

[hfenger]

你甚至可以用 canvas 画，写代码是用来满足需求的不是用来给处女座走极端的，合理用 div js 不但能减少工作量还能优化网页效率，减少后端压力，讲的是合理而不是走极端，人家 ul li span 一眼就能扫到，你满网页 div

[chenyu8674]

@Tunar 电报 =。=

[shoaly]

上面的喷的并不好. 我来解答一下
楼主用 div+css 理论上是可以实现 所有观感和样式, 但是 p span, h1~h6 这些标签的意义并不是为了解决看起来是啥样子, 而是将网页的内容语义化. 这样大家可以知道 p 里面包含的大概率是段落, h1 标签是主题, 都是 div 的话, 是不能做到的.

[learnshare]

两个问题：
1. 游戏应用一切东西不过都是 Pixel，为啥我们不一个点一个点画出来？
2. W3C 为啥要定义标准？

[Tunar]

@chenyu8674 =。=我以为是 0 1 两个键一晚上按出操作系统

[x86]

[alwayshere]

@shoaly 你问一下周围非搞 IT 的人，比如你父母、周围喜欢网购的女生，他们打开淘宝是不是没看网页，而是先 F12 打开 console 查看 HTML 结构，然后在大脑中渲染出网页的页面，然后再来挑选自己喜欢的商品？？

[alwayshere]

@luwu1991
@lusheldon
@learnshare 你们这些比喻都是完全两码事，用 01 代码写和用 php 及 Java 写难度一样？？？，而用 div 写和用各种 a、p、ul、span、li 等等来写难度会不一样？？？无非就是提前声明一下 display 是 inline 和 block 或者预设一下他们的 margin 和 padding 而已

[xudshen]

@alwayshere。。。你先搞清楚语义化的概念，弄明白语义化究竟是为谁服务的

[learnshare]

旧文 https://github.com/LearnShare/FE/blob/master/html/semantic.md HTML 标签语义化
以及 https://www.zhihu.com/question/66934513/answer/248036488 这个开源的 6 千行 UI 框架，能打败 QT，MFC 吗？

[satgi]

@alwayshere 考虑过无障碍吗？

[fzleee]

有一些标签是具有语义性质的，比如 article, header，section 等等，浏览器的阅读模式会需要用到这些标签， 单纯的 div 不能实现

[A3m0n]

@chenyu8674 一个键的话还需要把握时间间隔，但键盘的输入我觉得很少与时间间隔有关（游戏除外）。

[Mitt]

@alwayshere 语义化不是让你看的，是让机器分析的

[learnshare]

@alwayshere 你要明白爬虫和屏幕阅读器是不看样式的，他们得到的只有 HTML

屏幕阅读器 很深奥？可以看看 Google I/O 2017: What's New in Android Accessibility

&feature=youtu.be&t=5m38s

另外，应用的可访问性是有广泛的法律和政策要求的，国内开发者和公司没时间处理这个而已
https://www.w3.org/WAI/Policy/

[we2ex]

@alwayshere 这跟非 IT 的人有什么关系，当然是为了提高开发人员效率

[overflowHidden]

所有关于 HTML 教程里都有提到过标签语义化和无障碍阅读适配，当然现在国内开发氛围来说后者都是被忽略的，更何况像楼主这种人对语义化意义是啥都不明白。代码终究是给人看的，一个单标签就能解决的事情要复杂化，写着麻烦同事看了也想骂娘。

[murmur]

既然编译器会把所有代码转成机器码 那 abcd 这样的变量用起来不是更方便？

[SuperMild]

其实很简单，因为完全用 div 的方案也没有更优秀啊，过犹不及，太少标签不好，太多标签也不好。

在 HTML5 之前，HTML 一直有不断增加标签的趋势，这其实和完全用 div 差别不大，一个比较明显的缺点就是 class 名称不统一，你用 class="img"，我用 class="image"，他用 class="graphic"。

到了 HTML5 其实已经精简了很多，并且做了更好的分类和用途规范。把语义和外观分开，标签负责表示语义，div 配合 css 负责展示外观。

[lamada]

无障碍于都适配 + 1，很多人不了解这一块

[Cat73]

其实可以 <canvas></canvas><script></script>
然后所有东西都用 js 生成

[mengzhuo]

楼主的想法已经出现，而且业内俗称 div soap （ div 一锅汤）

HTML= Hyper Text Markup Language
markup 啊！！！亲！！！！敲黑板了！！！！中文是标记啊！！！！！
不是纯文本啊！！！！你全标记成 div （ division 的缩写），跟没标记一样啊！！！

[luoyuhui]

语义化，然后看的比较方便

[SuperMild]

还有，完全用 div，还不如直接用 XML，XML 的标签名称是不受限制的，写成 <div class="JinGongMen"> 还不如写成 <JinGongMen>，因此，历史上还曾经出现过 XHTML，但是这样做等于把语义和外观纠缠在一起了，实践证明这样行不通，XHTML 也很快走完它短暂的一生被无情地抛弃了。

[bjfane]

语义化 可能在盲人阅读的时候有用

[SuperMild]

class 名称不统一，你用 class="img"，我用 class="image"，他用 class="graphic"，这个问题怎么解决？

很简单，大家约定俗成统一用 class="img"就好了呀，然后，既然都约定了，为什么不简化为 <img>？最终就会编程现在 HTML5 的样子。

[avrillavigne]

经验送得还不够，继续。

[arzterk]

估计过两天楼主可能会发个帖子问 C 为何要搞几个循环 for while do..while
~.~

[houbaron]

考虑过用屏幕朗读器的残疾人士吗

[stanjia]

上世纪， 也有楼主类似的声音，
当时的说法是： 一个网站的所有 HTML 都可以用 table 解决，为什么还要 div

[Fedor]

又想骗我们的分

[usedname]

楼主，装逼这种事呢，适可而止，过犹不及。

[LeeSeoung]

每天净问些没营养的问题，blocked

[opengps]

@x86 能用这个做个操作系统出来不？

[youxiachai]

我们做到一定程度..还得考虑一下无障碍的需求啊..

我记得我读书的时候...学前端的时候...看老外的书..有专门的一章.讲无障碍的事情...

[Creabine]

为什么能理直气壮的问这种低级问题啊？这都不懂难道不是该去看看书 google 一下吗？
楼上的 V 友们都耐心的解答了，居然还在这强行反驳。
楼主是不是觉得自己发现了惊天大秘密，其他人用那么多标签都很智障啊？
block 了

[TomIsion]

1. location.href 不能模拟 target=_black
2. img 标签可以响应式大小撑开容器 bg 相关属性做不到
3. 表单直接提交？

楼主先把上面的问题解决下吧

其次 如果禁用了 JS 那网站？

[alwayshere]

@TomIsion 1.window.open 2. background-size 配合 div 能实现 3.我写 form 表单可从来没直接提交，都是 js 先 ajax 验证然后再 ajax 提交给后台，从来没 submit 过

[imn1]

我也一直不明白，CLI 可以解决一切，为什么要 GUI ……

[Amayadream]

一直不明白，有一块不就行了，还要五块十块一百的干嘛，反正都能用一块支付

[shuirong1997]

语义化

[onlyhot]

你才发现？我刚学的时候就感觉只用 div 就行了。

[hansZh]

1. 如果所有标签都用 div，那么实际上说明 div 是可省略的。
2. 当标准省略 div 之后的标签用什么作区分呢？ class? attributes ？又或者是 id?
3. 无使用哪种方法，最终又会因为冗余字段而简化为标签的形式。

[jinganchuqi]

不是样式 结构 行为分开吗？

[1759761439]

主要是为了方便啊😂

[workwonder]

楼主太固执了，没法看下去了

[sadpast]

@alwayshere 万一人家浏览器禁用 js 了怎么办？不要说你不用考虑这种情况(ಡ艸ಡ)噗

[howeroc]

想过盲人怎样“看”网页吗？

[yuriko]

我记得我们老师当年说过，一个网页的点击，90%的时候都是被机器在读……
合理使用标签有助于解析……

[SilentDepth]

用 JS 实现 <ol>？

[dosin]

你不适合搞前端 你搞前端你就是前端的毒瘤 你也不适合搞别的语言 你搞什么都是该领域的毒瘤 因为你的想法、性格、能力不行

[scriptB0y]

HTML5 在做的一件事情就是语义化。这是时代的步伐。网页是给人看的，代码也是要给人读的。用 vedio，img 这样的标签可以让其他服务和接口做更好的可以用性。

标签都是应该有语义的，相反，<div>是最没有语义的一个标签（ https://segmentfault.com/a/1190000002695791#articleHeader0 ），HTML5 是不倡导使用的。

楼主你在反人类吧……

[woffee]

啥也别说了，楼主下个项目只用 div 试试。实践出真知。

[jjplay]

mingge 攻械湿的继任者 —— DIV 胶父.

[VincentWang]

语义化，一是爬虫抓取，二是 WAI-ARIA。

[ssshooter]

语义化没问题，有的标签自带样式就挺讨厌，又要自己覆盖

[g0thic]

还好没遇到这样的同事

[tabris17]

语义化啊，都是 div 看着不累吗。再说了，有 textarea 不用，非要用 contenteditable 的 div 吗

[Zzzzzzzzz]

@TomIsion 其实原本 xhtml 1.0 严格模式就已经要把 target=_blank 给砍了, 要求用 rel 属性和 window.open 的 js 替代， 不过后来 xhtml 死了.....此处当 @laogui

[xiaobai012]

既然只吃百米饭就可以吃饱，为啥还要吃菜

[ningbo16]

你可以理解为这些标签分别对 div 进行了封装，比如说 h 标签封装了字号颜色，p 标签封装了间距等等

[Tokin]

明明一张图片可以做的事情，为什么要用 HTML+CSS

[anla]

似乎，期初的时候，网页是 table 的，table 没有 div 万能，就有各种标签补充。div+CSS 出现并流行之后，table 外的标签留存。另外，就是搜索引擎，搜索引擎一开始也不是那么聪明，你有各种语义化的标签，它比较容易读懂，读懂了，就容易给网站带来流量。那么，事到如今，如果不在乎搜索引擎的流量，那就另说了，可以 DIV 干到底。

[oroge]

使用带语义的标签意味着 accessibility, 譬如盲人的读屏软件知道 <h1> 代表一个标题，可以告诉盲人用户，但是如果你用 <div class=“ my-own-heading-class ”> 那么读屏软件就不知道“这是标题”。 与此相关的还有 aria 等属性。

话说回来，尽管我知道的国际大厂都注重残障人士友好（包括苹果微软等，看看各个 OS 的「辅助功能」功能列表就能说明情况了），但是国内大厂很多都不注重 accessibility （之前听说微信不支持盲人读屏软件，不知道现在状况如何）。希望愿意为此付出的公司会更多吧。不过大概这得等到普遍仓廪实的那一天 ==。

带语义的标签另一个好处是对爬虫友好（比如 SEO ）。

[linus3389]

大家都在无脑怼楼主么。。。我觉得楼主挺创新的啊。

其实，只是现在大多数从业人员的认知和接受是如此，大家也就默认接受了这种 HTML 的格局。业界进步就是要不断打破格局的。

现代的 js 生态已经很强大了，强大到就算一个 Framework 都可以有自己的生态比如 React Vue Angular 之流。

楼主你可以自己实现一套框架，只有 DIV。如果火了，各种标准就会来适配你，从业人员也都会来习惯你。

[dongsuo]

写写试试不就知道了，你自己写个页面就知道有多蛋疼了

[demo]

楼主试试 pugjs 吧， 这样 div 三个字母都不用写了。🙂

[codehz]

@linus3389 #78 强行创新。。DIV+CSS 明明是上个时代的潮流。。。。想体验弊端的可以把眼睛闭上，用屏幕阅读器看看你的网页。。然后看看还能不能想象你的网页是怎么样的，之前的哪些功能该怎么操作。。特别是你把按钮也用 div 实现之后，屏幕阅读器甚至不能让你按下按钮。。。。。
真的要自己用 div 实现一个框架，为了让屏幕阅读器正确识别，还是得加上大量的 role 标签，得不偿失

[phy25]

我猜这问题的答案去 W3C 的讨论组和规范去找应该是有的。楼这么高，也没看到楼主的正面讨论，下面这些就算是写给自己的吧。
如果硬是觉得语义化没用，可以这么理解：用 div[style~="background"] 代替 img[src] / photo，代码长度会变长。HTML 的那一类块元素都可以用 div 外加 CSS 改写、JavaScript 收事件下来代替，但要覆盖掉浏览器默认的样式表、ARIA 行为，自然会增加代码量，也就是增加下载时间和工作量。（当然自从随便一个网页的 JavaScript 就动辄几兆之后 HTML 的简洁和语义就不怎么被人关注了）
以前可能为了低成本地向下兼容，有些 HTML5 的新元素还不敢用，用 div 包揽也是正常。可现在正常并没有这么做的理由了。如果还反倒扩大使用范围的话，要是样式表、JS 真的掉了（浏览器是可以这么工作的），网页也就变得一塌糊涂了，那种文本式浏览器更是不用说。
这也是个人为啥很讨厌有些网页里，把信息表格硬是做成图的原因之一。

[cctv1005s927]

作为一名前端工程师我可以很明确的和你说：
为什么不能用 div 一锅端，
因为判断一个 html 结构写的好不好，最重要的一点就是在没有 css 和 js 的时候，网页的内容还能被用户所理解，结构还是清晰的，这样的才是好的 html。

当因为网络原因导致 css 和 js 无法加载出来的时候，优秀的 html 结构，对用户的体验来说，比全是 div 要好非常多。

[Reign]

@cctv1005s927 js 和 css 都写在 HTML 不行么？非要单独弄成一个文件？

[AlisaDestiny]

你这个问题就跟所有变量都可以用 abc 来表示。为什么还要取那么长的名字一样。

[Mark24]

楼上都冷嘲热讽，就不能直接回答么？

爬虫和屏幕阅读器，都是只读 HTML，语义化的标签，可以直接分析。

[maplewjk]

好看，好用。不无聊～

[lukunlin]

爬虫先不说哈，
就问你，要图片的高撑开父级别，你用 background 你怎么撑开？你怎么知道图片的大小是多少~

[j]

明确回答楼主：可以全 div，没毛病。
另外反对 cctv1005s927 ， 不开 css 和 js 的并非大众用户，你大可以在服务器端给他输出个别的模板，没必要混淆。

[sampeng]

恩，你大可这样干。。一直做到维护不下去的时候闪人。。留萌新在 div 的海洋中痛苦

[SourceMan]

这样的人，我们应该宠着他：你对~你都对，继续加油哦~你的想法非常对~

[flyingghost]

1，历史。div 是 HTML2.0 出场的，div 加持一堆 css 和 js 属性那是更久以后。a 呢？ HTML1.0 就有了。我用 a 用的好好的，凭什么 div 出来我就要改？历史代码还要不要？接受新事物也可以，只要新事物在某些方面巨幅超越旧习惯——然则并没有。
2，懒，方便。有一种写法是“<div 可编辑，带框，可焦点，可记录值，可和表单合作。。。>”，巨臭巨长一大堆属性。没办法，div 有五万种属性可供配置，为了每个具体场合有适合的表现，必须配置妥当。这么恶心的代码，我分分钟抽象出一个新标签叫<input>。你叫他语法糖、模板、组件。。。随便什么都可以，背后的原因都可以是懒。分化是必然结果。
3，语义化。所有的代码，本质上都是给人读的。越通俗越直白越自然越好。
4，效率。漫长的、复杂的 div 显然不便于网络传输和浏览器解析。高度抽象后简洁的<input>更有效率。
5，简单。不是每个人都能灵活使用 div+css+js 的。给他们一目了然的 p、img 和 a，他们已经可以写网页了！用的人多的技术才是能活下来的技术。
6，还有其他，懒得写了，直接进入总结吧。

lz 能提出这种问题，技术水平一般在 1-2 年左右，能力有长足进步，逐渐发现自己能在原本以为非常稳固的世界中用某些 tricks 打开新的大门。这时候很容易对旧世界产生思考，产生质疑，有一种打破和改造旧世界的冲动。
但，压住，压住。在冲动之前，应该理智。先想清楚，“存在即合理”这句话的意义何在。抛弃自己的立场，客观全面的评价旧事物，再谈打破和改造的必要性、程度、方式。

也许 lz 现在已经跨越了技术方向的第一个门槛。现在要补的，是设计、工程、人性、哲学等比较宏大比较虚的话题了。: )

[oonnnoo]

可以解决所有的内容标签，应该是 img 吧

: )

[oonnnoo]

@oonnnoo #93 或者是 video 标签～

[zhjits]

因为 HTML 是一种 Markup Language

[lwbjing]

这样骗铜币的方法 get 到了~

[oswuhan]

不同标签都有预定义样式，早期网页的布局思想与文本的排版思想是一致的

[sexoutsex2011]

语义化的需要吧。

[rashawn]

因为以前不是一个 div 就够了
以前写个博客不还得敲 p 标签

[dangyuluo]

吃米饭就能饱，还要馒头花卷面条小米干什么？