Is it advised to have more HTML5 section elements or less?

Question

Is it better to use more tags or less tags when creating HTML5?

I read that any related content should be wrapped in <section>, please check below, one variant is with less tags, second with more tags.

I know some people say is better to have more tags, some people say less, but is there a general accepted rule?

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

Or

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

@bažmegakapa the HTML5 specification is cumbersome enough as it is and I think it would be worthwhile to actually impart some advice here — Jacques, Sep 04 '13 at 13:05
Try [HTML5 Outliner](http://gsnedders.html5.org/outliner/) to see the difference between those two markups. — Pavlo, Sep 04 '13 at 13:05
@jacques This is not the right place for that, I guess. It would be too long. — kapa, Sep 04 '13 at 13:07

score 2 · Answer 1 · edited May 23 '17 at 11:49

Whenever (*) you use a heading (h1-h6), you may also use section (**) to wrap this heading and its content. You can read more about this in my answer to a smiliar question.

May, not must.

The HTML5 (CR) spec 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.

So it’s encouraged, which is a yes to your question.

(* Except for the site heading, i.e., the heading which is a child of body and of no other sectioning content element.)

(** Unless the content is appropriate for article, aside or nav.)

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

This is not true. "Related" can mean many things. Follow the definition in the spec. Be aware that section (and the other sectioning elements article, aside and nav) play a role in generating the document outline.

Is it advised to have more HTML5 section elements or less?

1 Answers1

Linked