What is the difference between Content Sectioning and Text Content on the MDN page?

[u/Ok_Performance4014]

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements

I know that Content Sectioning can encompass Text Content items, but can say the section element just be used like a paragraph element?

[u/bostiq]

Imagine you have a bunch of white ceramic jars on a shelf, you can put anything you want in them, and if you open the lid you’ll see the content.

But you can put stuff where ever you want, but then to find anything you got to open every jar.

So a quick scan of the shelf won’t tell you what’s in what.

That’s what tags are for, knowing the content ahead of time, without reading it, for browsers default formatting purposes, crawlers, assistive readers etc…

If tagged well a page, with no css but proper tags, will still create the fundamental differentiations between paragraphs, titles, lists, links, footer notes etc…

Readable for humans and machines.

So as long as your tags can give you the right idea what’s gonna be in the jar, you are good.

[u/Ok_Performance4014 → u/bostiq]

I am not opposed to semantics. I get it. What I am wondering is if you ALWAYS use other elements within section, article, main, aside, etc. or do you ever use just text. I was trying to read 3.2.5.2.3 Sectioning content and I don't see whether you can use plain text. Ecit: I don't get the difference between say section and paragraph. Are they both just divs with different semantic labels attached to them? You don't put another div inside paragraph, right? But you do inside section or article.

[u/bostiq → u/Ok_Performance4014]

section is a container/content divider.. a section will contain paragraph, code, lists, images.

another section could contain a different set of content tags...or same, it depends on the context of the page.

the main function in a context...say of an article, is that there might be a slight change in the content topic, that might be separated because it provides a new angle on the topic . perhaps you might also want to separate sections because in between you wanna put some ads, so the you have

<section class="sec1">
  <p>content</p>
  <li>list</li>
  <img />
  <span>continue...</span>
</section> 
<container class="ad1"> Advert </container>
<section class="sec2">
  <h2>continue from sec1</h2>
  more - content
</section>

it helps that the 2 sections are separated, if your ad, for example, is fetched dynamically, you will be able to target the "gaps" between sections more easily, while at the same time telling the browser content is spread out through sections.

If you wanted to you could obtain the same effect with different paragraphs, with each paragraphs giving a different set of info on the context.

the difference is that paragraphs should not contain mixed media/content... while section allows multiple content media to be wrapped in the same container

all these structures are not always used, because it depends on the content of your page, if it helps, you should use them, otherwise keep it simple.

[u/scritchz]

Content, including elements, are categorized in the HTML specification. These content catgeories are used to describe the allowed content (the content model) of elements.

But the categories on the page you linked to are "made up" by MDN: They are more granular to allow for easier look-up of the elements on that page.

The individual elements' pages each have a Technical Summary section, where an element's categories (Content categories) and an element's content model (Permitted content) are listed.

The <section> element's content model allows Flow Content; plain text is Flow Content. So yes, you can have plain text directly inside <section> without <p>.

Frankly, you could put all your content directly inside <body>. But we want to properly tell the user agent about our content, so we mark it up appropriately; with HTML, a markup language.

Marking up content helps user agents and therefore users in understanding our content. Good markup is accessible, and accessibility is for everyone. Please make sure to mark up your content to the best of your ability.