How to Correctly Use "Section" Tag in HTML5

How to use <section> and <article> tags in HTML5?

It depends on your content.

For example, a list of recent blog posts could be a section containing several article (example 1), a complex blog post could be an article with several section (example 2), a blog post with comments could be an article with a section and several article (example 3).

How to decide when to use which? Easy:

If you need a sectioning content element, start with section.
Check if the content matches the definition of nav. If yes, go with nav, else:
Check if the content matches the definition of aside. If yes, go with aside, else:
Check if the content matches the definition of article. If yes, go with article, else:
Stay with section.

Example 1: A list of blog posts

<section>
  <h2>Recent blog posts</h2>

  <article>
    <h3>Blog post 1</h3>
  </article>

  <article>
    <h3>Blog post 2</h3>
  </article>

</section>

Example 2: A complex blog post

<article>
  <h2>Blog post 1</h2>

  <section>
    <h3>So, this is what happened</h3>
  </section>

  <section>
    <h3>What the others said</h3>
  </section>

</article>

Example 3: A blog post with comments

<article>
  <h2>Blog post 2</h2>

  <section>
    <h3>Comments</h3>

    <article>
      <p>First!</p>
    </article> 

    <article>
      <p>First! <ins>Edit: Second :(</ins></p>
    </article>        

  </section>

</article>

Proper Use of <section> tag in html 5

That does not appear to be its intended use; confer, especially the second Note:

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

In essence, section is intended as part of document structure.

Section vs Article HTML5

In the W3 wiki page about structuring HTML5, it says:

<section>: Used to either group different articles into different purposes or
subjects, or to define the different sections of a single article.

And then displays an image that I cleaned up:

Sample Image

It also describes how to use the <article> tag (from same W3 link above):

<article> is related to <section>, but is distinctly different.
Whereas <section> is for grouping distinct sections of content or
functionality, <article> is for containing related individual
standalone pieces of content, such as individual blog posts, videos,
images or news items. Think of it this way - if you have a number of
items of content, each of which would be suitable for reading on their
own, and would make sense to syndicate as separate items in an RSS
feed, then <article> is suitable for marking them up.

In our example, <section id="main"> contains blog entries. Each blog
entry would be suitable for syndicating as an item in an RSS feed, and
would make sense when read on its own, out of context, therefore
<article> is perfect for them:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Simple huh? Be aware though that you can also nest sections inside
articles, where it makes sense to do so. For example, if each one of
these blog posts has a consistent structure of distinct sections, then
you could put sections inside your articles as well. It could look
something like this:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

Which one comes first, main tag or section tag?

I don't agree with divya jyothi. In that example the 'section' is being used to structure the various blocks of the page, whereas it should be used to divide up the CONTENT in an article into meaningful chunks.
Obviously, it's down to personal preferences but here is what I recommend to my clients :

<html>
    <head></head>

    <body>
        <header>
            <nav>[main menu]</nav>
        </header>

        <main>
            <article>

                <h1></h1>
                <p>Intro</p>

                <section>
                    <h2>Header for theme of first section</h2>
                    <p>Text</p>
                </section>
                <section>
                    <h2>Header for theme of second section</h2>
                    <p>Text</p>
                </section>
                <section>
                    <h2>Header for theme of third section</h2>
                    <p>Text</p>
                </section>

                <aside>
                    Comments directly related to the article
                </aside>
                <aside>
                    Other articles similar to the main article
                </aside>

            </article>

            <aside>
                Block of content not directly related to article ie form to sign up
            </aside>

        </main>
        <nav>[right column menu]</nav>

        <footer>
            <nav>[bottom menu]</nav>
        </footer>       
    </body>
</html>

The variations are obviously unlimited but I think it's a good basic template. Read more here https://www.semrush.com/blog/semantic-html5-guide/ and you can visualise your semantic HTML5 structure here https://sitegardien.com/html5viewer/semantichtml5viewer.php

HTML 5 Section and Main semantic tags use

Does the main tag also has the meaning of grouping related elements

Only to the same extent that <div> groups related elements. The primary purpose of <main> is to indicate where the dominant content of the page starts. (and additionally, according to the WHATWG spec but not the W3C one, where the dominant content of the page resumes).

or in that case should it be within a section tag?

A section tag is one way of grouping your content, to indicate that its contents are on a particular theme, in a way that differs from the content which is not in the section. Typically, you can and should give the section a heading using a <h[1-6]> element, which states what that theme is.

Does it make sense to wrap single elements, such as an image, into a
section tag?

Rarely. For one thing that would mean that the section didn't contain a heading. See above. It's unlikely that any new information would be conveyed by wrapping an image on its own in a section tag.

It's pretty common to have a header and footer of the page (not inside
any section), in that case, should the remaining in between those tags
be wrapped inside a section tag, as if delimiting the "content" of the
page?

No. The "content" of the section is the section less its header and footer. There's no need to add another sectioning element container.