h5 的语义标签使用频率多么?

[FaiChou]

做前端开发有段时间了 (react), 平时写页面大致就是:

<div className={styles.container}>
	<div className={styles.top}>
    	<div className={styles.wrapper}>
    		<div>TITLE</div>
    	</div>
    </div>
    <div className={styles.content}>
    	{data.map(item =>
        	<div key={item.id} className={styles.item}>
            	     <img src={item.icon} />
                    <div>{item.title}</div>
                </div>
        )}
    </div>
    <div className={styles.bottom}>
    	<div>BOTTOM THINGS</div>
    </div>
</div>

用 div 一把梭, 平时每次看到语义标签就会在心中许下以后写页面多用语义标签, 可是每次写代码时候又会使用 div 把所有布局实现.

从来不用 header, footer, section, article, h1~h6 来分区内容, 只用 div. 文字分区也是 div, p, pre, span, 从没用过 main, strong, b, i, u 等.

大家常用的语义标签有哪些? 如何锻炼使用语义标签?

比如这样的一个布局, 哪些地方可以用语义标签?

[lwbjing]

一般在面试的时候用的比较多。。

[Pastsong]

strong, b, i, u 不是语义标签，基于 markup 和样式分离的原则也不建议使用

[Mutoo]

国内开发者的字典上是不是没有 accessibility 这个词？

[licript]

基本没用过，review 同事的代码 也发现大家基本都是 div 一把梭

[FaiChou]

@Mutoo a11y 的意识挺差的, 顶多在 img 加 alt , a 加 title, 再多就是 eslint 警告的一些会去 fix..

[IsaacYoung]

全程 div

[ChefIsAwesome]

html 是文档格式，也是做 web app 规定使用的标签。当你拿来做文档的时候，它可能在浏览器里以简化模式显示，可能在其它软件里显示，可能被转换成 pdf，word 等其它格式。这种情况下，你就应该写语义化的标签。

[Tokin]

看了下下面那个 card，如果按照我平时的习惯写，我大概会这样：
`
<section class="card card-available">
<header>
<div class="description">
<div class="left">
<h2>测试-3.8 大促销</h2>
<span>全场通用</span>
</div>
<div class="right">
<span><b>50</b>元</span>
<span>不限制金额</span>
</div>
</div>
<div class="get">
<a href="javascript:void(0);">立即领取</a>
</div>
</header>
<footer>
<a href="javascript:void(0);">优惠券详情描述 <i class="icon"></i></a>
</footer>
</section>
`

[hirasawayui]

大家都是 div 一把梭，我就比较优秀了，我还会用一些 span。

[shintendo]

@Pastsong
在 HTML5 里这些都是语义标签，没有不建议使用

[DOLLOR]

实践起来还是觉得 div+span 方便。首先那些语义标签，会担心有隐式样式、规则，另一方面，div 容易移植到其他的平台或框架（比如小程序）。

[FaiChou]

@DOLLOR

[tanranran]

面试的时候多

[FaiChou]

(cmd+enter 会直接发送回复啊.. 忽略上条)

@Tokin 谢谢


@DOLLOR 在 h5 世界里, 一直用 div+span 会有“愧疚感”, 听你这么说好多了😂

[a4854857]

最常用 div h2 span p strong header.剩下基本就没了.

[rob001]

点击的地方可以用 button