Рекомендуется ли иметь больше элементов раздела 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>[email protected]</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>[email protected]</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>

ОТВЕТЫ

Ответ 1

Когда (*) вы используете заголовок (h1 - h6), вы можете также использовать section (**) для обертывания этого заголовка и его содержимого. Вы можете узнать больше об этом в моем ответе на знакомый вопрос.

Может, не обязательно.

Спецификация HTML5 (CR) говорит:

Авторы также рекомендуется явно обтекать разделы в элементах раздела содержимого, вместо того чтобы полагаться на неявные разделы, сгенерированные несколькими заголовками в одном элементе секционирующего содержимого.

Итак, его поощрение, которое является да на ваш вопрос.

(* За исключением заголовка сайта, то есть заголовка, который является дочерним элементом body и другого элемента содержимого секции).

(** Если содержимое не подходит для article, aside или nav.)

Я прочитал, что любое связанное содержимое должно быть завернуто в <section> [...]

Это неверно. "Связанный" может означать много вещей. Следуйте определению в спецификации. Имейте в виду, что section (и другие элементы секционирования article, aside и nav) играют роль в создании документа outline.