如何在HTML5中放置标题横幅图像

Question

我刚开始使用HTML5和CSS3。我的设计在顶部包含一个标题横幅。也就是说，徽标和横幅图像都在一个横幅中。

现在，在HTML5中，我该如何编码呢？​​

<header>
<figure></figure>
</header>

或

<header>
<div>Image Header Banner</div>
</header>

Answer 1

根据您的说明，您不会在此处使用<figure>，因为您只需添加徽标/图片。

当您需要使用标题对图像进行分组时，会使用<figure>元素。

来自w3.org

  

数字元素表示内容单位，可选地带有   标题，即自包含的，通常被称为a   来自文档主流的单个单元，可以移动   远离文件的主流而不影响   文件的含义。

相反，您可以使用<img />

中的<header>标记放置图片

<header>
 <img />
 <img />
</header>

或包裹在<div>容器中 - 取决于您的需要。

另外，请查看有关<figure>元素的this article，特别是在文章末尾说明：

  

但是，使用<figure>元素可能并不总是合适的。   例如，图片横幅不应标有<figure>。   相反，只需使用<img>元素。

Answer 2

<header>
    <figure>
        <img src="image" alt="Logo" />
    </figure>
</header>