If you’ve ever wanted to build a website but didn’t know where to start, HTML is the perfect first step.

HTML (HyperText Markup Language) is the foundation of every website on the internet. It defines the structure of web pages — things like headings, paragraphs, images, links, and forms. No matter how advanced a website becomes, it always starts with HTML.

In this beginner-friendly tutorial, you’ll learn how to build your first real website from scratch using nothing more than a text editor and a web browser. You don’t need any programming experience.

By the end of this guide, you will be able to:

Understand how HTML works
Create a simple webpage
Add text, images, and links
Structure a page using semantic HTML
Publish your first website locally in your browser

We’ll move step by step, keeping everything simple and practical so you can see results immediately.

Setting Up Your HTML Project (Files, Editor, and Folder Structure)

Before we start writing any HTML, we need a simple workspace. The good news is you don’t need any special software — just a text editor and a web browser.

1. Create Your Project Folder

First, create a new folder on your computer. You can name it anything, but let’s use something simple like:

my-first-website

Inside this folder, we’ll keep all our website files.

2. Create Your First HTML File

Open the my-first-website folder and create a new file named:

index.html

The name index.html is important — it’s the default file browsers look for when opening a website folder.

3. Choose a Text Editor

You can write HTML using any text editor, but some are much better for web development. Here are some good free options:

Visual Studio Code (recommended)
Sublime Text
Notepad++ (Windows)
TextEdit (Mac — set it to plain text)

If you’re using Visual Studio Code:

Open VS Code
Click File → Open Folder
Select your my-first-website folder

Now VS Code will show your project on the left.

4. Folder Structure

Your project folder should now look like this:

my-first-website
│
└── index.html

Later, we’ll add folders for images and styles, but for now, this is enough.

5. Open Your Website in a Browser

To see your website:

Double-click index.html, or
Right-click it and choose Open With → Chrome / Edge / Firefox

You’ll see a blank page — that’s normal. We haven’t added any HTML yet.

6. First Test

Open index.html in your editor and type:

Hello, my first website!

Save the file, refresh the browser, and you should see that text appear.

🎉 You just created your first webpage!

Understanding HTML Structure (doctype, html, head, body)

Now that you’ve created your first HTML file, it’s time to understand how a real webpage is structured.

Every HTML page follows the same basic layout. Think of it like a house:

The doctype tells the browser what kind of house it is
The HTML tag wraps everything
The head contains invisible information
The body contains what users see

1. A Basic HTML Page

Replace everything inside index.html with this:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is my very first webpage.</p>
  </body>
</html>

Save the file and refresh your browser.

You should now see a heading and a paragraph.

2. The `<!DOCTYPE html>`

<!DOCTYPE html>

This tells the browser that the document is written in modern HTML (HTML5).
It helps browsers display the page correctly.

3. The `<html>` Tag

<html>
  ...
</html>

This is the root of your webpage. Everything else goes inside it.

4. The `<head>` Section

<head>
  <title>My First Website</title>
</head>

The <head> contains information about the page, not visible content.
Here we set the page title, which appears in the browser tab.

Later, the head will also include styles, fonts, and meta tags.

5. The `<body>` Section

<body>
  <h1>Welcome to My Website</h1>
  <p>This is my very first webpage.</p>
</body>

Everything inside <body> is what visitors see: text, images, buttons, links, etc.

6. HTML Tags Have Opening and Closing Parts

Most HTML elements look like this:

<tagname>Content goes here</tagname>

For example:

<p>This is a paragraph</p>
<h1>This is a heading</h1>

The browser reads these tags and displays the content accordingly.

Adding Text: Headings, Paragraphs, and Line Breaks

Text is the core of almost every website. In HTML, we use different tags to give text meaning and structure.

Let’s add more content to your index.html.

1. Headings (`h1` to `h6`)

HTML provides six heading levels:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Smaller Heading</h4>
<h5>Very Small Heading</h5>
<h6>Smallest Heading</h6>

