Props panel
The Props tab edits the HTML attributes of the selected element — its id, link destination, image source, form settings, accessibility labels and so on. It shows only the tools that apply to the selected element’s tag. Page-wide settings are listed below the element tools; see Page settings.
Layout
| Part | Description |
|---|---|
| Header | The selected element, as <tag>#id or <tag>.class. For several elements: the count and the shared tag, or mixed tags. With nothing selected: page settings only. |
| Search box | Filters tools by tool name, group name, or attribute name. While a search is active, every matching tool is expanded. |
| Tool header | Click to expand or collapse. The badge shows how many of the tool’s attributes are set (for Checks: how many errors and warnings). |
Attribute row
| Part | Description |
|---|---|
| Label | The attribute name. Bold when the attribute is set. |
| mixed | Shown when the selected elements have different values. The input is then empty; typing a value sets it on all of them. |
| Input | See below. |
| × | Removes the attribute. |
| Hint | Short note under some rows (for example what tabindex="-1" means). |
Input types
| Input | Writes |
|---|---|
| Text | The typed text, on Enter or when the field loses focus. Clearing the field removes the attribute. |
| Number | A number. Clearing removes the attribute. |
| Switch | For on/off attributes (disabled, required, hidden…): on adds the attribute, off removes it. |
| Dropdown / toggle buttons | The chosen value. Choosing nothing, or clicking the active toggle again, removes the attribute. Some attributes have an “empty means default” form — for example hidden with no value is shown as hidden, and popover with no value as auto. |
| Element picker | For attributes that point at other elements by id (for, list, form, aria-labelledby, …). Suggests ids on the page; ids that don’t exist are flagged. Multi-id attributes show each id as a chip with a + add id… list. |
Selection rules
- Tools that depend on the tag appear only when every selected element has that tag.
- Global attribute tools appear for any selection.
- Every change is one undo step, applied to all selected elements.
Element tools
Checks
| Tool | Shows |
|---|---|
| Element checks | Problems with the selected element. See HTML checks. |
Global attributes — any element
| Tool | Attributes |
|---|---|
| ID & class | id (single element only; flags spaces and ids already used elsewhere); class as removable badges with suggestions from class names in the project’s stylesheets |
| Title / tooltip | title |
| Language & direction | lang, dir (ltr, rtl, auto), translate (yes, no) |
| Visibility & interactivity | hidden (hidden or until-found), inert |
| Content editing | contenteditable, spellcheck, autocapitalize, autocorrect, enterkeyhint, inputmode |
| Keyboard & focus | tabindex, accesskey, autofocus |
| Data attributes | data-* as a name/value list. Type the name without the data- prefix. Names can be renamed in place. |
| Draggable | draggable (true, false, auto) |
Text & semantics
| Tool | Elements | Attributes |
|---|---|---|
| Quotation & edits | blockquote, q, del, ins | cite |
| Date & time | time, del, ins | datetime |
| Machine value | data | value |
| Ordered list | ol | type (1, a, A, i, I), start, reversed |
| List item | li | value |
Links
| Tool | Elements | Attributes |
|---|---|---|
| Link | a, area | href with a destination type picker, download, target, rel presets, hreflang, type, referrerpolicy, ping |
Destination types:
| Type | Field | href written |
|---|---|---|
| page | Path on this site | /about.html |
| # | Element on this page, picked by id | #pricing |
| url | External address | https://example.com |
| @ | Email address and optional subject | mailto:name@example.com?subject=Hello |
| tel | Phone number (spaces and punctuation are stripped) | tel:+15550100 |
| file | File path; also sets download | /files/report.pdf |
The type is detected from the current href. rel presets: noopener, noreferrer, nofollow, sponsored, ugc, external; other rel values already on the link are kept.
Images & media
| Tool | Elements | Attributes |
|---|---|---|
| Image | img | src, alt (with a decorative toggle that sets alt=""), width, height, loading, decoding, fetchpriority, crossorigin, referrerpolicy, usemap |
| Responsive images | img; source inside picture | srcset, sizes, media, type |
| Video | video | src, poster, controls, autoplay, muted, loop, playsinline, preload, width, height, crossorigin |
| Audio | audio | src, controls, autoplay, muted, loop, preload |
| Media source | source inside video or audio | src, type |
| Text track | track | kind, src, srclang, label, default |
| SVG | svg | viewBox, width, height, preserveAspectRatio |
| Canvas | canvas | width, height |
| Image map | map | name |
| Map area | area | shape, coords, alt (with a decorative toggle) (and the Link tool) |
Forms
| Tool | Elements | Attributes |
|---|---|---|
| Form | form | action, method, enctype, target, name, novalidate, autocomplete, accept-charset |
| Input type | input | type (all 22 input types) |
| Input | input of a text-like, number, date/time, color or range type | name, value, placeholder, required, disabled, readonly, autocomplete, size |
| Validation | same, except color | min, max, step, minlength, maxlength, pattern |
| Suggestions (datalist) | text-like, number, date, time, range and color inputs | list (picks a datalist by id) |
| File input | input type="file" | accept, multiple, capture, name, required, disabled |
| Checkbox & radio | input type="checkbox" / "radio" | checked, name (suggests existing radio group names), value, required, disabled |
| Input button | input type="submit", "reset", "button", "image" | value, name, disabled, src, alt |
| Hidden input | input type="hidden" | name, value |
| Label | label | for (picks a form control by id) |
| Textarea | textarea | name, placeholder, rows, cols, wrap, minlength, maxlength, required, readonly, disabled |
| Select | select | name, multiple, size, required, disabled |
| Option | option | value, label, selected, disabled |
| Option group | optgroup | label, disabled |
| Button | button | type, name, value, disabled, formaction, formmethod, formenctype, formtarget, formnovalidate |
| Fieldset | fieldset | name, disabled |
| Progress | progress | value, max |
| Meter | meter | value, min, max, low, high, optimum |
| Output | output | for (several ids), name |
| Form association | button, fieldset, input, object, output, select, textarea | form (picks a form by id) |
Embeds
| Tool | Elements | Attributes |
|---|---|---|
| Embed presets | iframe | Paste a YouTube or Vimeo link, or type a place name for Google Maps, then click Embed. Sets src, title, allow, allowfullscreen, loading="lazy" and referrerpolicy as each service needs. |
| Iframe | iframe | src, title, width, height, allow, allowfullscreen, loading, sandbox, referrerpolicy, name |
| Object | object | data, type, width, height, name |
| Embed | embed | src, type, width, height |
sandbox permissions are toggles (allow-scripts, allow-same-origin, allow-forms, allow-popups, allow-modals, allow-downloads, allow-top-navigation). With the attribute present and nothing selected, every restriction applies; × removes the sandbox entirely.
Interactive elements
| Tool | Elements | Attributes |
|---|---|---|
| Details | details | open, name (details with the same name open one at a time) |
| Dialog | dialog | open (shows the dialog non-modally) |
| Popover | any element | popover (auto, manual, hint) |
| Popover trigger | button; input of a button type | popovertarget (picks an element that has popover), popovertargetaction |
Tables
| Tool | Elements | Attributes |
|---|---|---|
| Table cell | td, th | colspan, rowspan, headers (picks th ids), scope, abbr |
| Column group | col, colgroup | span |
Accessibility (ARIA) — any element
| Tool | Attributes |
|---|---|
| Role | role |
| Labeling | aria-label, aria-labelledby, aria-describedby, aria-details |
| States | aria-expanded, aria-hidden, aria-current, aria-pressed, aria-checked, aria-selected, aria-disabled, aria-invalid, aria-required |
| Relationships | aria-controls, aria-owns, aria-haspopup, aria-activedescendant |
| Live region | aria-live, aria-atomic, aria-busy, aria-relevant |
Advanced — any element
| Tool | Attributes |
|---|---|
| Microdata | itemscope, itemtype, itemprop, itemid, itemref |
| Slot | slot |
| All attributes | Every attribute on the element as an editable name/value list, including ones without a dedicated tool. style is edited on the Style tab and is not listed. |
Related
- Reference: Page settings
- Reference: HTML checks
- How-to: Add a link
- How-to: Embed a video or map