- Where to find it
- Labelled Enclosing Tag in the "Selected Component" section of the Modify drawer.
- Per device
- Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
In plain English
Every piece of text on a web page is wrapped in a tag that says what it is. "h1" means "this is the main heading of the page". "p" means "this is a paragraph". "span" means "this is just a run of text inside something else". This setting is where you make that choice.
It matters more than any other setting on a text component, because the tag is what search engines and screen readers use to understand your page. Google reads your headings to work out what the page is about. A blind visitor navigating with a screen reader jumps from heading to heading to find their way around. Text that is merely made large and bold gives neither of them anything to work with.
The rule of thumb is simple: one h1 per page for the main title, h2 for the major sections, h3 for subsections beneath those, p for body paragraphs, and span for a fragment inside a larger sentence. Do not skip levels for visual reasons — if an h2 is too big, change its Font Size rather than demoting it to an h3.
The choice also quietly changes how spacing behaves. Block tags such as p, div, and the headings occupy a full line of their own and accept padding and margin on every side. Inline tags such as span, em, strong, and code sit within a line of text and ignore vertical padding and height. If you set a top padding and nothing happens, an inline tag is almost always the reason.
What each option does
| Option | What you will see |
|---|---|
h1 | The main title of the page. Use exactly one. |
h2 | A major section heading. The workhorse for page structure. |
h3 – h6 | Progressively deeper subheadings beneath an h2. |
p | A paragraph of body text. The right choice for ordinary prose. |
div | A neutral block with no meaning attached. Use when none of the others fit. |
span | A neutral run of inline text. For a fragment inside a sentence. |
strong / b | Bold text. "strong" also tells a screen reader the words are important; "b" is visual only. |
em / i | Italic text. "em" also conveys emphasis to a screen reader; "i" is visual only. |
blockquote / q | A quotation. "blockquote" for a standalone block, "q" for a short inline quote. |
pre / code | Preformatted text and code. Keeps your spacing and uses a monospace font. |
small / mark / u / sub / sup | Fine print, highlighted text, underlined text, and subscript or superscript. |
When you would use it
- Every time you add a text component — it should never be left unset.
- A section title needs to be recognised as a heading by search engines.
- A phrase inside a sentence should be emphasised: use span, strong, or em.
How to change it
- Click the text component on the canvas.
- In the Modify drawer, open "Selected Component", then "Enclosing Tag".
- Search or scroll for the tag you want and select it.
- Adjust the look separately using the column's Typography settings.
Watch out for
- Choose the tag for what the text means, then style it. Picking h3 because it looked the right size is the most common mistake here, and it damages both your search ranking and your page's accessibility.
- Inline tags ignore vertical padding, margin, and height. If a spacing setting appears to do nothing, switch to a block tag such as p or div.
- RuleCMS uses this choice to decide whether it needs to wrap your text in an extra element on the published page. Choosing a block tag results in cleaner markup, because the tag can carry the column styles itself.
Related settings
For developers
The technical reference for what this setting produces: MDN: HTML text content elements. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.