<h1> is the most important heading (usually the page title).
<h6> is the least important.

Update your <body> like this:

<body>
  <h1>My First Website</h1>
  <h2>About Me</h2>
  <p>Hello! I am learning how to build websites using HTML.</p>
</body>

2. Paragraphs (`<p>`)

Paragraphs are created with the <p> tag:

<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>

Each paragraph appears on its own line with space between them.

3. Line Breaks (`<br>`)

If you want to start a new line inside the same paragraph, use <br>:

<p>
  This is the first line.<br>
  This is the second line.
</p>

<br> does not need a closing tag.

4. Try This Example

Replace your <body> content with:

<body>
  <h1>Welcome to My Website</h1>

  <h2>About Me</h2>
  <p>
    My name is Alex.<br>
    I am learning HTML.<br>
    I want to build my own website.
  </p>

  <h2>My Goals</h2>
  <p>I want to become a web developer.</p>
</body>

Save and refresh your browser to see the changes.

Adding Links and Images

Websites become useful when you can navigate and see visuals. Let’s add links and images to your first website.

1. Adding Links (`<a>`)

Links are created using the <a> (anchor) tag.

<a href="https://www.djamware.com">Go to Google</a>

The href attribute tells the browser where the link goes.

Add this inside your <body>:

<p>
  Visit my favorite website:
  <a href="https://www.wikipedia.org">Wikipedia</a>
</p>

When you click the link, it will open Wikipedia.

To open a link in a new tab:

<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>

2. Adding an Image (`<img>`)

Images use the <img> tag:

<img src="image.jpg" alt="Description">

The src is the image file path.
The alt text is important for accessibility and SEO.

3. Create an Images Folder

Inside your my-first-website folder, create a new folder called:

images

Put any image inside it, for example:

my-first-website
│
├── index.html
└── images
    └── profile.jpg

4. Display the Image

In your HTML:

<img src="images/profile.jpg" alt="My profile photo" width="200">

Save and refresh — your image should appear.

5. Full Example

Update your <body>:

<body>
  <h1>My First Website</h1>

  <img src="images/profile.jpg" alt="My photo" width="200">

  <p>Hello! This is my personal website.</p>

  <p>
    Visit my favorite site:
    <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>
  </p>
</body>

Structuring Your Page with Divs and Semantic HTML

As your website grows, you need a way to organize content into clear sections. HTML gives us tools to structure a page so it’s easy to read, style, and understand — both for humans and search engines.

1. Using `<div>` to Group Content

A <div> is a simple container. It doesn’t add any visual change, but it helps group elements.

Example:

<div>
  <h2>About Me</h2>
  <p>I am learning HTML.</p>
</div>

You can create multiple sections using <div>:

<div>
  <h2>About</h2>
  <p>This is my website.</p>
</div>

<div>
  <h2>Contact</h2>
  <p>Email me at [email protected]</p>
</div>

2. Why Semantic HTML Is Better

Semantic HTML uses meaningful tags instead of generic <div>s. These tags describe what the content is.

Some common semantic tags:

Tag	Meaning
`<header>`	Top of the page
`<nav>`	Navigation menu
`<main>`	Main content
`<section>`	A content section
`<article>`	A standalone piece
`<footer>`	Bottom of the page

These help:

Search engines understand your page
Screen readers help users with disabilities
Developers read your code more easily

3. Using Semantic Layout

Update your <body> to this:

<body>
  <header>
    <h1>My First Website</h1>
    <p>Learning HTML step by step</p>
  </header>

  <main>
    <section>
      <h2>About Me</h2>
      <p>I am learning how to build websites using HTML.</p>
    </section>

    <section>
      <h2>My Projects</h2>
      <p>This is my first website.</p>
    </section>
  </main>

  <footer>
    <p>© 2026 My First Website</p>
  </footer>
</body>

Refresh the browser — it looks simple, but the structure is now professional.

4. Div vs Semantic Tags

You can still use <div> inside semantic elements when needed, but it’s best to use semantic tags for page layout.

