Documentation-based practice example; check the controls in your installed Oxygen version.
What it does and when to use it
Render custom HTML when the native elements cannot express a required fragment. This example focuses on one achievable outcome rather than listing every possible setting.
Before you start
Start with a test page and the data or assets described in the example. The values below are starting points, not universal design defaults.
Worked example: A semantic definition list
Scenario: A semantic definition list. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Use native elements where possible; choose a code element only for a fragment your builder cannot express conveniently.
- Add a definition list for project facts with paired dt and dd tags.
- Keep its text editable, escape dynamic output and check the resulting HTML on the frontend.
Definition-list markup
<dl class="project-facts">
<dt>Platform</dt>
<dd>WordPress</dd>
<dt>Builder</dt>
<dd>Oxygen 6</dd>
</dl>These are example project facts. Replace them with true values. Definition terms and descriptions should remain paired.
Expected result
You should have a semantic definition list. Verify the result on the frontend using the same content or object described in the steps. A correct builder preview alone does not establish that links, data or interactions work for visitors.
Troubleshooting
If the markup prints as visible text, check that you used a rendering control rather than a text-only field. HTML Code is documented but not registered as an element in this installation.
Checks before publishing
Prefer native, individually editable elements for page layouts. This documented code element is not registered on the current site build.
- Compare desktop and narrow-screen layouts using actual content.
- Follow every destination and operate interactive controls with a keyboard where applicable.
- Check an empty or unavailable-data state when the element depends on a provider.
Official reference and version notes
Official HTML Code reference provides the current provider information. This is independent, AI-assisted documentation on Benjamin Olsen’s website; examples are clearly identified as practice recipes.
The native references were checked against the site’s Oxygen 6.2.0-beta.9 installation and public documentation. Individual recipes should still be validated in your project.