Seller Help

HTML Editor Rules For AI And Templates

Use this page as the exact rule sheet when asking AI to generate listing HTML for obid. The output is embedded inside the listing description area, not rendered as a full standalone website. AI should follow these rules before it writes any HTML or CSS.

Back to Guide Open Sell Page

AI Handoff Block

Paste this into AI before asking for a template:

Create HTML for an obid listing description only, not a full page.

Important layout rule:
- Start at the description content.
- Do not include html, head, body, or site-wide page wrappers.
- Do not include a final footer block.
- The output will be embedded inside an existing listing page.

Allowed structure:
- Use semantic content blocks such as section, article, div, header, figure, figcaption, table, ul, ol, li, p, h1-h6, blockquote, pre, code, span, strong, em, u, s, hr, a, img, label, style, and safe button tags.
- You may use checkbox or radio inputs only for visual UI patterns.

Allowed links and images:
- Links must use https://, mailto:, tel:, /, #, or ?.
- Images must use https:// or / paths.

CSS rules:
- Prefer class-based selectors.
- Keep CSS scoped to your own wrapper classes.
- Safe pseudo-classes are allowed such as :hover, :focus, :checked, :nth-child(), :not(), :is(), :where(), and :has().
- Media queries are allowed.
- Do not use @import.
- Do not use url() in CSS values.
- Do not use :root, :host, :host-context, ::slotted, or ::part.

Blocked behavior:
- No JavaScript.
- No script, iframe, object, embed, form, textarea, select, or unsafe event attributes.
- No javascript: URLs.
- No expression(), behavior, or -moz-binding.

Output style guidance:
- Build a polished listing section that works on mobile and desktop.
- Keep the layout self-contained.
- Use simple, stable CSS that survives sanitization.
- Return only the HTML that belongs inside the description area.

Do This

  • Start with one main wrapper class such as .listing-shell or .promo-layout.
  • Write content for the description section only.
  • Use headings, paragraphs, cards, tables, lists, and image blocks.
  • Use inline style only for small one-off adjustments and keep most CSS in a style block.
  • Use responsive grids carefully and include a mobile-friendly fallback.
  • Keep external links optional and clearly labeled.
  • Assume the template is injected into an existing page with its own header, gallery, price box, and footer.

Do Not Do This

  • Do not generate html, head, body, meta, or title tags.
  • Do not include a full-page header, top navigation, or site footer unless it is part of the actual description content.
  • Do not rely on imported fonts, CSS libraries, or JavaScript frameworks.
  • Do not use script tags, event handlers, or interactive logic that needs JavaScript.
  • Do not assume page-wide selectors will work as written.
  • Do not use blocked form controls such as textarea or select.
  • Do not use unsafe CSS features that the sanitizer removes.

Exact Rendering Rules

Embedding Context

  • Your HTML is placed inside the listing description container.
  • The site already provides the overall page shell, navbar, gallery, pricing panel, and footer.
  • The safest result starts with a wrapper section and ends with the last content block, not a page footer.
  • Templates copied from standalone pages should be converted into description-only fragments before use.

Selector Behavior

  • Prefer .your-wrapper .child selectors instead of body or html selectors.
  • IDs and classes are allowed after sanitization, but keep names simple.
  • Pseudo-classes can be used for presentational effects only.
  • Shadow DOM escape selectors are blocked for security.

Allowed HTML

High-level supported tags:

p, br, h1-h6, strong, em, u, s, ul, ol, li, span, div, center, blockquote, a, img, hr, code, pre, table, thead, tbody, tfoot, tr, th, td, section, article, header, footer, main, figure, figcaption, label, style, input (radio and checkbox only), button, plus a safe subset of SVG tags.

Note: Even if a tag is allowed, unsafe attributes or unsafe CSS can still be removed.

CSS Rules

Usually Safe

Typography, spacing, borders, colors, backgrounds, display, width, height, flex, grid, alignment, shadows, radius, overflow, object-fit, and responsive media queries.

Use Carefully

Complex selectors, advanced layout tricks, heavy absolute positioning, and deeply nested state-based UI can degrade after sanitization or embedding.

Blocked

@import, url() CSS values, javascript:, expression(), behavior, -moz-binding, and Shadow DOM escape selectors such as :root, :host, :host-context, ::slotted, and ::part.

Prompting Tips For AI

  1. Tell AI the output is for an embedded listing description, not a complete webpage.
  2. Ask for one wrapper section, then product content blocks, then a final shipping or trust section.
  3. Request class-based CSS inside one style block near the top of the fragment.
  4. Ask AI to avoid scripts, imports, full-page chrome, and external dependencies.
  5. Ask AI to keep the output mobile friendly and to return HTML only.

Example Request You Can Give AI

Using the rules above, create a premium product listing description fragment for obid.

Requirements:
- Output description-only HTML, not a full page.
- Start with one wrapper section and end before any footer.
- Include a title area, highlights, condition section, included items table, shipping/returns section, and one product image.
- Use one style block with class-based CSS.
- Make it responsive.
- Do not use JavaScript, @import, url() CSS values, or blocked tags.
- Return only the HTML.