Предположим, что есть основной заголовок и несколько подзаголовков, которые можно классифицировать, присвоив им отдельные заголовки, но вместо этого они визуально сообщаются иначе, чем при присвоении им отдельных заголовков.
то есть: 
Как в таком случае использовать теги заголовков?
То, что я считаю правильным (но не уверен), это добавить отдельный элемент section для обеих категорий.
вот так:
Какие-либо предложения?
Обратите внимание, что элемент section является элементом содержимого раздела. Это означает, что он создает запись в структуре документа. Если вы хотите использовать h1-h6 согласно соответствующему рангу в схеме, ваши h2 заголовки должны стать h3 заголовками.
Также обратите внимание, что рекомендуется явно использовать разделяющие элементы контента там, где это уместно (например, по крайней мере, везде, где вы используете элементы заголовков), поэтому вы также можете использовать section для «Что мы делаем» и т. д.
Таким образом, релевантная для схемы структура может выглядеть следующим образом:
<body>
<h1>Xyz Company</h1>
<section>
<h2>About us</h2>
<section>
<h3>What we do</h3>
</section>
<section>
<h3>Where we are?</h3>
</section>
<section>
<h3>Where we do?</h3>
</section>
</section>
<section>
<h2>Attributes</h2>
<section>
<h3>Respect</h3>
</section>
<section>
<h3>Responsibility</h3>
</section>
<section>
<h3>Growth</h3>
</section>
</section>
</body>
Каждый элемент содержимого раздела (и каждый корневой элемент раздела, т. е. body в данном случае) имеет свой собственный заголовок, и нет заголовка без явного раздела.
Даже если вы не хотите указывать заголовки «О нас» и «Атрибуты», вы все равно можете оставить два элемента section. Не идеально, но лучше, чем не иметь их, потому что они делают предполагаемый план документа четким. (Компромиссом может быть визуальное скрытие этих двух заголовков с помощью CSS.)
С чисто технической точки зрения SEO было бы лучше, если бы оба раздела имели свои собственные заголовки, а содержимое этих разделов имело бы свои подзаголовки, поэтому вы бы искали что-то вроде этого:
<main>
<h1>Your Company Name</h1>
<section>
<header>
<h2>About Us</h2>
<h3><a href="#what_we_do">What we do</a></h3>
<h3><a href="#where_we_are">Where we are</a></h3>
<h3><a href="#where_we_do">Where we do</a></h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
</section>
<section>
<header>
<h2>About Us</h2>
<h3><a href="#what_we_do">What we do</a></h3>
<h3><a href="#where_we_are">Where we are</a></h3>
<h3><a href="#where_we_do">Where we do</a></h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet Dolor...</section>
</section>
</main>
Обычно мне нравится смотреть на страницу без CSS/JavaScript и смотреть, как она выглядит. Если у вас такой же поток, и все выглядит так, как должно по умолчанию, вы на правильном пути. Поисковые системы достаточно умны, чтобы понять, что вы имеете в виду, даже если вы используете div для всего, но его семантическая правильность может увеличить их сходство с вашим чистым и организованным кодом.
Добавление разделов для обоих может быть полезным, но гораздо полезнее то, что на этой странице рассказывается о конкретной теме, а не о нескольких. Поэтому я бы порекомендовал вместо этого создать по одной странице для каждой страницы «О нас» и «Атрибуты». Если это кажется излишним, вы можете ограничиться одной страницей; Это было бы правильно, но не оптимально в глазах поисковых систем — им действительно нравится, что у вас есть одна страница для каждой темы и что они уникальны в пределах домена.
