样式化HTML5元素

Question

我知道<section>标签的样式是不正确的,但是<header>和<footer>标签有关.如果使用这些标记提供了更多的语义标记,那么应该使用它们,但是,如果它们不能被设置样式,那么<div>仍然需要在标记内部插入以包装内容并对其进行样式化.

我知道<header>可以设计风格,但我不确定这样做是否正确.

所以问题是:html5标签应该设置样式还是应该<div>放在里面来处理样式？

Answer 1

规范中没有任何内容表明您不能或不应该为HTML5元素设置样式,例如<section>或<article>.它只是说你不应该在某个地方放置一个语义HTML5元素' 为了 '造型'.请<div>改用.

因此,如果你有一个语义上的理由来添加<section>或者<article>某个地方,那么无论如何都要添加它并且也可以随意设置它.但是如果为了样式目的而必须包装标记的一部分(例如添加边框或向左浮动等),但该部分在标记中没有任何语义含义,则使用a <div>.

例如:

<div class="mainBox">
    <nav class="breadcrumbs">
        <ol>
            <li>...list of links (snip)....</li>
        </ol>
    </nav>

    <section>
        <h1>Latest Tweets From Twitter</h1>

        <article>
            //... a Tweet (snip)... //
        </article>

        <article>
            //... a Tweet (snip)... //
        </article>

        //... lots more Twitter posts (snip)... //

    </section>

</div>

该<section>元素是你的页面(即您的tweets列表)的主要组成部分,也有下要求启动一个标题.但它包含在div.mainBox元素中,因为您可能想要围绕面包屑和截面部分包裹边框,即.它纯粹用于造型.但也没有什么可以阻止你造型<section>和<article>元素.