In this tutorial, we will walk through creating a simple webpage from scratch using pure HTML—no complex tools required!
### What You Need
1. A Text Editor:* VS Code, Notepad++, Sublime Text, or even standard Notepad.
2. A Web Browser:* Chrome, Firefox, Edge, or Safari.
### Step 1: Set Up Your Project File
1. Open your text editor.
2. Create a new file and save it as **
index.html. (Note: index.html is the default standard file name for a website’s main homepage).*### Step 2: Understand the Basic HTML Structure
Every HTML5 document relies on a standard boilerplate layout. Copy and paste this code into your file:
HTML
$$
My First Webpage
Welcome to My Website!
This is my very first webpage built using pure HTML.
$$
#### Key Tags Explained:
* **
<!DOCTYPE html>**: Declares the document type and HTML version (HTML5).* **
<html>**: The root element wrapping all content on the page.* **
<head>**: Contains metadata, page titles, and external resources (not visible directly on the page).* **
<body>**: Holds all visible content like headers, paragraphs, images, and links.### Step 3: Add Essential HTML Elements
To add real content, place these common tags inside the
<body> element:Headings: Use
<h1> through <h6> for titles and section headings.Paragraphs: Use
<p> for blocks of regular text.Links: Use
<a href="URL">Link Text</a> to link to other pages.Images: Use
<img src="image.jpg" alt="Description"> to display images.Lists: Use
<ul> (unordered list) or <ol> (ordered list) alongside <li> (list item).#### Complete Working Example:
HTML
$$
My Portfolio
Alex Developer
Learning web development step by step.
About Me
Hello! I am currently learning how to code websites. Here are my favorite technical topics:
- HTML5 Structure
- CSS Styling
- JavaScript Logic
Resources
Learn more at MDN Web Docs.
© 2026 Alex Developer. All rights reserved.
$$
### Step 4: Preview Your Page
1. Save the changes to your
index.html file.2. Locate the file on your computer and double-click it (or drag and drop it into your web browser).
3. Congratulations! You have built and launched your first local webpage.
### Next Steps & Discussion
Once you master basic HTML skeleton structures, the next logical step is learning CSS (to style elements, add colors, and fix layouts) and JavaScript (to add interactive features).
Which text editor are you currently using for coding?
If you run into any syntax issues or tags not rendering properly, reply below with your code block and let's fix it together!