Minimalist Footer Block Template for HTML
A clean, semantic HTML footer with sitemap columns, social links, and a newsletter signup. Zero dependencies. Drop-in .html snippet with full source, ready to ship.
- Niche
- E-commerce
- Asset Type
- footer
- File Type
- .html
- License
- MIT
What's included
- ✓Zero JavaScript dependencies
- ✓Semantic HTML5 landmarks
- ✓Accessible form labels
- ✓Mobile-first responsive grid
Live code preview
Syntax-highlighted snippet from the .html source. Click Download Code for the full archive.
<footer class="border-t border-slate-200 bg-white">
<div class="mx-auto grid max-w-6xl gap-10 px-6 py-14 md:grid-cols-4">
<div>
<p class="text-lg font-bold text-slate-900">Acme Co.</p>
<p class="mt-2 text-sm text-slate-500">
Quality goods since 2018.
</p>
</div>
<nav aria-label="Shop">
<h3 class="text-xs font-semibold uppercase tracking-wider text-slate-900">Shop</h3>
<ul class="mt-3 space-y-2 text-sm text-slate-600">
<li><a class="hover:text-slate-900" href="#">New arrivals</a></li>
<li><a class="hover:text-slate-900" href="#">Bestsellers</a></li>
<li><a class="hover:text-slate-900" href="#">Sale</a></li>
</ul>
</nav>
<nav aria-label="Company">
<h3 class="text-xs font-semibold uppercase tracking-wider text-slate-900">Company</h3>
<ul class="mt-3 space-y-2 text-sm text-slate-600">
<li><a class="hover:text-slate-900" href="#">About</a></li>
<li><a class="hover:text-slate-900" href="#">Careers</a></li>
<li><a class="hover:text-slate-900" href="#">Contact</a></li>
</ul>
</nav>
<form>
<h3 class="text-xs font-semibold uppercase tracking-wider text-slate-900">
Stay in touch
</h3>
<label class="mt-3 block">
<span class="sr-only">Email address</span>
<input type="email" required placeholder="you@example.com"
class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-900 focus:outline-none" />
</label>
<button type="submit"
class="mt-2 w-full rounded-lg bg-slate-900 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-700">
Subscribe
</button>
</form>
</div>
<div class="border-t border-slate-200">
<p class="mx-auto max-w-6xl px-6 py-4 text-xs text-slate-500">
© 2026 Acme Co. All rights reserved.
</p>
</div>
</footer>Technical specifications
Framework version, dependencies, and licensing for the .html file.
| Framework & Version | HTML5 (no framework) |
|---|---|
| Required Dependencies | None — zero-dependency |
| File Type | .html |
| License Type | MIT |
How to use this template
Follow these quick steps to integrate the snippet into your project.
- 1
Paste before </body>
Drop the footer markup just before your closing body tag.
- 2
Update the columns
Replace the nav links with your actual site structure.
- 3
Wire up the form
Point the form `action` at your newsletter provider.
- 4
Restyle if needed
The included CSS uses utility classes; replace with your design system.
Frequently asked questions
Everything you need to know before downloading the minimalist footer block.
Does it work without Tailwind?
Yes. Replace the class names with your own CSS or framework utilities.
Is the form accessible?
Yes. The email input uses an sr-only label and the form is keyboard navigable.