直接在 div 里面写文字合适吗?

2018-01-15 11:47:57 +08:00
 hoythan

有个朋友一直喜欢直接在 div 里面写文字,从来不用 h 标签 p 标签,遇到有不一样的内容就 div+span 标签实现,我觉得不合适,但是找不到相关不合适言论内容。

3893 次点击
所在节点    问与答
15 条回复
noea
2018-01-15 11:50:17 +08:00
如果你写的文字不需要排版,也没有什么标题,列表等语义化的标签,那么随意。
反之 div 里面,嵌套你需要的排版标签。
zzuieliyaoli
2018-01-15 11:50:29 +08:00
Jiavan
2018-01-15 11:51:44 +08:00
语义化不总是最合适的
fe619742721
2018-01-15 11:53:16 +08:00
这样的代码没有 语义化和 可访问性,维护起来也很蛋疼。

HTML 语义化 语义化的含义就是用正确的标签做正确的事情,html 语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式 CCS 情况下也以一种文档格式显示,并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

一般来说要注意一下,不过现在的网络环境,也很少去考虑 css 加载不出来的情况了。
涉及到兼容性开发的,我一般会用 div 去替代按钮啥的
hoythan
2018-01-15 11:53:55 +08:00
@Jiavan 所以你认为 div 里面直接写内容是没问题的吗,确实他不会报错
hoythan
2018-01-15 11:58:16 +08:00
我只想反驳他认为的 没有报错就不会有问题 的看法,现在我都怀疑我坚持写 p h 标签的意义了。如果网站不需考虑 seo 的话(企业内部服务)。
lhx2008
2018-01-15 12:02:54 +08:00
html 语义化方便阅读,而且 css 选择器更直观。
像 header section footer 啥的标签本身都是 div,但是还是出了标准。
hoythan
2018-01-15 12:03:43 +08:00
@lhx2008 css 样式不是一般都基于 class 吗
shapl
2018-01-15 12:04:00 +08:00
小程序写得多,就释怀了。。。
hoythan
2018-01-15 12:05:14 +08:00
@shapl 小程序不是也有 text 标签嘛
Humorce
2018-01-15 12:15:04 +08:00
是的,html 80%以上都可以直接用 div 标签解决。

用双脚可以走遍亚欧大陆大部分地方,但是去不了其他大洲。

哦,不对,不借外力的情况下且考虑实际情况,还可以从苏伊士运河可以游过去非洲。
crysislinux
2018-01-15 12:19:45 +08:00
div 有啥问题么,随便啥都可以放进去,p 就不一样了,只能放很少的几个标签进去,我只有真逻辑上的段落才用 p。
imn1
2018-01-15 12:28:43 +08:00
其实在互联网发展过程中,这种相互转变已经发生过多次,并没有最终统一标准,所以两种写法都不能说错

曾经 html4 时代,当时流行 div 重构,建议取消 p/h 等标签,甚至主张 div/span 替代 table
当时这种主张的理由是,排版理应交由 css 负责,p/h 等使用 css 不太方便,div 等提供内容就足够了
第二个理由是,p/h 标签在正文(文章性质)网页还可能有用,但在引导、导航,非文章页没什么用处,而且也不方便在 p 标签内插图,对图文并茂的文章排版困难,而 div 完全可以实现并取代这些标签的作用
div 的最大作用是更方便后台向前台输出数据

后来,html5 又重新提出语义化标签,认为简洁的标签更方便一般人,尤其是非程序员撰写文章,更大方便信息交流
例如很多科学工作者(扩展到各行各业),经常要发布一些发现、理论、观点,但他们未必人人都会 css 排版
其中很重要的原因是批判 w3c 推行的 xhtml 标准,当时 xhtml 标准非常严格,稍微标签错了一个字符,整个页面都不能显示,但阅读者并不了解 xhtml,只会怪责浏览器或者 ISP,所以浏览器商怒了,绕过 w3c 自行组织制定 html5 标准,后来 w3c 妥协,重新把 google 带头开发的 html5 收编到新标准,舍弃了 xhtml
gl09025
2018-01-15 16:20:13 +08:00
我觉得语意化其实最大的作用是对 『无障碍阅读』 优化的。很多无障碍阅读软件是根据标签来阅读的,要不然无障碍阅读软件就不认识。
geelaw
2018-01-15 16:39:12 +08:00
如果想要的话,完全可以用 div 代替 p、h 系列,包括 accessibility 的问题——用 aria 属性解决。

但是何必这么麻烦呢?

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

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

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

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

© 2021 V2EX