# Semantic markup **URL:** \ **Category:** Elements\ **Created:** [March 12, 2026, 4:22pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066 "2026-03-12T16:22:50Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\ **Post date:** [March 12, 2026, 4:22pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/1 "2026-03-12T16:22:50Z")
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: ```auto
``` or ```auto
``` 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: ```auto
``` 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! ![Skärmavbild 2026-03-12 kl. 17.17.27](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/e/de8b6d23f309c700f468fd6964dae4d68f80fa8e.png) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [March 12, 2026, 4:45pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/2 "2026-03-12T16:45:33Z")
Yeah you’re on the right track 👍 You can use the “Tag” drop down menu and set things accordingly, like “Nav”, “Section”, “Footer”. ![CleanShot 2026-03-12 at 4 .43.04@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/5/f570e3cc7bf57f33f880f638e5962fca421cf248.png) If you want to call it something else, you can set it to custom, like this 🙂 ![CleanShot 2026-03-12 at 4 .44.37@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/8/08592c37489ed9aedab124165724434c7fa4e625.png) Hope that helps. ---
**Author:** ![PLM](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/plm/32/31094_2.png) [@PLM](https://forums.realmacsoftware.com/u/PLM)\ **Post date:** [March 12, 2026, 4:55pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/3 "2026-03-12T16:55:57Z")
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](https://forums.realmacsoftware.com/t/container-advanced-html-tag-info/54940/2) ---
**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\ **Post date:** [March 12, 2026, 4:57pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/4 "2026-03-12T16:57:07Z")
So no info in the classes section? ---
**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\ **Post date:** [March 12, 2026, 5:11pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/5 "2026-03-12T17:11:56Z")
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: ```auto ``` 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: ```auto
``` 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**. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [March 12, 2026, 5:57pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/6 "2026-03-12T17:57:01Z")
> [@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](https://forums.realmacsoftware.com/t/container-advanced-html-tag-info/54940/2) 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. ---
**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\ **Post date:** [March 12, 2026, 6:09pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/7 "2026-03-12T18:09:03Z")
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. ![Skärmavbild 2026-03-12 kl. 19.08.06](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/2/c26473b27491c7e6b3cd6d10cf460cdd16aaf9f9.png) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [March 12, 2026, 6:18pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/8 "2026-03-12T18:18:09Z")
It sure is 🙂 ![CleanShot 2026-03-12 at 6 .17.09@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/2/7273c7a8dda8648820406860c6ed16e32c2e5720.jpeg) ---
**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\ **Post date:** [March 12, 2026, 6:22pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/9 "2026-03-12T18:22:35Z")
👍 In your picture have you put the menu inside a container marked with header? ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [March 12, 2026, 6:22pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/10 "2026-03-12T18:22:47Z")
> [@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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) you might want to reach for. > [@engrafiker](#): > > For example, one could technically do this: > > Tag: Custom > hero > > which would output: > > ```auto > > > ``` > > 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 `` 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: ```html ``` 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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) > [@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. ---
**Author:** ![PLM](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/plm/32/31094_2.png) [@PLM](https://forums.realmacsoftware.com/u/PLM)\ **Post date:** [March 12, 2026, 6:25pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/11 "2026-03-12T18:25:51Z")
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? ---
**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\ **Post date:** [March 12, 2026, 7:11pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/12 "2026-03-12T19:11:40Z")
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? ![Skärmavbild 2026-03-12 kl. 20.06.37](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/0/a05aba6eb6ad6621941e99e86e15798c8735a3f4.png) ---
**Author:** ![PLM](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/plm/32/31094_2.png) [@PLM](https://forums.realmacsoftware.com/u/PLM)\ **Post date:** [March 12, 2026, 7:28pm UTC](https://forums.realmacsoftware.com/t/semantic-markup/55066/13 "2026-03-12T19:28:34Z")
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.