One Page Website HTML Template 2026

One-Page Website — When Less is More

A one-page website concentrates all your content on a single scroll-through experience. The visitor never navigates away — they see everything in sequence. This format works exceptionally well for: freelancers and consultants who want a simple professional presence, single-product or single-service businesses, event pages, and portfolios where the work is the focus. The main trade-off is SEO — one URL can only target one primary keyword combination effectively.

Nav

Sticky Anchor Navigation

Fixed navigation with anchor links (#about, #services, #portfolio, #contact) that scroll smoothly to each section. scroll-behavior: smooth on the html element handles the scrolling in CSS without JavaScript. Active section highlighting with Intersection Observer — the nav link corresponding to the current section becomes highlighted as the user scrolls.

Sections

Standard One-Page Sections

Hero → About → Services/Features → Portfolio/Work → Process → Testimonials → Pricing → Contact. Each section is a full-width row with consistent padding (80px top/bottom). Section alternation (light bg / dark bg) creates visual rhythm and makes the page feel less monotonous without requiring a multi-page navigation structure.

Animation

Scroll-Triggered Animations

Intersection Observer API: elements fade in (opacity: 0 → 1) and slide up (transform: translateY(30px) → 0) as they enter the viewport. CSS transition: opacity 0.6s ease, transform 0.6s ease. Adding a 100ms staggered delay on card grids (each card's delay increases by 100ms) creates a natural card-by-card reveal without complex JavaScript.

Mobile

Mobile Hamburger Menu

On mobile (max-width: 768px), collapse the anchor navigation into a hamburger icon. Toggle a full-screen or dropdown mobile menu overlay. Close the menu on anchor link click — one JavaScript event listener on each menu link: document.querySelector('[href^="#"]').addEventListener('click', closeMenu). A mobile menu that stays open after clicking a link is the most common one-page template bug.

One-Page vs Multi-Page — When to Choose Each

Use Case	One-Page	Multi-Page
Freelancer / consultant	Ideal — simple, fast	Overkill for most
Local service business	Fine if few services	Better for SEO
Product launch	Perfect format	Not needed
Agency / studio	Works at early stage	Better as you grow
Blog / content site	Not suitable	Always multi-page
Ecommerce store	Not suitable	Always multi-page

Get All 180+ Templates — $35 One-Time

Commercial licence · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

What sections should a one-page HTML website include?

A standard one-page website includes: Hero (headline, subheading, CTA), About (who you are and your background), Services or Features (what you offer), Portfolio or Work samples, Process (how you work), Testimonials (social proof), Pricing (optional but high-converting), and Contact (form or email link). Each section needs an id attribute matching the anchor nav link — id='services' corresponds to href='#services' in the navigation.

How do I add smooth scrolling to a one-page HTML website?

Add html { scroll-behavior: smooth; } to your CSS. This makes all anchor link clicks scroll smoothly to the target section instead of jumping. For offset positioning (accounting for a sticky header height), add scroll-margin-top: 80px (matching your header height) to each section element. This ensures the section title is not hidden behind the sticky navigation when scrolled to via anchor link.

How do I highlight the active section in a one-page navigation?

Use the Intersection Observer API: create an observer for each section element (threshold: 0.5). When a section becomes 50% visible, add an 'active' class to the corresponding nav link. Remove 'active' from all other nav links when a new section enters view. CSS: nav a.active { color: var(--purple); border-bottom: 2px solid var(--purple); }. This gives a dynamic navigation highlight without any scroll event listener performance overhead.

Can a one-page website rank on Google?

A one-page website can rank for one primary keyword topic — typically your name, brand, or main service plus location. It cannot rank for multiple independent keyword topics the way a multi-page site with dedicated pages can. For a freelancer targeting 'web developer [city]', a one-page site can rank well. For a service business targeting 'plumber [city]', 'emergency plumber [city]', and 'boiler repair [city]' separately, a multi-page site is required.

How many one-page HTML templates are in UIXDraft?

UIXDraft includes 180+ HTML/CSS templates including complete single-page layouts: hero sections, service cards, portfolio grids, testimonial components, and contact forms — designed to work as standalone one-page sites or as individual sections within multi-page builds. One $35 purchase, commercial licence.

HTML Templates for One-Page Websites