How to Create a Website with HTML

You can create a basic website with HTML by making a project folder, writing an index.html file with semantic page content, and opening that file in a browser. HTML supplies the page structure; add CSS when you want to control its colors, spacing, fonts, or layout. Previewing the file on your computer is separate from publishing it online.

1. Decide what your first page should do

Keep the first version small: a personal profile, a page about a hobby, or a simple landing page is enough. Decide what a visitor should learn or do, then list the content you need, such as a heading, a few paragraphs, a list, and one or two links.

2. Create a project folder and an HTML file

Create a folder for the site, for example my-first-site. Inside it, create a file named index.html. This is the conventional filename for a basic website’s home page.

Put the following complete page in index.html. Replace the example name, description, and links with your own content.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="A short description of this website.">
    <title>My First Website</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Hello, I'm Alex</h1>
      <p>Welcome to my first website.</p>
    </header>

    <main>
      <section aria-labelledby="about-heading">
        <h2 id="about-heading">About me</h2>
        <p>I enjoy learning how the web works and sharing what I make.</p>
      </section>

      <section aria-labelledby="links-heading">
        <h2 id="links-heading">Things I like</h2>
        <ul>
          <li>Reading</li>
          <li>Photography</li>
          <li>Building small projects</li>
        </ul>
      </section>

      <nav aria-label="More information">
        <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website"
          >Learn how websites are built</a>
      </nav>
    </main>

    <footer>
      <p>Made with HTML.</p>
    </footer>
  </body>
</html>

The <head> contains information about the document, including its character encoding, mobile viewport, title, description, and stylesheet link. The visible page goes in <body>. Elements such as <header>, <main>, <section>, <nav>, and <footer> describe the roles of parts of the page. Headings organize those parts; paragraphs, lists, and links provide content.

3. Add CSS for appearance

HTML structures the content. CSS controls presentation, including colors, fonts, spacing, and columns. The example links to styles.css, so create that file in the same folder and add:

* {
  box-sizing: border-box;
}

body {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  color: #202124;
  background: #f7f8fa;
  font: 1rem/1.6 system-ui, sans-serif;
}

header,
main,
footer {
  padding: 1.25rem;
  background: #fff;
  border-radius: 0.75rem;
}

main {
  margin-block: 1rem;
}

h1,
h2 {
  line-height: 1.2;
}
a {
  color: #0759b5;
}

Save both files in the same folder. If you do not want to style the page yet, remove the <link rel="stylesheet" href="styles.css"> line; the browser will still display the HTML.

4. Preview the page in a browser

Save index.html and styles.css.
Open the project folder and open index.html in a web browser. You can usually double-click the file, or use the browser’s open-file command.
Change the markup or CSS, save the file, and reload the browser tab to see the update.

This local preview uses a file on your computer. It does not give the page a public web address, and other people cannot visit it just because it opens in your browser.

5. Add links and images carefully

For a link to another site, use an absolute URL such as https://example.com/. For a page or image in your own project, use a relative path. For example, create about.html beside index.html and link to it with <a href="about.html">About</a>.

To include an image file stored in an images subfolder, use an img element with a useful text alternative:

<img src="images/bike.jpg" alt="A red bicycle leaning against a brick wall">

The path and letter case must match the actual folder and file names, especially when you publish to a server with case-sensitive filenames. Keep images reasonably sized for the page and use descriptive alternative text when an image conveys information. Use empty alt="" for a purely decorative image.

6. Publish the website

Publishing means making the site files available from a web server. A domain is the public address visitors use; hosting serves the files at that address. Neither is required to write or preview your first HTML page.

For a small static site, common approaches include a repository-connected static host or separately arranged hosting and a domain. Compare setup effort, the control you need over files and configuration, custom-domain support, provider limits, and current costs. The available services and their terms change, so check the provider’s current documentation before choosing.

Make sure the home page is named index.html and that linked files, including CSS and images, are in the expected folders.
Choose a hosting approach that supports static HTML, CSS, and image files.
Follow that host’s current instructions to upload or connect the project.
Visit the address it provides and check the page, links, styles, and images. If you connect a custom domain, follow the host and domain provider’s current setup instructions.

For a step-by-step beginner introduction that covers building and publishing, see MDN’s guide to your first website. Its material also explains that publishing has more than one approach, from repository-based options to paid hosting and domain services for more control.

7. Check the finished page

Content: The page has a clear title and a meaningful main heading.
Structure: Sections use headings in a sensible order, and lists and links use the elements intended for them.
Small screens: The viewport meta element is present, and content fits without forcing a wide desktop layout.
Paths: Stylesheets, pages, and image filenames match their references, including capitalization.
Links: Links point to the intended destinations and can be followed with a keyboard.
Publishing: You have opened the public address separately from your local file preview and checked the deployed page.

8. Know what HTML can and cannot do

HTML describes page content and structure. CSS handles visual presentation. HTML by itself does not provide advanced styling, interactive application behavior, data storage, payment processing, or a backend. Those needs call for additional technologies and services; keep the first page static until there is a specific reason to add them.

Common problems and fixes

Symptom	Likely cause	What to check
The browser shows code as text or the file will not open as a page.	The file may have been saved with an extra extension, such as `index.html.txt`.	Show file extensions in your file manager and confirm the exact name is `index.html`.
Changes do not appear.	The file may not have been saved, or the browser may be showing a different copy.	Save your edits, verify the folder and file path, then reload the local page.
The page looks unstyled.	The stylesheet path or filename may not match, or the CSS file may not have been saved.	Check that `styles.css` is beside `index.html` and that the link’s `href` matches its name.
An image or internal link is missing.	The relative path, folder name, extension, or capitalization may be wrong.	Compare the reference with the actual file path character by character. Check again after publishing, where filename case can matter.
The public site shows an old page or a missing home page.	The deployment may not include the latest files or may not have the expected entry file.	Confirm the host received the current project and that `index.html` is in the directory the host serves.
A page is online but not at the address you expected.	Hosting and domain setup are separate steps, and domain configuration may not be complete.	Check the current instructions and status in both the hosting service and domain provider.

Performance, reliability, and cost

A simple static page has few moving parts: it consists of files that a host serves. Keep images appropriately sized, avoid adding large assets without need, and make sure the published copy contains every referenced file. For reliability, preserve a local copy of the project and inspect the public page after each deployment. Local preview is free in the sense that it requires no hosting, but making a site publicly available may involve provider or domain costs; compare current terms directly because this research does not establish present-day prices or limits.

Or skip the browser setup

If your goal is to capture a page after you have built or published it, ScreenshotNeo is a website screenshot API and MCP server. Its API takes a URL and returns an image or PDF; its MCP tools let AI agents such as Claude and Cursor take screenshots, inspect page information, and capture PDFs. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await (await import('node:fs/promises')).writeFile('shot.webp', image);

Replace YOUR_API_KEY with your key and change the example URL to your page. Cookie and consent banners are accepted and 60+ known consent platforms, newsletter popups, and chat widgets are removed before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. An MCP server supports AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Do I need to install anything to make an HTML page?

A text editor and a web browser are enough to write and preview a basic HTML file. A code editor can make editing more convenient, but the page itself is plain text.

Does an HTML page need an internet connection?

You can create and preview a local page without publishing it. An internet connection is needed for remote resources, such as external websites or images, and for visitors to access a hosted site.

Can I make more pages?

Yes. Add another HTML file, such as about.html, in the project and link between the pages with relative paths. Keep the shared CSS file alongside them if they use the same styles.

Where can I learn the next step?

Start with MDN’s first-website learning material, then learn CSS when you are ready to change the page’s appearance.