HTML5-具有正確角色的語義布局

Question

我想創建一個帶有正確標記的模板。 我正在使用角色。 現在，我需要帶有背景圖像的div之類的東西。 我不能將其放在身體中，因為它必須站立在頁腳上。 帶有徽標的標題必須具有背景。 我該如何命名和放置該div？

的HTML

<header role="banner">
    <h1>My Logo</h1>
</header>
<div class="background">
<main role="main">

</main>
 </div>
<footer></footer>

Answer 1

如果您想為該類提供一些“語義”，我認為最好將div / block之類的“ wrapper”或“ main”之類用作最大的父塊。 “背景”類表示某些內容，而不是您的塊的功能。 寫語義，意味着您寫一些東西來解釋/描述里面的東西。

我寧願更改代碼：

<main //put your background on this tag>
<article>
//and make use of others semantic tags : article / section ....
</article>    
</main>