Free HTML, CSS & JavaScript examples

HTML code examples
you can copy and try.

Start with a complete HTML page, try a working example, or find a quick reference. Read the code, see the result, and make it your own.

Simple code. No libraries. No account needed.

Hello, web.

One small idea. Ready to make your own.

Try the complete starter page

Learn a building block. Make something useful.

Complete working example

Complete starter HTML document

Start with a real document, a heading, a paragraph and a working section link.

HTMLCSSSelf-contained

Edit in playground

Live preview

Original code, no external assets

Read the complete HTML document

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{min-width:0;width:min(100%,600px);background:white;border-radius:20px;padding:clamp(20px,5vw,32px)}h1{font-size:clamp(24px,5vw,32px);line-height:1.2;margin:0 0 16px}h2{font-size:20px;margin:24px 0 12px}p,li{line-height:1.65}a{color:#2545a8;text-underline-offset:3px}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid #9eaed0;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #3658bf;outline-offset:3px}pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#eef2fa;padding:16px;border-radius:10px}code{font-family:ui-monospace,monospace}

</style>
</head>
<body>
<main>
  <h1>Hello, web.</h1>
  <p>This is a complete page you can change.</p>
  <a href="#next-step">Find your next step</a>
  <section id="next-step">
    <h2>Make it yours</h2>
    <p>Change this text, save the file and refresh your browser.</p>
  </section>
</main>
<script>

</script>
</body>
</html>

How it works

Copy HTML includes the doctype, English language, UTF-8 charset, viewport, title and all CSS around the body shown here. The main landmark contains a heading and a named section; the link moves within this same document. Change the language and title for your own page.

Troubleshooting and limits

Save the copied text as example.html, not a .txt file. Open it in a browser, and refresh after saving edits. The editor HTML tab contains the body; the complete document source below includes the head and document wrapper.

Choose a useful task