Semantic markup

[engrafiker (Henrik Hovstadius)]

Hi everyone,

I have a question regarding semantic HTML structure when using Sections in Elements.

When building pages for SEO and accessibility, I try to structure the page like this:

header
main
section (hero)
section (products)
section (benefits)
section (cta)
footer

In plain HTML this would often look like:

<section class="hero">

or

<section class="products">

So my question is about how this should best be handled inside Elements.

In the Container settings we can choose the HTML Tag = Section, and there is also a field for Classes.

Is the correct way to make a semantic “hero section” simply to add a class like:

hero

so the output becomes:

<section class="hero">

Or is there another recommended way in Elements to semantically describe what a section represents, for example a hero, product section, CTA, etc.?

I am trying to make the structure as clean and semantic as possible for SEO and accessibility.

Thanks!

[dan]

Yeah you’re on the right track

You can use the “Tag” drop down menu and set things accordingly, like “Nav”, “Section”, “Footer”.

If you want to call it something else, you can set it to custom, like this

Hope that helps.

[PLM (Per Martins)]

I asked about this before and got no answer @dan - A Main tag is important or Google PageSpeed will complain. It doesn’t work on Sticky Menu - Container Advanced HTML Tag info? - #2 by PLM

[engrafiker (Henrik Hovstadius)]

So no info in the classes section?

[engrafiker (Henrik Hovstadius)]

I noticed that in the Container settings you can set the HTML Tag to “Custom” and manually type a tag name (for example “hero”).

This made me wonder what the best practice is from a semantic HTML perspective.

For example, one could technically do this:

Tag: Custom
hero

which would output:

<hero>

However, my understanding is that this is not standard HTML, and browsers and search engines will simply treat it as an unknown element.

Because of that, it seems more correct to instead use a valid semantic HTML element and describe the type of section using a class.

For example:

Tag: Section

Class: hero

which outputs:

<section class="hero">

This seems to follow normal modern web development practices where:

section = semantic content block

class = describes the type of section (hero, products, benefits, etc.)

So my question is:

Is the recommended approach in Elements to keep using standard semantic tags like section, header, nav, main, etc., and then specify the purpose of the section through classes?

Or is there any advantage to using Custom tags for things like hero sections?

I’m mainly thinking about semantic HTML, SEO, and accessibility best practices.

[dan]

@PLM

I asked about this before and got no answer @dan - A Main tag is important or Google PageSpeed will complain. It doesn’t work on Sticky Menu - Container Advanced HTML Tag info? - #2 by PLM

I’m not an SEO expert, so would need to google and research exactly what tags you’d need to use… but I’m pretty sure you’d be able to do exactly what you need in Elements. If there is a missing feature we can get it added in!

Perhaps ask one of the AI bots for advice on this, let me know how you get on.

[engrafiker (Henrik Hovstadius)]

Is the menu component marked with “nav” as default because there is no way to mark it under advanced. It would save alot of work not have to put it in a container and then mark it.

[dan]

It sure is

[engrafiker (Henrik Hovstadius)]

In your picture have you put the menu inside a container marked with header?

[ben]

@engrafiker

In the Container settings we can choose the HTML Tag = Section, and there is also a field for Classes.

Is the correct way to make a semantic “hero section” simply to add a class like:

hero

In HTML, semantics come from the element type, not from its classes. Classes only provide hooks for styling or JavaScript, browsers and assistive technologies don’t interpret them as carrying any meaning.

@engrafiker

I noticed that in the Container settings you can set the HTML Tag to “Custom” and manually type a tag name (for example “hero”).

The custom tag option is there for when you need a tag not available in the dropdown, there are plenty of standard HTML elements you might want to reach for.

@engrafiker

For example, one could technically do this:

Tag: Custom
hero

which would output:

<hero>

However, my understanding is that this is not standard HTML, and browsers and search engines will simply treat it as an unknown element.

You’re right that <hero> on its own isn’t standard HTML. That said, the custom tag feature does have a legitimate use case: defining custom elements, which are part of a web standard called Web Components. Modern browsers let developers create their own HTML tags, as long as they follow the naming convention of including a hyphen, for example:

<hero-banner></hero-banner>

Custom elements can be wired up to JavaScript to behave like fully-featured components with their own logic and lifecycle, though that’s probably outside the scope of this thread. More info here: Using custom elements - Web APIs | MDN

@engrafiker

Is the recommended approach in Elements to keep using standard semantic tags like section, header, nav, main, etc., and then specify the purpose of the section through classes?

Using semantic tags is definitely the right approach. Just keep in mind that classes carry no semantic weight for browsers, screen readers, or other assistive technologies, they’re purely for styling and JavaScript hooks.

[PLM (Per Martins)]

When I put sticky menu in a container it changes the layout and moves the logo to the first menu text.

The other no problem, just put them in a container and name them Main or Footer.

But @dan , how important or unimportant is this to do?

[engrafiker (Henrik Hovstadius)]

I pulled in a container from the containers and it is set to width (Breakpoint) and Content alignment to Aligh center and and justify center. And the spacing is enabled. If I was to use the container only to mark the content as Main, which settings would be best. I have som contetn going full width so I need it to go full width but what about the other settings?

[PLM (Per Martins)]

I just took a standard container and named it Main (plus of course HTML tagged it Main) and then put the top containers inside (not the menu). Same with the Footer. No extra settings. ChatGPT has good info.