Bad (only divs):

<div>
  <div>Header</div>
  <div>Content</div>
  <div>Footer</div>
</div>

Good (semantic):

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

Creating Lists (Ordered and Unordered)

Lists are used everywhere on websites — menus, features, steps, and more. HTML provides two main types of lists: unordered (bullets) and ordered (numbered).

1. Unordered Lists (`<ul>`)

An unordered list displays bullet points.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Each list item is wrapped in <li>.

Add this inside one of your <section> elements:

<h2>What I’m Learning</h2>
<ul>
  <li>HTML</li>
  <li>Web design</li>
  <li>How websites work</li>
</ul>

2. Ordered Lists (`<ol>`)

An ordered list uses numbers.

<ol>
  <li>Open the editor</li>
  <li>Write HTML</li>
  <li>Save the file</li>
</ol>

Example:

<h2>How I Built This Website</h2>
<ol>
  <li>Created a folder</li>
  <li>Added an HTML file</li>
  <li>Wrote some content</li>
</ol>

3. Nested Lists

You can put a list inside another list:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

4. Try This in Your Page

Inside <main>, add:

<section>
  <h2>My Skills</h2>
  <ul>
    <li>HTML</li>
    <li>Creativity</li>
    <li>Problem solving</li>
  </ul>
</section>

<section>
  <h2>Steps I Follow</h2>
  <ol>
    <li>Plan the page</li>
    <li>Write the HTML</li>
    <li>View in the browser</li>
  </ol>
</section>

Refresh your browser to see nicely formatted lists.

Creating a Navigation Menu

Most websites have a menu at the top so users can move between pages or sections. We can build a simple navigation bar using links and lists.

1. Basic Navigation Structure

Navigation is usually placed inside a <nav> element.

Example:

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

But a better, more organized way is to use a list.

2. Navigation Using a List

Add this inside your <header>:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

By default, this will look like a vertical list, but it’s already a real navigation menu.

3. Linking to Page Sections

We can link menu items to sections on the same page using IDs.

Update your sections:

<section id="about">
  <h2>About Me</h2>
  <p>I am learning how to build websites.</p>
</section>

<section id="projects">
  <h2>My Projects</h2>
  <p>This is my first website.</p>
</section>

Now update the links:

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
  </ul>
</nav>

Clicking the menu items will jump to those sections.

4. Full Header Example

<header>
  <h1>My First Website</h1>

  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

Add an ID to your contact section, too:

<section id="contact">
  <h2>Contact</h2>
  <p>Email me at [email protected]</p>
</section>

You now have a working navigation menu.

Adding a Simple Contact Section and Footer

Every real website needs a way for visitors to reach you and a footer to display basic information. Let’s add both.

1. Creating a Contact Section

Add or update this section inside <main>:

<section id="contact">
  <h2>Contact Me</h2>
  <p>If you would like to get in touch, you can email me at:</p>
  <p>
    <a href="mailto:[email protected]">[email protected]</a>
  </p>
</section>

The mailto: link will open the visitor’s email app when clicked.

2. Adding a Footer

The footer goes at the bottom of your page and usually contains copyright or small info.

Add this just before </body>:

<footer>
  <p>© 2026 My First Website. All rights reserved.</p>
</footer>

3. Full Page Structure So Far

Your <body> now looks like this:

<body>
  <header>
    <h1>My First Website</h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>I am learning HTML.</p>
    </section>

    <section id="projects">
      <h2>My Projects</h2>
      <p>This is my first website.</p>
    </section>

    <section id="contact">
      <h2>Contact Me</h2>
      <p>Email me at <a href="mailto:[email protected]">[email protected]</a></p>
    </section>
  </main>

  <footer>
    <p>© 2026 My First Website</p>
  </footer>
</body>

You now have a complete basic website layout.

Final Touches and What to Learn Next

You have now built a complete, real website using only HTML. Before we finish, let’s clean things up and look at what you should learn next.

