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>