From a semantic point of view, no. The tags <main>
and <section>
have different meanings for HTML5, which is based on ideas of semantic structure.
According to the documentation, <main>
represents the content dominant page. This section should ideally contain the central topic of the document or the central functionality of an application. It should be unique.
Already <section>
represents a less hierarchically important section. It is, by definition, a "generic section of the document", which has no other semantic element that best represents it.
Therefore, <section>
does not replace <main>
. The aforementioned documentation of <section>
is emphatic in saying that this tag should be used only when no other element better semantically represent the content.
Like <main>
is an element that indicates the semantics of main content, should be preferred over <section>
.
As for the example of code placed in the question, I have no way to answer so that covers 100% of cases, since the choice depends on the content of the page. In general, if the content after the <header>
is the main page, <main>
should be used.
If not, maybe <section>
makes sense, but in this case ideally another section of the page should be the "dominant", i.e., <main>
.
A good place to consult about each tag with "ideal" usage explanations is on MDN, for example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
– Guilherme Nascimento