不要在HTML中滥用div


Posted in HTML / CSS onMay 08, 2021

概述

做前端开发的同学都知道,一个网页的基本组成部分是 HTML,JavaScript 和 CSS。开发人员通常更关注 JavaScript 和 CSS ,实践着各种语言规范和设计模式。对于 HTML 的关注度则明显偏少,只要能做出设计师画的界面就万事大吉了,不怎么去关心 HTML 是不是规范合理。于是下面的情况随处可见:

  • 按钮用的是可点击的<div>而不是<button> 元素
  • 标题用的是 <div>而不是标题元素 (<h1>,<h2> 等等)
  • <input>相应的文本标签用的是<div> 而不是<label>
  • 输入框也用绑定了键盘事件的<div>,而不是<input>

看到没?一招<div> 走天下!这样有没有问题?好像也没什么大问题,毕竟页面看起来符合设计,也能正常交互。但是你想过没有,如果<div>能解决一切,为什么还需要其余几十上百种标签呢?这就要说到 HTML 的语义化了。

什么是语义化

语义化就是说,HTML 元素具有相应的含义。它用于描述元素的内容或者跟其他元素的关系。在 HTML 里,除了<div>和<span>,基本上都是语义化的元素。

标签名的表义程度也是不一样的,比如<section>比<article>对内容的描述就更模糊。<section>也是语义化的,因为它表明内容应该从属于一个组。而<article>不仅表示它的内容从属于一个组,还是一篇文章。

为了进一步说明语义化的重要性,下面用标题和按钮元素来举例。

标题元素

<h1>是页面的标题,加上下方的<h2> 就形成了页面的层级结构。

<!-- h1, 一级标题 -->

<h1>当你的 HTML 里全是 div,那你就要小心了</h1>

<!-- h2,二级标题 -->

<h2>什么是语义化</h2>

<!-- h3,三级标题-->

<h3>标题元素</h3>

在很多富文本编辑器中,使用合适的标题结构,可以自动生成内容目录。比如本文的目录结构就是这样:

不要在HTML中滥用div

可以看到,HTML 本身就传达了整篇文章的结构信息。相反,如果全部都用<div>,就变成这样了:

  • <div>: 当你的 HTML 里全是 div,那你就要小心了
  • <div>: 什么是语义化
  • <div>: 标题元素
  • <div>: 按钮
  • <div>: 非语义化元素
  • <div>: 总结

由于<div>不附带任何含义,因此它就是扁平的结构。只要使用正确的 HTML,DOM 就会变得清晰和结构化。

按钮

按钮的作用是提交表单或者改变某个元素的状态。从定义上看,按钮具备以下特征:

  • 可获得焦点
  • 可通过敲击空格键或者回车键激活
  • 可通过鼠标点击激活

当你用<div>绑定点击事件来模拟按钮时,你就没办法用上<button>天然自带的那些语义化的交互特征。你还需要手动实现这些功能:

  • focus 状态
  • 键盘交互
  • 鼠标交互

不止如此,当屏幕阅读器碰到<button>提交</button>这个元素,它会识别出语义,告诉用户这是个提交按钮。如果只是个<div>,阅读器就不会认为它是个按钮。

当我们使用语义化的 HTML 元素后,就给内容赋予了含义,内容也就有了生命。

非语义化元素

前面提到过,<div>和<span>是非语义化元素。<div>没有给内容附加任何含义,它只是个<div>。当然,这么说也不完全准确,因为<div>和<span>之间还是有一点点区别的:

  • <div>是块级元素
  • <span>是行内元素,应该放在其他元素里面,比如<p><span>I</span>nline elements</p>

如果实在找不到对应的 HTML 元素来表示内容,那就可以用<div>或者<span>。既然设计了<div>和<span>,自然有它们的用武之地。毕竟,并不是每一个 HTML 元素都需要额外的语义。

总体原则是,尽量优先使用对应的语义化元素表示内容。退而求其次,使用含义没那么明确的标签。最后才考虑用<div>和<span>。

总结

虽然使用语义化的 HTML 元素并不会给你的项目带来明显的收益,但我还是建议你这么做。至少,语义化的 HTML 页面能带来更好的 SEO 排名、对屏幕阅读器更友好、代码可读性更高。如果你是个有追求的 Coder,相信你会认同我的看法。

以上就是不要在HTML中滥用div的详细内容,更多关于不要在HTML中滥用div的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
css display table 自适应高度、宽度问题的解决
CSS 新特性 contain控制页面的重绘与重排问题
CSS3新特性详解(五):多列columns column-count和flex布局
css position fixed 左右双定位的实现代码
Apr 29 #HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
CSS3实现的侧滑菜单
CSS完成视差滚动效果
You might like
一个数据采集类
2007/02/14 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
Laravel find in set排序实例
2019/10/09 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
python字典get()方法用法分析
2015/04/17 Python
Python数据类型详解(一)字符串
2016/05/08 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python怎么判断素数
2020/07/01 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
小学生三分钟演讲稿
2014/08/18 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
教师节感谢信
2015/01/22 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书