• div是块元素
• span是一个内联元素。

这意味着要在语义上使用它们，应该使用 div 来包装文档的各个部分，而应该使用 span 来包装文本、图像等的一小部分。

例如：

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

请注意，将块级元素放置在内联元素中是非法的，因此：

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

…是非法的。

编辑：从 HTML5 开始，一些块元素可以放置在一些内联元素中。请参阅此处的 MDN
参考以获得非常清晰的列表。以上仍然是非法的，因为<span>只接受短语内容，并且<div>是流内容。

你问了一些具体的例子，所以是从我的保龄球网站BowlSK中摘录的：

<div id="header">

  <div id="userbar">

    Hi there, <span class="username">Chris Marasti-Georg</span> |

    <a href="/edit-profile.html">Profile</a> |

    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>

  </div>

  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>

</div>

好吧，怎么回事？

在我的页面顶部，我有一个逻辑部分，即“标题”。由于这是一个部分，因此我使用了一个 div（具有适当的
id）。其中，我有几个部分：用户栏和实际页面标题。标题使用适当的标签，h1。作为一个部分的用户栏被包裹在一个div. 其中，用户名包含在一个
中span，以便我可以更改样式。如您所见，我还在span标题中包裹了大约 2 个字母 - 这允许我在样式表中更改它们的颜色。

另请注意，HTML5 包含一组广泛的新元素，这些元素定义了常见的页面结构，例如文章、部分、导航等。

HTML 5 工作草案的第 4.4
节列出了它们并给出了它们的用法提示。HTML5
仍然是一个有效的规范，所以还没有什么是“最终的”，但是这些元素中的任何一个是否会出现在任何地方都是非常值得怀疑的。如果您想在某些旧版本的 IE
中设置这些元素的样式，则需要使用 javascript hack -
您需要document.createElement在源中指定任何这些元素之前使用每个元素创建一个。有很多库可以为您解决这个问题 -
一个快速的谷歌搜索出现了html5shiv。