5 Tips for Better Standalone HTML Pages

Creating standalone HTML pages is an art. Unlike traditional web apps with multiple files and dependencies, standalone pages need to be completely self-contained. Here are our top tips for creating great pages on htmlpub.

1. Inline Your CSS

Keep your styling within <style> tags in your HTML file. This ensures your page renders immediately without waiting for external stylesheets.

<style>
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
  }
</style>

2. Use Modern CSS Features

Take advantage of CSS custom properties, flexbox, and grid for responsive layouts without frameworks:

:root {
  --primary-color: #ff6b35;
  --spacing: 1.5rem;
}

.container {
  display: grid;
  gap: var(--spacing);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

3. Optimize Images with Data URIs

For small images and icons, convert them to data URIs to keep everything in one file:

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E..." />

For larger images, use external CDN links or optimized hosting services.

4. Add Responsive Meta Tags

Always include these essential meta tags for proper mobile rendering:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">

5. Keep JavaScript Simple

If you need interactivity, vanilla JavaScript is often all you need. Modern browsers support powerful APIs:

<script>
  document.querySelector('button').addEventListener('click', () => {
    document.querySelector('.modal').classList.toggle('open');
  });
</script>

Bonus: Dark Mode Support

Add automatic dark mode support with CSS media queries:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #f0f0f0;
  }
}

Ready to Publish?

Put these tips into practice and publish your next HTML page on htmlpub.com.