How to properly use the HTML semantic elements in a blog?

I read a lot of information on w3schools. It defines <section> as:

The <section> element defines a section in a document. [...] A home page could normally be split into sections for introduction, content, and contact information.

So, basically, a <section> can be a <header> (introduction) and <footer> (contact information)?

The <header> element specifies a header for a document or section.

So I could put a <header> inside a <section>? But a <section> can be used "for introduction", so it basically is a header? Same story with the <footer> element.

Questions

How am I actually supposed to use the elements?

• Should I use <header> for the title of an <article> or for the part of my website containing the logo and navigation?

• Should I use <footer> for the data of an <article> or for the part of my website containing the copyright and footer navigation?

• Should I put a <section> tag around my <article> tags?

Let's say I have a simple website, containing a logo, navigation, several articles and some footer text. What would be the best way to do the markup?

<!DOCTYPE html>
<html>

<head>
    <title>My site</title>
</head>

<body>
    <header>
        <img src="logo.png" alt="My logo!">
        <nav>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <article>
            <header><h2>Article 1 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>

        <article>
            <header><h2>Article 2 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>

        <article>
            <header><h2>Article 3 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>
    </section>

    <footer>
        <p>Copyright</p>
    </footer>
</body>

</html>

If I do that, the Nu HTML Checker says:

Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

I don't want an <h1> stating the <section> contains <article> tags. Should I just remove the <section>? It appears to be a flexible tag, yet I can't find a valid place to put it.

What would be the correct markup?