Как семантически правильно оформить код при верстке сайта?

В случае когда article является единственным элементом в section, то section не нужен (а то бессмыслица получается). Если же предполагается несколько article, или другие соседние элементы, то все правильно.

1. Тег section подразумевает разделение контента на отдельные части со своими заголовками.
Вне приделов отдельной части контента article не имеет смысла.
2. Слои с точки зрения семантики — не чего не значат.

Пример семантической разметки:

<main><!-- Основное содержимое страницы -->
    <article><!-- Статья -->
        <header><!-- Вводные метаданные -->
            <h1>Заголовок</h1>
            <p>Опубликовано <time datetime="2018-01-31T19:45+03:00">31 Января 2018, в 19:45</time></p>
        </header>
        <nav><!-- Навигация по статье -->
                <ul>
                        <li><a href="#section1">#section1</a></li>
                        <li><a href="#section2">#section2</a></li>
                        <li><a href="#section3">#section3</a></li>
                 </ul>
        </nav>
        <section><!-- Раздел статьи 1 -->
            <h2 id="section1">Заголовок</h2>
            <p>Бла–бла–бла. Ля–Ля–Ля. </p>
            <p>Бла–бла–бла. Ля–Ля–Ля</p>
            <p><abbr title="Hypertext Markup Language">HTML</abbr></p>
        </section>
        <section><!-- Раздел статьи 2 -->
            <h2 id="section2">Заголовок</h2>
            <figure><!-- Изображение -->
                <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
                <source srcset="default.jpg, default_retina.jpg 2x">
                <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
                <figcaption>Изображение</figcaption>
            </figure>
        </section>
        <section><!-- Раздел статьи 3 -->
            <h2 id="section3">Заголовок</h2>
                <aside><!-- Врезка -->
                       <blockquote><!-- Цитата -->
                               <p>В лесу родилась Ёлочка… </p>
                               <cite>Слова народные</cite>
                       </blockquote>  
                </aside>
        </section>
        <footer><!-- Завершающие метаданные -->
            <p><address><!-- Контактные данные автора -->
                        <a href="author@site.com?subject=Вопрос по …">Задавайте вопросы по электронной почте</a>
                        </address></p>
        </footer>
    </article>
</main>

Код должен быть валидным, и делать отступы для каждого вложенного тега.