<main> tag missing

General
1

Hi,

I realized that the <main> tag is not present by default. The container “wp-site-blocks” can’t be manipulated but has the role of the <main> tag. What is the proper way deal with this? Should I create a section with the <main> tag and put all the content inside this section? In this case the structure would be:

<body>
    <header></header>
    <div class="wp-site-blocks">
        <main>
            <secton>...</secton>
            <secton>...</secton>
            <secton>...</secton>
        </main>
    </div>
</body>

or is the tag not necessary?

Bildschirm­foto 2023-01-27 um 14.36.54
Bildschirm­foto 2023-01-27 um 14.36.541422×396 142 KB

2

You want to assign the <main> tag to the (Cwicly) Post Content block, in most instances.

Here is a bit more context.

1 Like
3

Thanks a lot for the reference!

But the Post Content block – which I rarely use – would be also inside the wp-site-blocks, wouldn’t it? So the <main> tag would be inside the wp-site-blocks container.

Would you use the main tag in this case (so I mean inside the wp-site-blocks-div) or would you just avoid using it at all?

cwicly.com for example is build without any such tag.

2 Likes
4

That’s correct.

Sure thing. It’s an important part in my opinion.
Because of how Gutenberg handles things, it’s not the most clean structure, because of that additional wrapper, but the <main> tag does its job regardless.

Well, there are no <header> and <footer> tags either.
Apart from the extra wrapper which Gutenberg adds, there is full freedom, also in that regard.
So, everyone is free to structure their projects the way they like, or it is required.

I’m not sure if it breaks anything, but you could try to change the tag of the wp-site-blocks wrapper to <main>.
I have the feeling that’s what you are looking for.

1 Like
5

I think we can’t do that because it’s hard coded in WP and it would not be so respectful of HTML semantics in the case where header and footer are inside .wp-site-blocks, which is my case.

My understanding is that the main header and footer should be outside main tag, since they are common to the whole site and they don’t represent the main content of a specific page.
It also allows skip links to skip header and go to main content directly (they are automatically added when main tag exists, but I don’t know if it a WP native feaature or if it is Cwicly).

Yes and it is not a problem at all, HTML will just ignore the .wp-site-blocks semantic (div has actually no real meaning except being a container for anything).

So something like that is OK:

.wp-site-blocks
- <header>
- <main>
-- <header> (optional)
-- -- <h1>
-- post content
- <footer>

Note that I’m using default header and footer template parts with default templates, so my header and footer are inside .wp-site-blocks.

But this would be OK as well:

<header>
.wp-site-blocks
- <main>
-- <header> (optional)
-- -- <h1>
-- post content
<footer>

(You could also wrap h1 and post content inside article tag, but I usually only do it with queries only, to distinguish each post title/content/excerpt.)

1 Like
6

That always depends, in this case I was exclusively referring to the given HTML structure.
It’s not general advice, of course.

So, the best approach in this case, could be to just wrap your main content (all your <section>s inside another div block and change the tag to <main> @Jonas.

Can I ask you why you only rarely use the Post Content block?
This block reflects all types of content, not only actual post content.
Do you create your pages as actual templates?

Maybe rethinking the general approach of how to take advantage of the system could improve your situation - but that’s rather a guess than some advice.

1 Like
8

That’s what I was curious about because up until now the tools I used did that for me so its the first time I need to handle that myself.

yep. That’s what I’ll do now. :+1:

Well I’m almost done with my first project with Cwicly and this page consists almost exclusively of custom post types. So most of the content I build was templates for each post and archive. On other projects I would use the Post Content block more often as well.

Thanks to both of you for your kind and detailed contributions!

1 Like