1. Final HTML File

Your index.html should look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>

  <body>
    <header>
      <h1>My First Website</h1>

      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section id="about">
        <h2>About Me</h2>
        <p>I am learning how to build websites using HTML.</p>
      </section>

      <section id="projects">
        <h2>My Projects</h2>
        <p>This is my first website.</p>
      </section>

      <section id="contact">
        <h2>Contact Me</h2>
        <p>Email me at <a href="mailto:[email protected]">[email protected]</a></p>
      </section>
    </main>

    <footer>
      <p>© 2026 My First Website</p>
    </footer>
  </body>
</html>

This is a valid, well-structured HTML page.

2. What You’ve Learned

You now know how to:

Create an HTML file
Use headings, paragraphs, links, and images
Structure a page with semantic HTML
Create lists and navigation menus
Build a real multi-section website

This is the foundation of web development.

3. What to Learn Next

HTML creates structure, but websites also need:

CSS (Styling)

To control:

Colors
Fonts
Layout
Spacing

Next topic:

CSS for Beginners – Style Your First Website

JavaScript (Interactivity)

To add:

Buttons
Animations
Form validation
Dynamic content

Next topic:

JavaScript Basics for Beginners

4. Publish Your Website

You can upload this website to:

GitHub Pages
Netlify
Vercel

This lets anyone on the internet see your site.

You have officially built your first website 🎉

You can find the full source code on our GitHub.

We know that building beautifully designed Mobile and Web Apps from scratch can be frustrating and very time-consuming. Check Envato unlimited downloads and save development and design time.

That's just the basics. If you need more deep learning about HTML, you can take the following cheap course:

Thanks!

HTML for Beginners: Your First Website Step by Step

Learn HTML from scratch and build your first website step by step. Perfect for beginners who want to create web pages with real examples.

Table of Contents:

Setting Up Your HTML Project (Files, Editor, and Folder Structure)

1. Create Your Project Folder

2. Create Your First HTML File

3. Choose a Text Editor

4. Folder Structure

5. Open Your Website in a Browser

6. First Test

Understanding HTML Structure (doctype, html, head, body)

1. A Basic HTML Page

2. The <!DOCTYPE html>

3. The <html> Tag

4. The <head> Section

5. The <body> Section

6. HTML Tags Have Opening and Closing Parts

Adding Text: Headings, Paragraphs, and Line Breaks

1. Headings (h1 to h6)

2. Paragraphs (<p>)

3. Line Breaks (<br>)

4. Try This Example

Adding Links and Images

1. Adding Links (<a>)

2. Adding an Image (<img>)

3. Create an Images Folder

4. Display the Image

5. Full Example

Structuring Your Page with Divs and Semantic HTML

1. Using <div> to Group Content

2. Why Semantic HTML Is Better

3. Using Semantic Layout

4. Div vs Semantic Tags

Creating Lists (Ordered and Unordered)

1. Unordered Lists (<ul>)

2. Ordered Lists (<ol>)

3. Nested Lists

4. Try This in Your Page

Creating a Navigation Menu

1. Basic Navigation Structure

2. Navigation Using a List

3. Linking to Page Sections

4. Full Header Example

Adding a Simple Contact Section and Footer

1. Creating a Contact Section

2. Adding a Footer

3. Full Page Structure So Far

Final Touches and What to Learn Next

1. Final HTML File

2. What You’ve Learned

3. What to Learn Next

CSS (Styling)

JavaScript (Interactivity)

4. Publish Your Website

Related Articles

2. The `<!DOCTYPE html>`

3. The `<html>` Tag

4. The `<head>` Section

5. The `<body>` Section

1. Headings (`h1` to `h6`)

2. Paragraphs (`<p>`)

3. Line Breaks (`<br>`)

1. Adding Links (`<a>`)

2. Adding an Image (`<img>`)

1. Using `<div>` to Group Content

1. Unordered Lists (`<ul>`)

2. Ordered Lists (`<ol>`)