Settings

The Settings tab — the gear, last in the strip — is where an element's HTML details
live: its ID and any attributes you want on the tag.

ID

The element's id attribute, typed without a #. Use it when something needs to be
addressed by name — an anchor link scrolling to #pricing, or a script or embed that wants
a specific id. Style through classes instead; IDs are for identity.

An id must be unique on the page. Two elements sharing one is invalid HTML, and anchor
links and scripts will find only the first.

Attributes

Arbitrary attributes on the element's tag, as name/value pairs. Click Add attribute,
give it a name and a value, and it's written straight onto the element:

<div id="plan-starter" class="apc-card plan-card" data-plan="starter">

Use them for what HTML expects on the tag rather than in CSS — data-* hooks for your own
scripts, ARIA attributes where the element doesn't already provide one, target and rel
on links, or attributes a third-party library reads.

Dynamic attributes

An attribute's value doesn't have to be fixed. Click the database icon beside the value
field to bind it to dynamic data, and
each item renders its own — data-price taking the post's price field on every card in a
loop, for instance.

Custom HTML tags

An element's tag isn't in this tab — it's at the top of the properties panel, on the right
of the title bar next to the element's name.

Click it and you get a list of tags appropriate to that element: a Container offers div,
section, header, nav, article, ul, li and more. You aren't limited to the list —
type any valid tag name instead and Oxygen uses it. Elements with only one sensible tag
don't show the control at all.

Changing the tag changes only the markup. Styles, classes and settings all stay as they
are, so switching a div to a section for the sake of the document outline costs you
nothing.