Basic Usage
This guide will walk you through the basic usage of the Markdown to HTML Converter, from simple text conversion to advanced formatting options.
Getting Started
Step 1: Access the Tool
Navigate to the Markdown to HTML Converter page. You'll see a clean interface with two main areas:
- Left Panel: Input settings and Markdown text area
- Right Panel: HTML output and live preview
Step 2: Input Your Markdown
In the left panel, you'll find the "Markdown Input" text area. You can:
- Type directly: Start typing your Markdown content
- Paste content: Copy and paste existing Markdown from other sources
- Load example: Click "Load Example" to see a sample Markdown document
Step 3: Configure Basic Settings
Before converting, you can adjust these basic settings:
Output Format
- HTML: Standard HTML output (default)
- XHTML: XHTML-compliant output with self-closing tags
Encoding
- UTF-8: Unicode support for international characters (default)
- ASCII: Basic ASCII characters only
- Latin-1: Western European character set
Basic Conversion
Simple Text Conversion
Start with basic Markdown text:
# My First Document
This is a **bold** statement and this is _italic_ text.
## Features
- Easy to use
- Fast conversion
- Live preview
The converter will automatically transform this into clean HTML:
<h1>My First Document</h1>
<p>This is a <strong>bold</strong> statement and this is <em>italic</em> text.</p>
<h2>Features</h2>
<ul>
<li>Easy to use</li>
<li>Fast conversion</li>
<li>Live preview</li>
</ul>
Real-time Conversion
The conversion happens automatically as you type. You'll see:
- HTML Output: The generated HTML code in the right panel
- Live Preview: A rendered preview showing how the HTML will look
- Character Count: Number of characters in both input and output
Working with Different Content Types
Headers
Markdown headers are converted to proper HTML heading tags:
# Main Title (H1)
## Section Title (H2)
### Subsection (H3)
#### Sub-subsection (H4)
##### Minor Heading (H5)
###### Smallest Heading (H6)
Lists
Unordered Lists
- First item
- Second item
- Nested item
- Another nested item
- Third item
Ordered Lists
1. First step
2. Second step
1. Sub-step A
2. Sub-step B
3. Third step
Links and Images
[Link text](https://example.com)
Code
Inline Code
Use `console.log()` to output text.
Code Blocks
```javascript
function greet(name) {
console.log(`Hello, ${name}!`);
}
```
## Viewing Results
### HTML Output Panel
The HTML output panel shows:
- **Generated HTML**: Clean, semantic HTML code
- **Copy Button**: Quick copy to clipboard
- **Download Button**: Save as HTML file
- **Character Count**: Size of the generated HTML
### Live Preview Panel
The preview panel displays:
- **Rendered HTML**: How the content will look in a browser
- **Responsive Design**: Preview adapts to different screen sizes
- **Styled Content**: Proper typography and formatting
## Basic Tips
### 1. Use Proper Markdown Syntax
- Ensure proper spacing around headers
- Use consistent list formatting
- Close code blocks properly
### 2. Check the Preview
- Always review the live preview before copying/downloading
- Verify that formatting appears as expected
- Test links and images if included
### 3. Save Your Work
- Use the history feature to save conversions
- Download HTML files for important documents
- Copy to clipboard for quick use
## Common Issues and Solutions
### Issue: Headers Not Rendering
**Solution**: Ensure there's a space after the `#` symbol:
```markdown
# Correct Header
#Incorrect Header
Issue: Lists Not Formatting
Solution: Use consistent indentation and proper list markers:
- Item 1
- Item 2
- Nested item
Issue: Code Blocks Not Highlighting
Solution: Specify the language after the opening backticks:
```javascript
// Code here
```
## Next Steps
Now that you understand the basics, explore:
- [Advanced Features](/docs/core/markdown-to-html/advanced-features) for more formatting options
- [Security Considerations](/docs/core/markdown-to-html/security-considerations) for safe HTML output
- [Examples](/docs/core/markdown-to-html/examples) for real-world use cases