Code Examples
HTML Website Example: A Complete One-File Website You Can Copy
A complete HTML website example in one file — full runnable code, a rendered-preview sketch, the semantic structure explained, a split HTML + CSS variant, and a blank starter template you can copy and fill in.
This page is a complete HTML website example: one file you can copy, save, and open in a browser. It contains the full HTML and CSS for a small cafe website — a real, finished-looking page, not a fragment. Everything is explained below: what the page is built from, how the markup is organized, and how to adapt it for your own site. It is part of the code examples library.
The complete HTML website example
Below is the whole site in a single index.html file. It is self-contained — no external stylesheets, fonts, or images — so it runs offline and needs nothing installed. Copy it, save it as index.html, and open that file in any browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Larkspur Café — Coffee & Pastries</title>
<meta name="description" content="Larkspur Café serves coffee, tea, and fresh pastries in the Eastside neighborhood. Open Monday to Saturday." />
<style>
:root {
--ink: #1f2937;
--muted: #6b7280;
--accent: #b45309;
--paper: #fdfaf5;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
color: var(--ink);
background: var(--paper);
line-height: 1.6;
}
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: #111827;
color: #ffffff;
padding: 8px 14px;
z-index: 10;
}
.skip-link:focus { left: 0; }
header { background: #292524; color: #f5f5f4; }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 14px 0;
}
.brand { font-size: 1.3rem; font-weight: bold; margin: 0; }
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 22px;
}
nav a { color: #e7e5e4; text-decoration: none; }
nav a:hover, nav a:focus { color: #ffffff; text-decoration: underline; }
.hero {
background: linear-gradient(#b45309, #92400e);
color: #ffffff;
text-align: center;
padding: 64px 0;
}
.hero h1 { font-size: 2.4rem; margin: 0 0 10px; }
.hero p { font-size: 1.1rem; margin: 0 auto; max-width: 560px; }
section { padding: 44px 0; }
h2 { color: var(--accent); }
.menu-list { list-style: none; padding: 0; }
.menu-list li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #e7e5e4;
}
.menu-name { font-weight: bold; }
.price { color: var(--muted); }
address { font-style: normal; }
footer {
background: #292524;
color: #a8a29e;
text-align: center;
padding: 20px 0;
font-size: 0.9rem;
}
footer a { color: #e7e5e4; }
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>
<div class="container header-inner">
<p class="brand">Larkspur Café</p>
<nav aria-label="Primary">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#visit">Visit</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<div class="hero">
<h1>Fresh coffee, baked daily</h1>
<p>Larkspur Café is a small neighborhood shop serving coffee, tea, and pastries made from scratch each morning.</p>
</div>
<section id="about">
<div class="container">
<h2>About</h2>
<p>We opened Larkspur Café in 2019 on the corner of Cedar and Main. Everything on the menu is prepared in-house, from the espresso roast to the morning muffins.</p>
</div>
</section>
<section id="menu">
<div class="container">
<h2>Menu</h2>
<ul class="menu-list">
<li><span class="menu-name">House coffee</span><span class="price">$2.50</span></li>
<li><span class="menu-name">Cappuccino</span><span class="price">$4.00</span></li>
<li><span class="menu-name">Chai latte</span><span class="price">$4.50</span></li>
<li><span class="menu-name">Morning muffin</span><span class="price">$3.25</span></li>
</ul>
</div>
</section>
<section id="visit">
<div class="container">
<h2>Visit</h2>
<address>
48 Cedar Avenue<br />
Eastside, Portland, OR<br />
<a href="mailto:hello@larkspur.example">hello@larkspur.example</a><br />
<a href="tel:+15035550137">(503) 555-0137</a>
</address>
<p>Monday to Saturday, 7:00–16:00. Closed Sundays.</p>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2026 Larkspur Café. All rights reserved.</p>
</div>
</footer>
</body>
</html>
What the example looks like
The example is a one-page business site for a fictional cafe. Before you run it, here is a sketch of the layout it renders — a browser window with the header and navigation, the headline hero, two content areas, and the footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
body { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #f3f4f6; padding: 24px; }
.window { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); overflow: hidden; }
.titlebar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #e5e7eb; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.r { background: #fca5a5; } .y { background: #fcd34d; } .g { background: #86efac; }
.url { flex: 1; text-align: center; font-size: 12px; color: #6b7280; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 999px; padding: 3px 10px; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #292524; padding: 12px 18px; }
.brand { color: #f5f5f4; font-size: 13px; }
.nav { display: flex; gap: 14px; }
.nav span { color: #e7e5e4; font-size: 11px; }
.hero { background: #b45309; color: #fff; text-align: center; padding: 40px 18px; }
.hero h1 { margin: 0 0 8px; font-size: 18px; }
.hero p { margin: 0 auto; font-size: 11px; max-width: 460px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 18px; }
.col h2 { font-size: 13px; margin: 0 0 8px; color: #b45309; }
.line { height: 8px; background: #e5e7eb; border-radius: 4px; margin-bottom: 8px; }
.line.short { width: 60%; }
.row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f3f4f6; font-size: 11px; }
.footer { background: #292524; color: #a8a29e; text-align: center; padding: 14px; font-size: 10px; }
</style>
</head>
<body>
<div class="window">
<div class="titlebar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">https://larkspur.example/</span></div>
<div class="header">
<span class="brand">Larkspur Café</span>
<div class="nav"><span>About</span><span>Menu</span><span>Visit</span></div>
</div>
<div class="hero"><h1>Fresh coffee, baked daily</h1><p>A one-line description of the shop, shown here as a sketch of the real page.</p></div>
<div class="cols">
<div class="col"><h2>About</h2><div class="line"></div><div class="line"></div><div class="line short"></div></div>
<div class="col"><h2>Menu</h2><div class="row"><span>House coffee</span><span>$2.50</span></div><div class="row"><span>Cappuccino</span><span>$4.00</span></div><div class="row"><span>Chai latte</span><span>$4.50</span></div></div>
</div>
<div class="footer">© 2026 Larkspur Café</div>
</div>
</body>
</html>
The mockup is only a picture of the layout; the complete code in the section above is what produces it.
The structure of the example
Every HTML page is a tree of nested tags. Here is the exact tree the example builds, with a note on what each branch does:
index.html
├── <!DOCTYPE html>
├── <html lang="en">
│ ├── <head>
│ │ ├── <meta charset="utf-8">
│ │ ├── <meta name="viewport">
│ │ ├── <title> ← shows in the browser tab
│ │ ├── <meta name="description">
│ │ └── <style> ← embedded CSS
│ └── <body>
│ ├── <a class="skip-link"> ← jumps keyboard users to main content
│ ├── <header>
│ │ └── <nav> > <ul> > <li> > <a> ← About, Menu, Visit
│ ├── <main id="main">
│ │ ├── <div class="hero"> ← the one <h1>
│ │ ├── <section id="about">
│ │ ├── <section id="menu">
│ │ └── <section id="visit">
│ │ └── <address> ← contact information
│ └── <footer>
The essential parts of an HTML page
The example uses every part a complete HTML page needs. This table shows the parts and why they are there:
| Part | What it does |
|---|---|
<!DOCTYPE html> | Tells the browser this is a modern HTML document and how to render it |
| <html lang="en"> | Declares the page language for screen readers, translation, and hyphenation |
| <head> | Holds metadata and the style block; nothing here is visible on the page |
| <meta charset="utf-8"> | Sets the character encoding so text like "Café" displays correctly |
| <meta name="viewport"> | Tells phones to size the page to the screen width |
| <title> | The page name shown in the browser tab and in search results |
| <meta name="description"> | The one-to-two-sentence summary search engines may show under the title |
| <body> | Everything the visitor sees |
| Landmarks (<header>, <nav>, <main>, <footer>) | Give the page a structure that screen readers and browsers can navigate |
| One <h1> | The single main heading; the page outline hangs off it |
| <section> | Groups related content, each with its own heading |
For how these parts link together into a larger site, see the website structure examples page; the address this page lives at is explained on the website URL examples page.
The key techniques in the example
Three choices make this example worth copying rather than just reading.
Semantic structure
The example uses HTML elements for what they mean, not just how they look: header, nav, main, section, footer, address, and lists. Screen readers and search engines read this structure directly, and the CSS can target it without extra class names everywhere.
Accessibility basics
- The <html> element declares the language with
lang="en". - The page has exactly one <h1>.
- A skip link at the top jumps keyboard users straight to the main content.
- Links show a visible focus state, so keyboard users can always see where they are.
Embedded CSS
All styling lives in one <style> block in the head. Colors are defined once as CSS variables (--ink, --accent, and so on), so you can restyle the whole site by editing a few lines. Keeping CSS in the same file makes the example a single movable unit; the next section shows the two-file alternative.
Splitting HTML and CSS into two files
The single file is great for a one-pager, but as a site grows you usually keep HTML and CSS in separate files. The CSS below is exactly what was embedded, saved as style.css:
:root {
--ink: #1f2937;
--muted: #6b7280;
--accent: #b45309;
--paper: #fdfaf5;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
color: var(--ink);
background: var(--paper);
line-height: 1.6;
}
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: #111827;
color: #ffffff;
padding: 8px 14px;
z-index: 10;
}
.skip-link:focus { left: 0; }
header { background: #292524; color: #f5f5f4; }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 14px 0;
}
.brand { font-size: 1.3rem; font-weight: bold; margin: 0; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
nav a { color: #e7e5e4; text-decoration: none; }
nav a:hover, nav a:focus { color: #ffffff; text-decoration: underline; }
.hero { background: linear-gradient(#b45309, #92400e); color: #ffffff; text-align: center; padding: 64px 0; }
.hero h1 { font-size: 2.4rem; margin: 0 0 10px; }
.hero p { font-size: 1.1rem; margin: 0 auto; max-width: 560px; }
section { padding: 44px 0; }
h2 { color: var(--accent); }
.menu-list { list-style: none; padding: 0; }
.menu-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e7e5e4; }
.menu-name { font-weight: bold; }
.price { color: var(--muted); }
address { font-style: normal; }
footer { background: #292524; color: #a8a29e; text-align: center; padding: 20px 0; font-size: 0.9rem; }
footer a { color: #e7e5e4; }
Then the head of index.html swaps the <style> block for one link line:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Larkspur Café — Coffee & Pastries</title>
<link rel="stylesheet" href="style.css" />
</head>
The rest of the HTML is unchanged. Keep index.html and style.css in the same folder so the browser can find the stylesheet.
| Approach | What it is | When to use it |
|---|---|---|
One file (index.html) | HTML and CSS together in a single document | A one-page site, a demo, or a file you share as one unit |
Two files (index.html + style.css) | HTML in one file, CSS in another, linked with <link> | Any site with more than one page, or when you want one stylesheet shared across pages |
A site of several pages reuses the same style.css, which is why multi-page sites prefer the split. How pages fit together is the subject of the website structure examples page, and the smallest version of that idea — a folder of static files with no server — is the static website example.
Blank HTML starter template
This is the same skeleton with the content removed. Copy it, replace every [ ... ] with your own details, and you have a new page ready to style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>[Your page title]</title>
<meta name="description" content="[One or two sentences describing this page]" />
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>
<!-- Site name and navigation -->
</header>
<main id="main">
<section>
<!-- Page content: headings, paragraphs, lists, images -->
</section>
</main>
<footer>
<!-- Copyright and contact details -->
</footer>
</body>
</html>
HTML page checklist
Run through this before you publish any HTML page:
# Complete HTML page checklist
## The page skeleton
- [ ] <!DOCTYPE html> declared first
- [ ] <html lang="..."> matches the page's language
- [ ] <meta charset="utf-8" /> in the head
- [ ] <meta name="viewport" ...> in the head (mobile)
- [ ] A unique <title> and a meta description
- [ ] Exactly one <h1> in the body
## Content and structure
- [ ] Content grouped with semantic tags: header, nav, main, section, footer
- [ ] Lists use <ul>/<ol>/<li>, not hand-spaced text
- [ ] Images have alt text
- [ ] Links use descriptive text
- [ ] Contact information marked up with <address>
## Accessibility
- [ ] A skip link to the main content
- [ ] Visible focus states on links and buttons
- [ ] Text contrast is readable
- [ ] The page works with the keyboard, not just the mouse
## Before you publish
- [ ] The page opens in a browser with no errors
- [ ] Checked on a phone-sized window
FAQ
Frequently asked questions
What is an HTML website example?
How do I run the HTML example on this page?
Can I use this HTML example for my own website?
What is the difference between a one-file HTML page and separate HTML and CSS files?
Do I need CSS and JavaScript to make an HTML website?
Is the example HTML website responsive?
What makes an HTML page valid?
What to do next
A single HTML page is the start of a website. To make that page adapt to phones, see the responsive website example; to understand a site made of many static files, the static website example breaks down the file setup. The website structure examples page shows how pages and navigation fit together, and the website wireframe example shows how to sketch a layout before you write any HTML. For the broader picture around every element this example uses, browse the website basics library or start from the code examples hub.