创建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中起作用.

是否建议使用更多HTML5节元素或更少?的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  7. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  8. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部