语义

span和div都是没有关联语义的元素。当你需要一个元素(例如样式化或JavaScript目标)，但HTML中没有适合内容的语义元素时，可以使用它们。

样式

这两个元素都不是浏览器内置样式表的主要样式。关键的区别在于display属性。Span元素默认显示为inline, div元素默认显示为block。

结构

span和div元素允许在HTML文档的不同位置。

你会在这里看到许多早期的答案，它们被称为“内联元素”和“块元素”。这是HTML 4做出的区分，现在已经过时了(尽管作为一般准则很有用)。(HTML 4定义为内联或块的元素与默认的CSS显示属性值之间有很强的相关性，但不是100%。)

HTML 5采用了一种更微妙的方法来定义哪些元素被允许放在哪里。

span元素可以用于“需要措辞内容的地方”，也可以包含“措辞内容”。

同时，div元素可以“在期望流内容的地方”(在这种情况下，它可以包含“流内容”)和“作为dl元素的子元素”，在这种情况下，它可以包含“一个或多个dt元素后面跟着一个或多个dd元素，可选地与脚本支持元素混合”)。

它比HTML 4的视图要复杂得多，但是规范有很好的超链接，并且有一个验证服务可用。

您可以使用块/内联的区别作为一般准则。如果你需要生成新的行，或者需要换行的内容(如段落、表格、文章和章节)，你可能应该使用div。如果你有在一行中一起流动的内容(如单词)，那么你可能应该使用span。(当然，前提是没有合适的语义元素)。

Div是一个块元素，span是一个内联元素，它的宽度取决于它自己的内容，而Div不是

<div>是块级元素，<span>是行内元素。

如果你想对一些内联文本做一些事情，<span>是正确的选择，因为它不会像<div>那样引入换行符。

正如其他人所注意到的，这些都隐含着一些语义，最重要的事实是，<div>暗示了文档中的逻辑划分，类似于文档的一个部分或其他内容，例如:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

这里已经有了很好的、详细的答案，但没有可视化的例子，所以这里有一个简单的例子:

<div>这是一个div <div>这是一个div <div>这是一个div <span>这是一个span <span>这是一个span <span>这是一个span

<div>是块标记，而<span>是行内标记。

正如在其他回答中提到的，默认情况下div将被呈现为块元素，而span将在其上下文中内联呈现。但两者都没有任何语义价值;它们的存在允许您对任何给定的内容应用样式和标识。使用样式，可以使div像span一样，反之亦然。

div的一个有用的样式是内联块

例子:

http://dustwell.com/div-span-inline-block.html CSS显示:内联vs内联块

我曾在游戏网页项目中使用内联块取得了巨大的成功。

在HTML中，有一些标记为内容添加结构或语义。例如，<p>标记用于标识一个段落。另一个例子是有序列表的<ol>标记。

如上面所示，当HTML中没有合适的标记时，通常会使用<div>和<span>标记。

<div>标记用于标识文档的块级节/除法，该节/除法前后都有换行符。

可以使用div标签的例子有页眉、页脚、导航等。然而在HTML 5中，这些标记已经提供了。

<span>标记用于标识文档的内联节/分。

例如，span标记可用于向元素添加内联象形文字。