HTML语义：div和span不是够用了吗？
该思维导图由 AI 生成，仅供参考
语义类标签是什么，使用它有什么好处？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
HTML语义标签在前端开发中扮演着重要角色。本文深入探讨了语义标签的概念及其在不同场景下的应用。作者指出，尽管使用div和span等标签已经能够满足大部分需求，但正确地运用语义标签却能带来诸多好处。语义标签不仅增强了可读性，也有利于搜索引擎检索和支持读屏软件，对开发者和机器阅读都更为友好。然而，不当使用语义标签则会带来负面影响。文章深入浅出地解释了语义标签的重要性和使用方法，包括作为标题摘要的语义类标签和整体结构的语义类标签。此外，还介绍了一些重要的语义标签使用场景，如作为自然语言延伸的语义类标签，以及消除歧义的情况下的使用。总之，正确使用语义标签对前端开发具有重要的参考价值。
《重学前端》，新⼈⾸单¥59
全部留言(190)
- 最新
- 精选
Scorpio老师也有看炮姐吗？(〃•⊖•〃)作者回复: 哈哈哈 不然怎么能从里面挑出ruby
2019-01-2274
都市夜归人
我们是做业务系统的，团队中有一个同事（纯前端偏UI）特别喜欢使用语义化标签，但是我们在维护他的代码时总感觉他的代码乱糟糟的不好维护，很多样式就直接写标签来定义；而我们其他人（擅长做后台的）则喜欢用div，然后通过有业务含义的class来定义样式。 个人觉得做业务系统，特别是团队一起协作开发，还是尽量少用语义化标签，这样能减少后期维护的成本。作者回复: 1. 用语义化标签，跟用标签名选择器是两码事。 2. 给自己贴“做业务系统“的标签，潜台词是给自己找借口。 3. 不要跟没希望的团队一起工作。
2019-01-22741
Mowtwo虽然文章确实讲了很多有用的东西，但是对于hgroup的例子我觉得还是可以得到一些指正。 至少到目前为止，我尝试了一下，hgroup已经不再可以在网页上有人和作用了...而我搜索以后，也找到了一篇关于hgroup已经在HTML5.1标准下被取消的信息。所以文章中所提出的部分内容已经不再有效，希望重视。作者回复: 我本人比较倾向于WHATWG的living standard，所以保留了这个标签。 多数语义标签都不会产生实际效果，hgroup针对outline算法仍然有效。
2019-01-23219
@Listener老师，看了之后有几个问题： 1. 我看到有的语义化文章说的一个页面最好只有一个h1标签，所以一般除了页面的主标题之外通常我都会用h2-h6去做，不知道这样用对不对？ 2. article和section嵌套的正确使用方式是什么，用于页面布局是不是一般不用article？ 3. 日常我们的页面都是软件界面类的，是不是没必要用这些复杂的语义化标签？作者回复: 1. 显然不对，我已经讲过section了，用section的情况下，只需要h1，此外，页面不一定只有一篇文章，一个主标题。 2. 仔细看本篇教程 3. 没错，我认为完全没有必要
2019-01-225
渭河<hgroup><h1>今天吃什么</h1><h2>吃肉</h2></hgroup> 为什么写出来没有出现和老师一样的效果 我这么写还是分成两行 和用hgroup包裹前没区别作者回复: 这是语义上的表现，并不影响实际展示效果。
2019-02-244- 吴前端老师 我想问个具体问题 图文列表用section来划分的话算正确使用嘛 正确的话 列表标题必须用h1嘛
作者回复: 图文列表用section来划分我觉得至少不算错误吧 列表标题不一定要用h1，取决于页面的结构，如果你整个页面就一个列表，当然可以用h1了。
2019-02-183 
永旭读的人水平一般,作者回复: 额，是我自己读的啊……
2019-10-1522
zhangbao老师，您好。关于“给所有并列关系的元素都套上 ul”的误用情况，我有点疑惑，希望得到老师的解答。 1. 我现在使用 ul 的地方：网站导航栏，网页底部的相关链接部分还有文章侧边栏的相关文章部分。 我是否误用了呢？ 2. 老师您说的“如果所有并列关系都用 ul，会造成大量冗余标签”，是不是比如下面的例子 ··· <nav> <ul> <li><a href="...">...<a></li> ... </ul> <nav> ··· 就是冗余了，本来可以写成 ··· <nav> <a href="...">...<a> ... <nav> ··· 不知道我这样理解对吗？作者回复: 这个地方不算误用，html标准中有类似的例子。
2019-01-222
孤独的二向箔「还有一种情况是，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> 是没有任何作用的。
2019-02-211
是方旭啊1、footer 也可以和 aside , nav , section 相关联（header 不存在关联问题） 2、address 明确地只关联到 article 和 body。 这两句话中的关联，具体指的是什么？有点不太理解，望解答。作者回复: 所谓关联，是指信息跟文章的关联，比如address是作者的地址信息，关联就是这篇文章的作者通讯地址。
2019-02-191