The difference between the section element and the div and article elements

The section element is to block the content on the page in the website or application. A section element usually consists of a title and content. But the section element is not an ordinary container element. When a container needs to define the style directly or define the behavior through the script, it is recommended to use the div element instead of the section element. We can understand it this way: the content in the section element can be directly stored in the database or output to the word document.

The purpose of the section element is to block content on a page , or to segment an article, not to be confused with the article element which means "has its own complete, independent content ".

Here is a code example of an article element with a section element:

<article>
    <h1>Title</h1>
    <p>Apple, plant fruit</p>
    <section>
        <h2>Red Fuji</h2>
        <p>Red Fuji is selected from the buds of ordinary Fuji</p>
    </section>
    <section>
        <h2> Kunimitsu </ h2>
        <p>Guoguang apple product, also known as Xiaoguoguang, Wanshou. </p>
    </section>
</article>

The above code is first and foremost a piece of self-contained, complete content, so the article element is used. Each paragraph has a title, so two section elements are used, but some people will ask why the first paragraph does not use section. In fact, the section element can be used here, but because the structure here is relatively clear, the analyzer can It is recognized that the first paragraph of content is in the section element, so the first section element can be omitted. But if the first section element contains subsection elements or subarticle elements, then the first section element must be specified.

Next, let's look at an example of section code that contains section and article elements:

<section>
    <h1>Fruit</h1>
    <article>
        <h2>Apple</h2>
        <p>Apples, plant fruits, multiple flowers and fruits</p>
    </article>
    <article>
        <h2>Oranges</h2>
        <p>Orange is a fruit of the genus Citrus of the Rutaceae family. . . </p>
    </article>
</section>

This case is a bit more complicated than the previous one. First of all, it is a paragraph of the article, so the article element is not used, but in this paragraph, each paragraph is independent content, so the article element is used. The article element can be seen as a special kind of section element, which emphasizes the independence of content more than the section element. The section element is used when dividing a piece of content into several sections.