Proper use of semantic tags?

sibertius · November 21, 2022, 7:34am

Using semantic tags seems to reduce the code and make it more readable. But I wonder if these tags below is a proper use of semantics?

<body>
  <nav>nav</nav>
  <main>
    <header>header</header>
    <section>content</section>
  </main>
</body>

Is it OK to use body as a wrapper container?
Suggestions for other semantic tags than the above?

rpg_digital · November 21, 2022, 7:42am

Things move on, and I’m reading up on this topic myself. A lot more complicated than it used to be, especially with the use of aria attributes etc.

Taking your example, this makes more sense to me.

<body>
  <header>
    <nav>Main nav</nav>
  <header>
  <main>
    <section>
       <h1>Heading</h1>
       ...
    </section>
  </main>
  <footer></footer>
</body>

sibertius · November 21, 2022, 7:54am

My intention was to reduce container wrapping to 2 main blocks by using the body tag as a first container. Then within the main tag 2 subcontainers. The header tag will be used as a container for icons, text and search field. Hence I find the use of h1 tag limiting.

rpg_digital · November 21, 2022, 8:02am

Hopefully someone a bit knowledgeable can assist here. It is confusing.

For instance here is an in-depth article on CSS Tricks

All good, but if you read the note at the top, it debunks a lot of what is being advised in the article.

The key consideration that comes through though is accessibility. Would your proposed layout fit in with that?

sibertius · November 21, 2022, 8:19am

My intention is to make as accessible as possible. But this is a huge subject that is my next level. Now I focus on reducing code and make it as readable as possible.

I read this: " <main> is a very important semantic element that I used in the markup above that I haven’t covered yet and that is the <main> element. The <main> element represents the primary content of the page. It is not supposed to feature any side bars or navigation elements in it."

Consider this advice, my example should be this instead?

<body>
  <nav>nav</nav>
  <section>
    <header>header</header>
    <main>content</main>
  </section>
</body>

rpg_digital · November 21, 2022, 9:07am

As I say I am reading up on this myself.

I kind of thought section was almost interchangeable with a div, but I don’t think that is the case. Read this from MDN

As an example, a navigation menu should be wrapped in a <nav> element, but a list of search results or a map display and its controls don’t have specific elements, and could be put inside a <section> .

For instance on my site I was thinking, much like with the map display, maybe the carousel could be wrapped in a section, as there isn’t a more specific tag for that.

From what I also gather you should not apply styles to sections, to my understanding they are not far removed from using a comment.

So I would think based on that your section could actually just be a div e.g. <div class='container'>, but please don’t take my word for gospel. As I say hopefully someone else here can better point you in the right direction.

sibertius · November 21, 2022, 9:56am

AFAIK semantic tags are interchangeable with divs - technically. Just more clean. And the only rule I have found is mandatory is that no more than ONE main tag on a page. I have also found the rules (if there are any clear) differs from who you ask.

Archibald · November 21, 2022, 10:41am

I think the <article> tag should be brought into this discussion.

In the HTML LIving Standard the <article> element is described before the <section> element. I note however that in the W3C Working Draft that the <section> element is described before the <article> element. I get the impression that the <section> tag was intitially intended as a way to divide long articles but is now recognised as a way to divide web page content.

We ought to use the <article> element where it is more appropriate than the <section> element.

My understanding is that <section> elements can contain <article> elements and <article> elements can contain <section> elements!

m_hutley · November 21, 2022, 11:14am

#1: You tell me, is your head part of your body?
The body is the content of the page. Its sole purpose is to be a container for the content.

A section is a generic identifier for a section of a document that is part but not whole. An article is a self-contained part of a document that could be distributed on its own.

Given the previous specification, it very well could be. If you section was for example, a news feed, it may contain several articles.
The idea is that sections are the chapters of your page; the table of contents would list each section.

Different purposes, but same effect. A div is encouraged when an element is needed for styling or scripting. If you are creating sections or articles just for that purpose, you should be using a div instead.

sibertius · November 21, 2022, 1:32pm

So, I interpret that I can use the body tag as a page container.

PaulOB · November 21, 2022, 1:35pm

While that is fine in most cases there can be situations where it’s not so fine. If for example you are giving the body a width or max-width then the body background colour would not stay at that width as it propagates to the html element. There is also the issue of overflow and how that is handled when the body width is reduced.

Most sites will require a max width anyway as 100% on a wide monitor like my 27” iMac is almost unusable.

It may be that you are putting the max width on the inner containers but that means managing all the separate elements individually which can be impracticable .

For those reasons and for the sake of adding one div as a wrapper I would advocate leaving the body alone in most cases. It’s not wrong to use the body as a wrapper but just be aware that the body element is slightly special.

system · February 20, 2023, 8:36pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.