html - HTML5にヘッダーバナー画像を入れる方法

Question

私はHTML5とCSS3から始めたばかりです。私のデザインには、上部にヘッダー バナーが含まれています。つまり、ロゴとバナーの画像がすべて 1 つのバナーに含まれています。

さて、HTML5 では、どのようにコーディングすればよいでしょうか。

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

また

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

Answer 1

<figure>説明から、ロゴ/画像を追加する必要があるだけなので、ここでは使用しません。

この<figure>要素は、キャプションで画像をグループ化する必要がある場合に使用されます。

w3.orgから

figure 要素は、必要に応じてキャプションを付けたコンテンツの単位を表し、自己完結型であり、通常はドキュメントのメイン フローから単一のユニットとして参照され、ドキュメントのメイン フローから移動することなく移動できます。ドキュメントの意味に影響を与えます。

代わりに、タグを使用して画像を配置でき<img />ます<header>

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

またはコンテナに包まれて<div>います - 必要なものに応じて。

また、要素に関するこの記事<figure>を確認してください。特に、記事の最後に次のように書かれています。

<figure>ただし、要素を使用することが常に適切であるとは限りません。たとえば、グラフィック バナーを でマークアップしないでください<figure>。代わりに、単純に<img>要素を使用してください。

Answer 2

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