Question

创建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>

Answer 1

每当（*）使用标题（h1 - h6）时，您也可以使用section（**）来包装此标题及其内容。您可以在my answer中阅读有关此问题的更多信息。

可以，而不是必须。

HTML5（CR）规范says：

还鼓励作者明确地将部分包含在切片内容的元素中，而不是依赖于在切片内容的一个元素中具有多个标题而生成的隐式部分。

所以鼓励，这对您的问题是是。

（*除了网站标题，即标题为body的子标题而且没有其他标题内容元素。）

（**除非内容适合article，aside或nav。）

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

事实并非如此。 “相关”可能意味着许多事情。 Follow the definition in the spec.请注意，section（以及其他切片元素article，aside和nav）在生成文档outline中发挥作用。

是否建议使用更多HTML5节元素或更少？

1 个答案: