不按顺序使用HTML标题

我工作的公司最近委托了一家外部网站设计/开发机构来重新开发他们的网站。该机构提供的HTML使用了无序标题和/或完全遗漏了某些标题级别

我创建了以下实体模型来说明：

• 产品页：

• 产品搜索结果：

当一位同事向该公司提出这一问题时，他们表示这是可以接受的，因为标题只需在标准内容页的主要内容区域中按顺序使用即可构建文本

我的理解是，出于可访问性的原因，应该使用标题将结构应用于整个网页。因此，公司在上述实物模型中使用标题的方式是不正确的

请任何在这方面有专业知识的人作出回应，帮助澄清这一情况

以下是搜索结果页面的相关HTML

<main class="inner">

    <div class="content-container-del">

        <aside class="content-aside col-xs-16 col-md-4">

            <div class="accordion-small-container">
                <h5>Refine by:</h5>

                <dl class="accordion--small">
                    <dt class="js-accordion-dt active">Level</dt>
                    <dd class="js-accordion-dd active">

                        <div class="checkbox-list">
                            <div class="checkbox-list__checkbox">
                                <input id="checkbox" class="checkbox" value="check" name="checkboxes" type="checkbox">
                                <label for="checkbox">Checkbox</label>
                            </div>

                            <div class="checkbox-list__checkbox">
                                <input id="checkbox_3" class="checkbox" value="check_3" name="checkboxes" type="checkbox">
                                <label for="checkbox_3">Checkbox</label>
                            </div>

                        </div>
                    </dd>

                    <dt class="js-accordion-dt">Subject</dt>
                    <dd style="display: none;" class="js-accordion-dd">
                        <div class="checkbox-list">
                            <div class="checkbox-list__checkbox">
                                <input id="checkbox_5" class="checkbox" value="check_5" name="checkboxes" type="checkbox">
                                <label for="checkbox_5">Checkbox</label>
                            </div>

                            <div class="checkbox-list__checkbox">
                                <input id="checkbox_4" class="checkbox" value="check_4" name="checkboxes" type="checkbox">
                                <label for="checkbox_4">Checkbox</label>
                            </div>
                        </div>
                    </dd>
                </dl>

                <button type="button" class="btn-arrow">Apply Filters</button>
            </div>

        </aside>

        <article class="col-xs-16 col-md-12">
            <div class="general-search-header purple">
                <h3 class="general-search-header__title">Product Search</h3>

                <div class="search-box--general-search">
                    <label class="hidden" aria-hidden="true" for="search-box__input-text">Search:</label>
                    <input id="search-box__input-text" class="search-box__input-text" placeholder="Search term..." type="text">

                    <div class="search-box__label icon-search">
                        <input aria-hidden="true" id="search-box__submit" class="search-box__submit" value="Submit" type="submit">
                    </div>
                </div>

            </div>

            <div class="col-md-15 col-md-push-1">



                <ul class="search-result-list purple">
                    <li class="search-result-list__item">
                        <h4 class="search-result-list__title"><a href="">Search result 1</a></h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur et, vero minus. Illum eveniet, sit quia accusamus quis earum asperiores eos fugit voluptas. Vero assumenda numquam aliquid impedit ducimus esse.</p>
                    </li>

                    <li class="search-result-list__item">
                        <h4 class="search-result-list__title"><a href="">Search result 2</a></h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur et, vero minus. Illum eveniet, sit quia accusamus quis earum asperiores eos fugit voluptas. Vero assumenda numquam aliquid impedit ducimus esse.</p>
                    </li>
                </ul>

                <ul class="pagination purple">
    <li class="pagination__item">
        <a href="" class="pagination__link prev">«</a>
    </li>

    <li class="pagination__item active">
        <a href="" class="pagination__link">1</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">2</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">3</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">4</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">...</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">10</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link next">»</a>
    </li>
</ul>
            </div>
        </article>

    </div>
    <!-- end: content-container -->

</main>

Lorem ipsum dolor sit amet，奉献精英。特尼图尔等人，维罗负号。伊万尼埃，我坐在你的座位上。如果没有足够的流动性，就无法满足需求



Lorem ipsum dolor sit amet，奉献精英。特尼图尔等人，维罗负号。伊万尼埃，我坐在你的座位上。如果没有足够的流动性，就无法满足需求

下面是产品页面的相关HTML

<main class="inner">

    <div class="page-intro row">
    <div class="page-intro__left-column col-xs-16 col-md-8">

        <h1 class="page-intro__title">Product Title</h1>
        <h4 class="page-intro__sub-title">Product sub-heading</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ipsam quia, explicabo commodi quaerat modi saepe corporis numquam autem quod deserunt, harum assumenda ratione dolorum laboriosam qui aliquam hic vel adipisci aut voluptates in! Modi commodi dolores laboriosam ad incidunt.</p>

    </div>

    <div class="col-xs-16 col-md-8">

        <div class="page-intro__media--link" style="background-image: url('http://placehold.it/730x430');">
            <a href="" class="page-intro__media--link-href">
                <span class="page-intro__media--link__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span>
            </a>
        </div>


    </div>
</div>


    <div id="course-description" class="course-description row">

        <div class="col-md-11">
            <div class="course-description__left-column">
                <h2 class="sub-title">Product Description</h2>

                <div class="js-readmore-container js-readmore-active">
                    <div style="height: 400px;" class="content-inner js-block-height" data-height="400">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde vel et, exercitationem laudantium numquam totam mollitia fuga neque ea laborum eum, deleniti omnis veritatis repellat porro minus recusandae earum, animi.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora placeat ea reiciendis iste, dignissimos ex accusantium maiores magnam neque! Vero explicabo quo nostrum autem tenetur delectus suscipit, atque ut dicta facilis temporibus maxime eius minima, odit quidem consectetur quibusdam. Cum eligendi repudiandae, ea odit, exercitationem veritatis ab soluta vitae iste.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nesciunt expedita, fugiat, delectus commodi, distinctio exercitationem, maiores natus nobis cumque sequi. Eaque rem iste neque minima! Quod, ullam dolorum aliquid voluptas maxime hic voluptatibus provident officia. Eveniet maxime laborum laudantium, dicta. Omnis debitis, excepturi cum perferendis pariatur consequuntur error. Id labore, excepturi natus reiciendis eveniet iusto impedit rerum, itaque eos. Aliquid obcaecati aut quasi dolorum facilis dignissimos, consequuntur minima fugiat quaerat placeat earum adipisci totam perspiciatis, laboriosam, sint in! Provident temporibus hic aperiam, magnam rerum quidem, sequi eaque ipsa, dolorum fuga veritatis cumque! Delectus, rem, officiis? Voluptatibus, est quibusdam?</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat aut molestias, facere dicta natus ipsum velit rerum repellat, necessitatibus itaque possimus harum. Repellendus delectus, hic eum itaque ipsa, quaerat adipisci neque ipsum a totam perspiciatis tenetur architecto sed repellat at.</p>
                    </div>

                    <button class="show-more js-show-more" type="button">Show More</button>
                </div>
            </div>

        </div>

    </div>

    <div class="course-block row">
        <h2 class="sub-title">Why choose Company X?</h2>
        <div class="boxed-panel--green">
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, accusantium!</h4>
            </section>
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, accusantium!</h4>
            </section>
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, accusantium!</h4>
            </section>
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet</h4>
            </section>
        </div>
    </div>

</main>

产品名称
产品小标题
Lorem ipsum dolor sit amet，奉献精英。这是一个明显的区别，它解释了为什么我们需要一个新的集体，因为我们需要一个合理的实验室来证明我们的能力！莫迪·康莫迪·多洛雷斯（Modi commodi dolores）在实验室里做了大量的实验

产品说明
Lorem ipsum dolor sit amet，奉献精英。在一定程度上，通过劳动和社会实践，全方位的真实性训练，消除疾病和疾病

Lorem ipsum dolor sit amet，奉献精英。在我们的世界里，我们的世界是暂时的，我们的世界是巨大的！我们必须清楚地说明，我们的权利是由授权人来决定的，我们的权利是由临时性的面部表情决定的，我们的权利是由授权人来决定的，我们的权利是由授权人来决定的，我们的权利是由授权人来决定的，我们的权利是由授权人来决定的，我们的权利是由授权人来决定的。我是共和国公民，我是公民，我是公民，我是公民

Lorem ipsum dolor sit amet，奉献精英。分子必须是专业的、富有的、共同的、杰出的实践的、杰出的。这是最小值！首先，我要说的是，这是一个最高的法定货币。赞美劳动的最高标准，格言。全方位借记，但不包括个人和个人消费错误。我的劳动力，除了自然资源外，其他都是用来阻止它的。不流动的小白脑或类似于面部尊严的小白点，在圣塔岛的透明、实验室和圣塔岛的最小白脑的位置！临时公积金、保险金、公共事业保险、真实保险！德莱克特斯，雷姆，官员？沃鲁帕提布斯，这是奎布斯丹吗

Lorem ipsum dolor sit amet，奉献精英。作为一名妇女，她必须承认自己的真实身份，必须承认自己的权利。Derectus deletus，hic eum itaque ipsa，quaerat adipisci neque ipsum a totam perpiciatis teniter architecto sed repellat

显示更多
为什么选择X公司？
Lorem ipsum dolor sit amet，奉献精英。沃卢帕斯，阿库桑蒂姆！
Lorem ipsum dolor sit amet，奉献精英。沃卢帕斯，阿库桑蒂姆！
Lorem ipsum dolor sit amet，奉献精英。沃卢帕斯，阿库桑蒂姆！
Lorem ipsum dolor sit amet

每个分区元素，如

文章

、

分区

和

旁白

都可以启动新的标题层次结构。每个剖切元素中的主标题可以是

h1

@昆汀是对的，也许最好避免这样

这是完全错误的选择标题杠杆后，它的大小显示为。将类添加到元素中，并改为设置它们的样式

产品页

和

是正确的

我认为作为

元素，产品子标题更好

块可能不应该是标题。相反，我认为

具有

字体重量：粗体

在语义上更加正确

产品搜索结果

产品西尔