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

is better use more tags or less tags when creating html5?

i read related content should wrapped in <section>, please check below, 1 variant less tags, second more tags.

i know people better have more tags, people less, there general accepted rule?

<section class="body" id="contact">         <section id="contact_us_form">             <header>                 <h1>contact us</h1>                 <hr />             </header>             <p>                 in touch foundation<br />                 questions , 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>                 in touch foundation<br />                 questions , 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> 

whenever (*) use heading (h1-h6), may use section (**) wrap heading , content. can read more in my answer smiliar question.

may, not must.

the html5 (cr) spec says:

authors encouraged explicitly wrap sections in elements of sectioning content, instead of relying on implicit sections generated having multiple headings in 1 element of sectioning content.

so it’s encouraged, yes question.

(* except site heading, i.e., heading child of body , of no other sectioning content element.)

(** unless content appropriate article, aside or nav.)

---

i read related content should wrapped in <section> […]

this not true. "related" can mean many things. follow definition in spec. aware section (and other sectioning elements article, aside , nav) play role in generating document outline.