0

创建 HTML5 时使用更多标签还是更少标签更好？

我读到任何相关内容都应该包含在 中<section>，请在下面查看，一个变体带有较少的标签，第二个变体带有更多标签。

我知道有些人说标签越多越好，有些人说标签越少，但有普遍接受的规则吗？

<section class="body" id="contact">
        <section id="contact_us_form">
            <header>
                <h1>CONTACT US</h1>
                <hr />
            </header>
            <p>
                Get in touch with the Foundation<br /> with your
                questions and queries
            </p>
            <form action="">
                <input type="text" name="name" placeholder="name"
                    autocomplete="on" autofocus="on"> <input type="text" name="email"
                    placeholder="email">
                <textarea name="message" placeholder="message"></textarea>
                <button class="submit" type="submit" formaction="">SEND MESSAGE</button>
            </form>
        </section>

        <section id="contact_details">
            <section id="email_address">
                <h1>EMAIL</h1>
                <p>test@email.com</p>
            </section>

            <section id="postal_address">
                <h1>ADDRESS</h1>
                <address class="vcard">
                    <div class="adr">
                        <div class="center-name">name</div>
                        <div class="street-address">2 road name</div>
                        <div class="locality">city</div>
                    </div>
                </address>
            </section>

            <section id="phone_number">
                <h1>PHONE:</h1>
                <p>+12345678</p>
            </section>

        </section>
    </section>

或者

<section class="body" id="contact">
        <section id="contact_us_form">

                <h1>CONTACT US</h1>
                <hr />

            <p>
                Get in touch with the Foundation<br /> with your
                questions and queries
            </p>
            <form action="">
                <input type="text" name="name" placeholder="name"
                    autocomplete="on" autofocus="on"> <input type="text" name="email"
                    placeholder="email">
                <textarea name="message" placeholder="message"></textarea>
                <button class="submit" type="submit" formaction="">SEND MESSAGE</button>
            </form>
        </section>

        <section id="contact_details">

                <h1>EMAIL</h1>
                <p>test@email.com</p>



                <h1>ADDRESS</h1>
                <address class="vcard">
                    <div class="adr">
                        <div class="center-name">name</div>
                        <div class="street-address">2 road name</div>
                        <div class="locality">city</div>
                    </div>
                </address>



                <h1>PHONE:</h1>
                <p>+12345678</p>


        </section>
    </section>
4

1 回答 1

2

每当 (*) 使用标题 ( h1- h6) 时，您也可以使用section(**) 包装此标题及其内容。您可以在我对一个类似问题的回答中阅读有关此内容的更多信息。

可以，不是必须的。

HTML5 (CR) 规范说：

还鼓励作者在分节内容的元素中显式包装节，而不是依赖于在分节内容的一个元素中具有多个标题所生成的隐式节。

所以这是鼓励的，这对你的问题是肯定的。

（* 站点标题除外，即标题是其他分段内容元素的子项body且不是其他分段内容元素的子项。）

(** 除非内容适合article,aside或nav.)

我读到任何相关内容都应该包含在<section>[...]

这不是真的。“相关”可能意味着很多事情。遵循规范中的定义。请注意section（和其他分段元素article，aside和）在生成文档大纲nav中起作用。

于 2013-12-30T23:50:17.783 回答