WeChat OA Maker

WeChat HTML Guidelines

Core Restrictions

Essential limitations you must follow

  • No <div> Tags Use <section> or <p> tags instead
  • Inline Styles Only No external CSS or <style> tags
  • No Position Property Avoid using position: absolute/fixed
  • No ID Attributes Use classes or inline styles instead
  • No JavaScript No <script> tags or onclick attributes

Styling Guidelines

How to style your content effectively

  • Font Recommendations
    • Font sizes should be 14-18px for body text
    • Use high contrast colors for better readability
    • Set line-height between 1.5-1.7 for better readability
  • SVG Usage
    • Avoid nested SVG elements
    • Images with links should have explicit dimensions
    • Always specify width/height for SVG elements
  • Responsive Design
    • No media queries, adapt for both mobile and desktop
    • Use vw/vh units for responsive sizing
  • Transform Property Use sparingly for simple effects

Best Practices

Recommended approaches for best results

  • Simplify Structure Keep HTML structure as flat as possible
  • Use System Fonts Stick to system fonts or common web-safe fonts
  • Optimize Images Keep images under 2MB and use JPG/PNG format
  • Border and Background Can be used for simple visual separation
  • Section-Based Layout Use <section> elements for layout blocks
  • Avoid Fixed Dimensions Use percentage-based widths where possible
  • Test On Mobile Always test your content on mobile WeChat