Question

让我们说我有一个带有标题的网站，其下有两列（一个作为文章的包装，另一个作为侧边栏）。现在，我可以使用main作为这些文章的包装器：

<main>
    (articles here)
</main>
<aside class="sidebar">
    (sidebar here)
</aside>

或者我应该将此<main>与<div>包裹在一起？

<div id="left-column">
    <main>
        (articles here)
    </main>
</div>
<aside class="sidebar">
    (sidebar here)
</aside>

一般情况下：我们是否也可以使用语义标签来定制/显示CSS（通常是div元素的域）？

Answer 1

你不应该添加那些语义元素只是因为你需要CSS钩子，但是如果你使用这些元素是合适的，那么使用它们就是完美的，也是一种很好的做法也作为CSS的钩子。

如果出于样式原因需要更多现有元素，请添加span / div元素（因为它们是唯一的＆＃34;非语义＆＃34; / meaningless元件）。

在每个要设置样式的语义元素周围添加span / div会使标记膨胀，并使其更难理解/维护。但是，为HTML5引入的元素（如main）执行此操作可能有一个原因：如果您需要在不支持这些新元素的旧浏览器中实现某种样式。

Answer 2

“新”HTML5元素是与其他元素一样的元素（不是input[type="hidden"]或head ^^而是div或span或p或h6）。它们带来了语义，但是当涉及到样式时，在支持IE9 +的浏览器中（除了主要版本），你可以display: flex他们或float或position: relative甚至{{1} }。
IE8需要一个名为htmlshiv的polyfill，但那是oooold。不支持IE8（因为MS甚至不支持可以运行的操作系统！）

除了主要和前面的兄弟之外，我可以把它放在一边作为文章或部分。

display: inline

<main>标记作为列包装器

2 个答案: