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.