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

前端之家收集整理的这篇文章主要介绍了是否建议使用更多HTML5节元素或更少?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
创建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>

解决方法

每当(*)使用标题(h1-h6)时,您也可以使用部分(**)来包装此标题及其内容.您可以在 my answer中阅读更多有关此内容的问题.

可是,不是必须的.

HTML5(CR)规范says

Authors are also encouraged to explicitly wrap sections in elements of sectioning content,instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

所以鼓励,这对你的问题是肯定的.

(*除了网站标题,即标题是身体的孩子而没有其他切片内容元素.)

(**除非内容适用于文章,否则或导航.)

I read that any related content should be wrapped in <section> […]

这不是真的. “相关”可能意味着许多事情. Follow the definition in the spec.请注意,部分(以及其他切片元素文章,旁边和导航)在生成文档outline中起作用.

原文链接:https://www.f2er.com/html5/168844.html

猜你在找的HTML5相关文章