从语义化的角度，标签中的内容应该使用标签吗？-H5教程-PHP中文网

从语义化的角度，标签中的内容应该使用标签吗？

php中文网

发布： 2016-06-07 08:43:15

原创

2792人浏览过

<ul>
    <li> Hi I am an item. </li>
    <li> And I am another one. </li>
</ul>

登录后复制

回复内容：

都可以。
以前我也纠结什么元素应该放什么元素里面，直到《精通 CSS 与 HTML 设计模式》的作者提出了三个名词，把块级元素划分成三类：结构化块状元素、终端块状元素、多目标块状元素。

属于结构化块状元素和多目标块状元素，它让文档形成结构，也是多目的的，即能包含内容也能包含其他块级元素。

属于终端块状元素，它下面不能再出现其他块级元素，只能包含内容。
不被推荐的是这种写法：

<span class="nt"><li></span>text<span class="nt"><p></span>text<span class="nt"></p></li></span>

登录后复制

从题主给的例子来看，两者从语义上是等价的。
4.4 Grouping content
3 Semantics, structure, and APIs of HTML documents
一句或多句话组成段落，不会因为有没有

而改变本身的语义，所以有时候

是多余的。如果你的 li 里面只有一个 p，显然就是多此一举啊。
个人感觉实际项目中强求语义化和通过标准测试的强迫症是病，得治。具体情况具体分析吧，如果只是楼主这种情况P标签应该是多余的，但是如果用li进行布局的话，里面是可以用p标签的，比如下面这个布局应该是正常的:

<span class="nt"><ul></span>
		<span class="nt"><li></span>
			<span class="nt"><img </span alt="从语义化的角度， 标签中的内容应该使用  标签吗？" > <span class="na">src=</span><span class="s">""</span><span class="nt">></span>
			<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!<span class="nt"></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2442">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176594160147948.png" alt="与光AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2442">与光AI</a>
                            <p>一站式AI视频工作流创作平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="与光AI">
                                <span>66</span>
                            </div>
                        </div>
                        <a href="/ai/2442" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="与光AI">
                        </a>
                    </div>
                </span>
		<span class="nt"></li></span>
		<span class="nt"><li></span>
			<span class="nt"><img </span alt="从语义化的角度， 标签中的内容应该使用  标签吗？" > <span class="na">src=</span><span class="s">""</span><span class="nt">></span>
			<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!<span class="nt"></p></span>
		<span class="nt"></li></span>
		<span class="nt"><li></span>
			<span class="nt"><img </span alt="从语义化的角度， 标签中的内容应该使用  标签吗？" > <span class="na">src=</span><span class="s">""</span><span class="nt">></span>
			<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!<span class="nt"></p></span>
		<span class="nt"></li></span>
		<span class="nt"><li></span>
			<span class="nt"><img </span alt="从语义化的角度， 标签中的内容应该使用  标签吗？" > <span class="na">src=</span><span class="s">""</span><span class="nt">></span>
			<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!<span class="nt"></p></span>
		<span class="nt"></li></span>
		
	<span class="nt"></ul></span>
登录后复制

li 列表也！ p段落也！

首先p代表的是一个段落，纵观整个li，是否有其他内容需要与这句话"断",要是没有的话，那你要段就必然显得多此一举，就好比多讲了一句废话，废话当然是木意义的。

这两种里加不加p标签效果都一样呀

如无必要，勿增实体

两者表现都一样，所以不需要用p标签。
在实现了功能的前提下，能少写代码就少写，越精简越好。

ps想到一句话，多读一点书，少写一行代码。

若你用了p，为何又要用li？
若你用了li，为何又要用p？
你的内容到底是列表还是段落分不清吗？…