与语义HTML混淆

我是HTML新手，想问一下你们之间的区别

<header>
<div id="showcase"></div>
</header>

及

---

两者都一样吗

A

div

是内容的任意划分。它并没有真正的语义意义，只是div内部的东西与div外部的东西是分开的。它是默认的元素，当没有语义上合适的元素时，人们可以使用它来创建一个块，类可以应用到该块

div

几乎无处不在，当时HTML语言的开发并未真正注重语义和关注点分离，也没有

页眉

，

页脚

，

节

或

导航

元素

你的问题的答案确实取决于上下文，但我想说，在

标题中放置
div
意味着
div
中的任何内容都是以某种方式与
标题的其余部分分离的。同时，将
标题
放在
div
内意味着
div
内的内容（包括
标题
）是与周围内容分离的内容的一部分

…但长话短说，除非CSS黑客依赖它，否则如果你只有一个标题，就应该删除div。
标题
标记用于用更有意义的内容替换
div
。
A
div
是内容的任意划分。它并没有真正的语义意义，只是div内部的东西与div外部的东西是分开的。它是默认的元素，当没有语义上合适的元素时，人们可以使用它来创建一个块，类可以应用到该块

div
几乎无处不在，当时HTML语言的开发并未真正注重语义和关注点分离，也没有
页眉
，
页脚
，
节
或
导航
元素

你的问题的答案确实取决于上下文，但我想说，在
标题中放置
div
意味着
div
中的任何内容都是以某种方式与
标题的其余部分分离的。同时，将
标题
放在
div
内意味着
div
内的内容（包括
标题
）是与周围内容分离的内容的一部分

…但长话短说，除非CSS黑客依赖它，否则如果你只有一个标题，就应该删除div。
header
标记用于用更有意义的内容替换
div
。
HTML5元素，如
、
和
，通常用于定义高级、广泛的标记区域，其中通常使用更通用的HTML–因此，您的第一个示例对我来说更具语义意义

但这是一个很大的假设：你的站点有一个
区域，在标题中你放置了某种类型的“showcase”组件。您的示例1适合这种结构

但是：从技术上讲，您可以在页面上有一个名为“showcase”的组件，而该showcase可以有自己的
。很多页面/应用程序都有一个
，但是没有什么能阻止你在一个页面/应用程序上有多个标题。这是你的第二个例子

因此，根据站点的结构，这两种方法在语义上都可能是正确的

PS：我假设您的
代码片段将包含现实世界中的其他HTML

当然，您可以将ID添加到标题中

<header id="showcase">
<div>... </div>
</header>


... 
HTML5元素，如
、
和
通常用于定义高级、广泛的标记区域，通常在它们内部使用更通用的HTML–因此您的第一个示例对我来说更具语义意义

但这是一个很大的假设：你的站点有一个
区域，在标题中你放置了某种类型的“showcase”组件。您的示例1适合这种结构

但是：从技术上讲，您可以在页面上有一个名为“showcase”的组件，而该showcase可以有自己的
。很多页面/应用程序都有一个
，但是没有什么能阻止你在一个页面/应用程序上有多个标题。这是你的第二个例子

因此，根据站点的结构，这两种方法在语义上都可能是正确的

PS：我假设您的
代码片段将包含现实世界中的其他HTML

当然，您可以将ID添加到标题中

<header id="showcase">
<div>... </div>
</header>


... 
它们当然不同，但区别是否重要取决于您的实际代码。在大多数情况下（但不知道showcase
用于什么），第二个可能更“正确”，因为“正确”的值合适。当然，它们是不同的，但差异是否重要取决于您的实际代码。在大多数情况下（但不知道showcase用于什么），第二个可能更“正确”，因为“正确”的值合适。id表明div存在是有原因的（即使它没有给出任何具体的语义），因此，在没有合适的替代品的情况下直接删除它可能不是最好的选择……没错，可能会出现需要包装器的情况。但是当我看到人们在只需要foobar的时候做类似于foo的事情时，我觉得很傻。保持可读性应该是我书中的首要任务。@JacqueGoupil，谢谢你的解释。因此，上下文是将导航栏和展示区（使用jumbotron类）放在导航栏的正下方