HTML Editing Mode

Switch to HTML mode for complete control over your page content and layout.

Switching to HTML Mode

For New Pages

When creating a page, select "HTML" as the content type.

For Existing Pages

1. Open the page
2. Click the "Format" dropdown
3. Select "HTML"
4. Content is preserved

HTML Mode Features

Full HTML Control

Write any valid HTML:

<div class="container">
  <h1>Custom Layout</h1>
  <p>Complete control over structure.</p>
</div>

Bulma CSS Classes

Use all Bulma classes:

<div class="columns">
  <div class="column is-half">
    <div class="box">Left column</div>
  </div>
  <div class="column is-half">
    <div class="box">Right column</div>
  </div>
</div>

Custom Styling

Add inline styles:

<div style="background: linear-gradient(to right, #00d1b2, #3273dc); padding: 2rem; color: white;">
  <h2>Gradient Background</h2>
</div>

JavaScript

Include interactive elements:

<button onclick="alert('Hello!')">Click Me</button>

When to Use HTML Mode

Complex Layouts

When Markdown isn't enough:

• Multi-column layouts
• Custom grids
• Advanced positioning

Custom Components

Build unique elements:

• Interactive demos
• Custom cards
• Special formatting

Precise Control

When you need exact HTML:

• Specific class combinations
• Custom attributes
• Semantic HTML

HTML Mode Toolbar

The toolbar adapts for HTML mode:

• Bold - Wraps in <strong>
• Italic - Wraps in <em>
• Underline - Wraps in <u>
• Code - Wraps in <code>
• Link - Creates <a> tag

Mixing HTML and Markdown

You can use HTML in Markdown pages:

# Markdown Heading

<div class="notification is-info">
  HTML notification in Markdown!
</div>

Back to **Markdown** formatting.

Best Practices

Semantic HTML

Use proper HTML5 elements:

<article>
  <header>
    <h1>Article Title</h1>
  </header>
  <section>
    <p>Content here</p>
  </section>
  <footer>
    <p>Footer content</p>
  </footer>
</article>

Accessibility

Include ARIA attributes:

<button aria-label="Close dialog">×</button>
<nav aria-label="Main navigation">...</nav>

Valid HTML

• Close all tags
• Use proper nesting
• Include required attributes

Common HTML Patterns

Two-Column Layout

<div class="columns">
  <div class="column">
    <h3>Left Column</h3>
    <p>Content</p>
  </div>
  <div class="column">
    <h3>Right Column</h3>
    <p>Content</p>
  </div>
</div>

Feature Cards

<div class="columns">
  <div class="column is-one-third">
    <div class="card">
      <div class="card-content has-text-centered">
        <span class="icon is-large has-text-primary">
          <i class="fas fa-rocket fa-3x"></i>
        </span>
        <p class="title is-4 mt-3">Fast</p>
        <p>Lightning-fast performance</p>
      </div>
    </div>
  </div>
  <!-- Repeat for more cards -->
</div>

Call-to-Action

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title">Get Started Today</h1>
      <p class="subtitle">Start building amazing documentation</p>
      <div class="buttons is-centered mt-4">
        <button class="button is-light is-large">Learn More</button>
        <button class="button is-link is-large">Get Started</button>
      </div>
    </div>
  </div>
</section>

Preview in HTML Mode

Always preview your HTML pages to ensure:

• Layout renders correctly
• Styles apply properly
• No broken elements

Switching Back to Markdown

You can switch back to Markdown anytime:

1. Click "Format" dropdown
2. Select "Markdown"
3. HTML is preserved (but may need adjustment)