How to Create a Simple Webpage With HTML

HTML gives a browser the structure and meaning of a webpage, such as headings, paragraphs, and links. In this guide, you will create a small page, save it as an HTML file, open it in a browser, and make a few changes to see how the markup works.

You do not need prior coding experience. A plain text editor and a browser are enough to begin; the steps also explain how to check your file when the result differs from what you expected.

What You’ll Need

A computer or other device that lets you create and save plain-text files.
A text editor. A basic editor is suitable; a code editor can make tags easier to read but is optional.
A web browser to open the saved file and view the page.
A folder for the project, so the HTML file and any later images or other files stay together.

HTML is not a programming language in the usual sense: it describes the content and structure of a document. You can make a useful first page without installing a server, adding a framework, or connecting to the internet.

Step-by-Step

Create a project folder. Make a new folder somewhere easy to find, such as a practice folder in your documents area. Keeping the page in one known place makes it simpler to save edits and locate related files later. Give the folder a short, descriptive name without unusual punctuation.
Open a plain-text editor. Start a new, blank document. A word processor is not ideal because it may add formatting that is invisible in the editing window and can prevent the browser from reading the file as intended. If your editor offers a plain-text mode, use it.
Type a basic HTML document. Enter the following example. It contains the main parts of a small HTML page:
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Webpage</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is my first webpage made with HTML.</p>
</body>
</html>
```
The doctype tells the browser to use modern HTML handling. The html element holds the document, and its language attribute identifies the main language. The head contains information about the page, while the body contains the content visitors see. The title in the head is commonly shown in the browser tab; it is not the same as the visible heading in the body.
Save the file with an HTML extension. Use your editor’s save command and save the document inside your project folder as index.html. If the editor asks for a file type, choose plain text or the option that preserves the name exactly. Some editors add a text extension automatically, so check the final filename rather than assuming it is correct.
Open the page in a browser. Find the saved file in your folder and open it with a browser. You should see the heading and the sentence from the body. The browser displays the page rather than the angle-bracket tags, because the tags describe how to interpret the content.
Change the content and save again. Return to the editor and replace the heading or paragraph with your own words. Save the file, then return to the browser and reload the page. Most browsers do not automatically show changes made to a local file until you reload it.
Add more structure with headings and paragraphs. Use a main heading for the page’s central subject, then use lower-level headings to introduce sections. For example, add <h2>About This Page</h2> followed by a paragraph. Use heading levels in a sensible order because they communicate the organization of the content, not just its appearance.
Add a list when items belong together. An unordered list uses <ul> around the list and <li> around each item. For example:
```
<h2>Things I Like</h2>
<ul>
  <li>Reading</li>
  <li>Drawing</li>
  <li>Walking</li>
</ul>
```
Use an ordered list instead when the sequence matters, such as instructions. Each item still belongs inside an li element.
Make a link with descriptive text. A link uses an anchor element and an href attribute to identify its destination. For a local example, create another HTML file in the same folder and link to it with <a href="about.html">Read about this page</a>. The filename in the link must match the saved file. Descriptive link text tells readers where the link leads more clearly than text such as “click here.”
Check the page and refine it. Save your work and reload the browser view. Read the page from top to bottom, test any links, and check that the headings and list make sense. If you later add images, keep them in the project folder and use an appropriate text alternative in the image element so people who cannot see the image can still understand its purpose.

These steps produce a basic, readable document, not a fully styled site. HTML handles structure; visual styling is commonly added with CSS, and interactive behavior can be added with JavaScript. You can learn those separately after you are comfortable editing the page’s content.

Common Mistakes

Saving the file with the wrong extension: A file named like a text document may open as source text or fail to behave as expected. Check the complete filename in the folder and save it with the HTML extension.
Forgetting a closing tag: Many elements need an opening tag and a closing tag. For example, a paragraph starts with <p> and ends with </p>. Missing a closing tag can cause later content to display in an unexpected way.
Putting visible content in the head: Page text intended for visitors generally belongs inside the body. The head is for document information such as the title and character encoding.
Using mismatched filenames in links: A link to a file that does not exist at the stated location will not reach the intended page. Check spelling, capitalization, and whether the file is in the same folder.
Expecting HTML alone to create every visual effect: HTML marks up content, but layout, colors, and decorative styling are usually handled with CSS. A simple unstyled page can still be complete and readable.

Tips

Indent nested elements consistently. Indentation does not usually change how a browser renders the page, but it makes the document easier to inspect and edit.
Choose tags for their meaning. Use headings for section titles, paragraphs for prose, and lists for grouped items rather than choosing tags only for their default look.
Keep filenames simple and use the same spelling everywhere. This reduces mistakes when linking one local page to another.
Make one change at a time when learning. Save and reload after each change so you can identify which edit caused a problem.
Use clear page titles and link labels. They help people distinguish pages and understand navigation, including when using assistive technology.

Troubleshooting

The browser shows the HTML tags as text. Confirm that you opened the saved HTML file, not the editor document or a text-only copy. Check that the filename ends in the HTML extension and that the editor did not append another extension. If needed, use the browser’s open-file option to select the correct file.

The page looks unchanged after an edit. Save the document in the editor, then reload the browser page. Also confirm you edited the same file that the browser opened; duplicate copies in different folders are an easy source of confusion.

A link does not work. Compare the destination written in the href attribute with the other file’s exact name and location. A relative link such as about.html points to a file beside the current page. If the destination is in a subfolder, the link must account for that folder.

Text or sections appear in the wrong place. Review the opening and closing tags around the affected area. Make sure each element is nested inside the intended parent and that the head and body boundaries are in the right places. A temporarily simplified page can help: remove recent additions, confirm the basic version works, then add the content back in small pieces.

Special characters display incorrectly. Keep the character encoding declaration, <meta charset="utf-8">, in the head and save the file using an editor’s UTF-8 encoding option when available. If the problem remains, check whether the editor changed the file encoding.

Frequently Asked Questions

Do I need internet access to create an HTML page?
No. You can write and open a basic HTML file locally without an internet connection. An internet connection is only needed for resources hosted elsewhere or for publishing the page online.

Do I need to install special software?
No. A plain-text editor and a browser are sufficient. A code editor may offer helpful features, but it is optional for a first page.

What is the difference between HTML and a website?
HTML is a markup language used to structure a document. A website can contain multiple linked pages and supporting files, and may also use CSS, JavaScript, or server-side tools.

Why does the browser show the page title in a tab but not on the page?
The title element belongs in the head and usually supplies the document title for browser interfaces. To show a heading within the page itself, add a heading element such as <h1> in the body.

Can I use HTML to change the page’s colors and layout?
HTML describes the content and structure. CSS is the standard way to control visual presentation, including colors, spacing, and layout. You can add a stylesheet after the basic HTML is working.

How do I put my page online?
You need a hosting service that can serve your files, and the steps depend on that service. Check its official instructions for uploading files and configuring a page; the local HTML file itself can be tested before you publish it.

A successful first webpage can be as small as a title, a heading, and a paragraph. Once you can save, open, edit, and reload that file, you have the basic workflow for building larger pages with HTML.