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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2103 天前的主题，其中的信息可能已经有所发展或是发生改变。

做前端开发有段时间了 (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 等.

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

demo

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

div

className

语义

标签

16 条回复 • 2019-02-23 03:15:17 +08:00

lwbjing

2019-02-22 10:08:06 +08:00

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

Pastsong

2019-02-22 10:10:58 +08:00

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

Mutoo

2019-02-22 10:14:17 +08:00

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

licript

2019-02-22 10:16:19 +08:00

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

FaiChou

2019-02-22 10:16:22 +08:00

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

IsaacYoung

2019-02-22 10:17:14 +08:00 via iPhone

全程 div

ChefIsAwesome

2019-02-22 10:19:27 +08:00

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

Tokin

2019-02-22 11:48:59 +08:00

看了下下面那个 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>
`