重学前端
程劭非(winter)
前手机淘宝前端负责人
104095 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

HTML语义:div和span不是够用了吗?

你好,我是 winter。
今天这篇是我们正式开篇的第一篇文章,我想和你聊聊 HTML。
我猜屏幕那一边的你估计会说:“HTML 我很熟悉了,每天写,这不是初级程序员才学的内容么,这我还能不会吗?”
其实在我看来,HTML 并不简单,它是典型的“入门容易,精通困难”的一部分知识。深刻理解 HTML 是成为优秀的前端工程师重要的一步。
我们在上一篇文章中讲到了,HTML 的标签可以分为很多种,比如 head 里面的元信息类标签,又比如 img、video、audio 之类的替换型媒体标签。我今天要讲的标签是:语义类标签。

语义类标签是什么,使用它有什么好处?

语义类标签也是大家工作中经常会用到的一类标签,它们的特点是视觉表现上互相都差不多,主要的区别在于它们表示了不同的语义,比如大家会经常见到的 section、nav、p,这些都是语义类的标签。
语义是我们说话表达的意思,多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义标签代为表达。
在讲语义之前,我们来说说为什么要用语义。
现在我们很多的前端工程师写起代码来,多数都不用复杂的语义标签, 只靠 div 和 span 就能走天下了。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(190)

  • 最新
  • 精选
  • Scorpio
    老师也有看炮姐吗?(〃•⊖•〃)

    作者回复: 哈哈哈 不然怎么能从里面挑出ruby

    74
  • 都市夜归人
    我们是做业务系统的,团队中有一个同事(纯前端偏UI)特别喜欢使用语义化标签,但是我们在维护他的代码时总感觉他的代码乱糟糟的不好维护,很多样式就直接写标签来定义;而我们其他人(擅长做后台的)则喜欢用div,然后通过有业务含义的class来定义样式。 个人觉得做业务系统,特别是团队一起协作开发,还是尽量少用语义化标签,这样能减少后期维护的成本。

    作者回复: 1. 用语义化标签,跟用标签名选择器是两码事。 2. 给自己贴“做业务系统“的标签,潜台词是给自己找借口。 3. 不要跟没希望的团队一起工作。

    7
    41
  • Mowtwo
    虽然文章确实讲了很多有用的东西,但是对于hgroup的例子我觉得还是可以得到一些指正。 至少到目前为止,我尝试了一下,hgroup已经不再可以在网页上有人和作用了...而我搜索以后,也找到了一篇关于hgroup已经在HTML5.1标准下被取消的信息。所以文章中所提出的部分内容已经不再有效,希望重视。

    作者回复: 我本人比较倾向于WHATWG的living standard,所以保留了这个标签。 多数语义标签都不会产生实际效果,hgroup针对outline算法仍然有效。

    2
    19
  • 渭河
    <hgroup><h1>今天吃什么</h1><h2>吃肉</h2></hgroup> 为什么写出来没有出现和老师一样的效果 我这么写还是分成两行 和用hgroup包裹前没区别

    作者回复: 这是语义上的表现,并不影响实际展示效果。

    4
  • @Listener
    老师,看了之后有几个问题: 1. 我看到有的语义化文章说的一个页面最好只有一个h1标签,所以一般除了页面的主标题之外通常我都会用h2-h6去做,不知道这样用对不对? 2. article和section嵌套的正确使用方式是什么,用于页面布局是不是一般不用article? 3. 日常我们的页面都是软件界面类的,是不是没必要用这些复杂的语义化标签?

    作者回复: 1. 显然不对,我已经讲过section了,用section的情况下,只需要h1,此外,页面不一定只有一篇文章,一个主标题。 2. 仔细看本篇教程 3. 没错,我认为完全没有必要

    4
  • 吴前端
    老师 我想问个具体问题 图文列表用section来划分的话算正确使用嘛 正确的话 列表标题必须用h1嘛

    作者回复: 图文列表用section来划分我觉得至少不算错误吧 列表标题不一定要用h1,取决于页面的结构,如果你整个页面就一个列表,当然可以用h1了。

    3
  • zhangbao
    老师,您好。关于“给所有并列关系的元素都套上 ul”的误用情况,我有点疑惑,希望得到老师的解答。 1. 我现在使用 ul 的地方:网站导航栏,网页底部的相关链接部分还有文章侧边栏的相关文章部分。 我是否误用了呢? 2. 老师您说的“如果所有并列关系都用 ul,会造成大量冗余标签”,是不是比如下面的例子 ··· <nav> <ul> <li><a href="...">...<a></li> ... </ul> <nav> ··· 就是冗余了,本来可以写成 ··· <nav> <a href="...">...<a> ... <nav> ··· 不知道我这样理解对吗?

    作者回复: 这个地方不算误用,html标准中有类似的例子。

    2
  • 永旭
    读的人水平一般,

    作者回复: 额,是我自己读的啊……

    2
    1
  • 孤独的二向箔
    「还有一种情况是,HTML 的有些标签实际上就是必要的,甚至必要的程度可以达到:如果没有这个标签,文字会产生歧义的程度。」 反对winter大大这句话,我钻下牛角尖,实际上并不是必要的。比如温大的例子,用<div class="em"></div>也是可以的。 我觉得语义标签用途的本质是「简化和统一了(一种特定用途的标签的)表达方式」。 比如<div class="emphasis">xxx</div> 这个也能表示<em>的含义,但是由于每个人对同一种用途的标签,用class会有不同的表述方式,比如小明就写<div class="highlight">xxx</div>。如此一来,当其他人来理解你这段代码的含义时,认知成本就会提高,机器就更难理解了。 从上面这个例子,简化在于em 比 class="highlight" 更简单;统一在于消除了不同人不同的表达方式,这样更有利于人和机器的阅读。 而方便了机器的阅读,还可以获得一些好处: 1.生成目录 2.SEO优化 所以,遇到用语义标签的时候,一定用语义标签,至少为了SEO吧:D

    作者回复: 我讲了半天,都是讲em标签会影响句子的发音和意思。 <div class="em"></div> 是没有任何作用的。

    1
  • 是方旭啊
    1、footer 也可以和 aside , nav , section 相关联(header 不存在关联问题) 2、address 明确地只关联到 article 和 body。 这两句话中的关联,具体指的是什么?有点不太理解,望解答。

    作者回复: 所谓关联,是指信息跟文章的关联,比如address是作者的地址信息,关联就是这篇文章的作者通讯地址。

    1
收起评论
显示
设置
留言
99+
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部