Ad

The Right Way To Use
And
For SEO

- 1 answer

Forgive me if I misspelled it and please correct it.

I do not know exactly how to use these two elements (Article | Section) Now I want to launch a site that has completely standard HTML code, Now, how do you think an article from my site should be structured? And where can I put the site header better? I am stuck between these two options.

<!-- 1 -->
<section>
    <header>
        <h1>title of page</h1>
    </header>
    <article>
        <p>some text</p>
    </article>
</section>

<!-- 2 -->
<section>
    <article>
        <header>
            <h1>title of page</h1>
        </header>
    </article>
    <p>some text</p>
</section>

If both are incorrect, what do you suggest?

My English is very poor. So I could not use any more questions. But I understand the coding. Please explain to me by writing the code and simple sentences, and do not say that there is an answer to your question.

Ad

Answer

Read more about the HTML element article of Mozilla:

The HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication)... each post would be contained in an element, possibly with one or more s within.

Unlike the article element, the section element:

The HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.

Thus, the article element can contain section elements. But the section element cannot contain any other semantic elements.

Accordingly, your example can be presented like this:

<header>
 <h1>The article News from Valinor of Gandalf</h1>
</header>
<article>
  <h2>News from Valinor</h2>
  <p>A short introduction to the content of the article.</p>
  <section>
    <h3>The name of section</h3>
    <p>The content of section.</p>
  </section>
  <section>
    <h3>The name of section</h3>
    <p>The content of section.</p>
  </section>
  ...
</article>
<footer>
 <h2>Publisher and copyright holder</h2>
 <p>Publisher and © 2021 Gandalf</p>
</footer>

Ad
source: stackoverflow.com
Ad