What Is HTML? A Beginner’s Complete Guide

When I first started learning web development, HTML was one of the first technologies I came across. At that time, I thought HTML was a programming language because it was used to create websites.

I later learned that HTML is not actually a programming language. It is a markup language that tells the browser how the content of a web page is structured.

If you are completely new to web development, understanding HTML is one of the best places to start. Even if your goal is to become a JavaScript, React, Angular, or backend developer, having a good understanding of HTML will make your work much easier.

In this guide, I will explain what HTML is, how it works, the basic structure of an HTML document, commonly used HTML elements, and how you can start creating your own web pages.

What Is HTML?

HTML stands for HyperText Markup Language.

It is the standard markup language used to create and structure content on the web.

For example, when I want to tell the browser that something is a heading, I can use an HTML heading element:

<h1>Hello World</h1>

When I want to create a paragraph, I can use:

<p>This is my first web page.</p>

The browser reads these HTML elements and uses them to understand the structure of the page.

HTML can be used to create things such as:

• Headings
• Paragraphs
• Links
• Images
• Lists
• Tables
• Forms
• Buttons
• Videos
• Audio
• Page sections
• Navigation menus

So, if you have ever wondered how a browser knows which text is a heading and which text is a paragraph, HTML is one of the main reasons.

Is HTML a Programming Language?

This is one of the first questions I had when I started learning HTML.

The answer is no.

HTML is a markup language, not a programming language.

A programming language allows us to write logic and perform operations. For example, JavaScript can perform calculations:

let price = 100;
let quantity = 2;

let total = price * quantity;

HTML does not work this way.

Instead, HTML describes the structure and meaning of content.

For example:

<h1>My Blog</h1>
<p>Welcome to my website.</p>

Here, I am not telling the browser to perform a calculation or make a decision. I am simply describing the content.

A simple way to remember this is:

HTML = Structure

CSS = Appearance

JavaScript = Behavior

These three technologies are often used together to build websites.

How Does HTML Work?

HTML works through elements and tags.

Consider this example:

<h1>My Website</h1>

Here, <h1> is the opening tag and </h1> is the closing tag.

The text between them is the content.

Together, they form an HTML element.

The browser reads this information and displays “My Website” as a heading.

Another example is:

<p>I am learning HTML.</p>

The browser understands that this content is a paragraph.

You do not normally see the HTML tags themselves on the page. The browser interprets them and displays the result.

What Is an HTML Tag?

An HTML tag is a piece of markup enclosed inside angle brackets.

For example:

<h1>

and:

<p>

Some tags normally have both an opening and closing tag:

<p>Hello</p>

Others do not need a separate closing tag.

For example:

<img src="photo.jpg" alt="My photo">

The important thing to understand at the beginning is that HTML uses tags to describe different types of content.

What Is an HTML Element?

An HTML element generally consists of an opening tag, content, and a closing tag.

For example:

<p>Hello World</p>

We can break it down like this:

<p>        Opening tag
Hello World   Content
</p>       Closing tag

The entire thing is the HTML element.

You will hear the terms “tag” and “element” used frequently while learning web development. They are related, but they are not exactly the same thing.

What Are HTML Attributes?

HTML elements can have additional information called attributes.

For example:

<a href="https://example.com">Visit Website</a>

Here, href is an attribute.

It tells the browser where the link should go.

Another example is an image:

<img src="profile.jpg" alt="Profile picture">

This image element has two attributes:

• src tells the browser where the image is located.
• alt provides alternative text describing the image.

Attributes are normally written inside the opening tag.

The general pattern looks like this:

<tag attribute="value">Content</tag>

The Basic Structure of an HTML Document

When I create an HTML page, I normally start with a standard document structure.

Here is a simple example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<body>

    <h1>Hello World</h1>

    <p>This is my first web page.</p>

</body>

</html>

This might look complicated when you see it for the first time, but each part has a specific purpose.

Let’s look at it one piece at a time.

What Is <!DOCTYPE html>?

The first line is:

<!DOCTYPE html>

This tells the browser that the document is an HTML5 document.

It is called the document type declaration.

I always include it at the beginning of an HTML document.

What Is the <html> Element?

The <html> element is the root element of the page.

Everything else on the page is placed inside it.

For example:

<html>
    
    <!-- Other HTML elements go here -->

</html>

You will often see a lang attribute:

<html lang="en">

This tells browsers and assistive technologies that the primary language of the document is English.

What Is the <head> Element?

The <head> element contains information about the document that is not normally displayed as the main page content.

For example:

<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>

The head can contain things such as:

• Page title
• Metadata
• CSS references
• Favicons
• Search engine related information
• Other resources required by the page

What Is the <body> Element?

The <body> contains the visible content of the web page.

For example:

<body>

    <h1>My Website</h1>

    <p>Welcome to my website.</p>

</body>

Headings, paragraphs, images, links, forms, buttons, and many other visible elements normally go inside the body.

Common HTML Elements

There are hundreds of HTML elements, but you don’t need to memorize all of them when you are starting.

I recommend learning the commonly used ones first.

Headings

HTML provides six heading levels:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1> is the highest-level heading and <h6> is the lowest.

I generally use headings to create a logical structure for the content rather than choosing them based only on how large they look.

CSS should be used when I want to change the visual appearance.

Paragraphs

Paragraphs are created using the <p> element:

<p>
    HTML is used to structure content on web pages.
</p>

This is one of the most frequently used HTML elements.

Links

Links are created using the <a> element:

<a href="https://example.com">Visit Example</a>

The href attribute specifies the destination.

Links are one of the most important parts of the web because they allow users to move from one page to another.

Images

Images can be displayed using the <img> element:

<img src="photo.jpg" alt="A photo of a mountain">

The src attribute specifies the image source.

The alt attribute provides alternative text.

I recommend getting into the habit of adding meaningful alt text when the image conveys useful information.

Lists

HTML supports ordered and unordered lists.

An unordered list looks like this:

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

An ordered list looks like this:

<ol>
    <li>Install a code editor</li>
    <li>Create an HTML file</li>
    <li>Open it in a browser</li>
</ol>

<li> represents an individual list item.

HTML Semantic Elements

One topic I recommend learning early is semantic HTML.

Semantic elements describe the meaning or role of the content.

For example:

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

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
</nav>

<main>
    <article>
        <h2>My First Article</h2>
        <p>Article content goes here.</p>
    </article>
</main>

<footer>
    <p>Copyright 2026</p>
</footer>

Instead of using generic containers everywhere, semantic elements help describe the structure of the page.

Some commonly used semantic elements include:

• <header>
• <nav>
• <main>
• <section>
• <article>
• <aside>
• <footer>

Semantic HTML can make websites easier to understand and can also help with accessibility and search engine understanding.

HTML Comments

Sometimes I need to leave notes inside my HTML code.

For that, I can use comments:

<!-- This is a comment -->

The browser does not display the comment as normal page content.

Comments are useful for explaining sections of code or temporarily disabling code during development.

HTML Forms

HTML can also be used to create forms.

For example:

<form>

    <label for="name">Name:</label>

    <input type="text" id="name" name="name">

    <button type="submit">Submit</button>

</form>

Forms are commonly used for:

• Login pages
• Registration
• Contact forms
• Search boxes
• Newsletter subscriptions
• Checkout pages
• Data entry

HTML creates the structure of the form, while JavaScript or a backend application can be used to process the submitted data.

HTML and CSS

HTML and CSS are usually used together.

For example:

<h1>My Website</h1>

HTML creates the heading.

CSS can change how that heading looks:

h1 {
    font-size: 40px;
}

I like to think about it this way:

HTML decides what something is.

CSS decides how it looks.

For example, HTML can tell the browser that something is a button:

<button>Click Me</button>

CSS can then control its color, size, spacing, border, and other visual properties.

HTML and JavaScript

JavaScript adds behavior to HTML pages.

For example:

<button id="myButton">Click Me</button>

<script>
    document.getElementById("myButton").addEventListener("click", function () {
        alert("Hello!");
    });
</script>

Here, HTML creates the button and JavaScript responds when the user clicks it.

This is where websites start becoming interactive.

Do I Need to Learn HTML Before JavaScript?

I strongly recommend it.

You can technically start learning JavaScript without knowing much HTML, but you will eventually need to understand how JavaScript interacts with HTML elements.

For example, concepts such as the DOM make much more sense when you already understand HTML.

The same applies to frameworks such as React and Angular.

Even though these frameworks provide different ways of creating user interfaces, a solid understanding of HTML remains extremely useful.

Do I Need HTML If I Want to Learn React?

Yes.

When I started looking at frameworks, it was tempting to think that learning React meant I could skip HTML.

That is not a good approach.

React uses JSX, which looks very similar to HTML:

function Welcome() {
    return (
        <div>
            <h1>Welcome</h1>
            <p>Hello from React.</p>
        </div>
    );
}

If you understand HTML elements, attributes, nesting, forms, accessibility, and semantic structure, learning JSX becomes much easier.

The same principle applies when working with Angular templates.

How to Create Your First HTML Page

You don’t need any complicated setup to start learning HTML.

All you need is:

1. A computer
2. A text editor or code editor
3. A web browser

You can use a code editor such as Visual Studio Code.

Create a file named:

index.html

Then add:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My First Web Page</title>
</head>

<body>

    <h1>Hello World!</h1>

    <p>I am learning HTML.</p>

</body>

</html>

Save the file and open it in your browser.

You should see your heading and paragraph displayed on the page.

That’s it.

You have created your first web page.

What Should I Learn After HTML?

Once you are comfortable with the HTML basics, I recommend moving on to CSS.

A simple learning path would be:

HTML
  ↓
CSS
  ↓
JavaScript
  ↓
Git & GitHub
  ↓
React or Angular

If your goal is backend development with .NET, another path could be:

HTML
  ↓
CSS
  ↓
JavaScript Basics
  ↓
C#
  ↓
.NET
  ↓
ASP.NET Core Web API
  ↓
Database

You don’t need to master every HTML element before moving forward.

Learn the fundamentals, build a few small projects, and continue improving your HTML knowledge as you build more complicated applications.

Common Mistakes Beginners Make With HTML

When learning HTML, I see beginners making a few common mistakes.

Trying to Memorize Everything

There are many HTML elements and attributes.

You don’t need to memorize everything.

I still look up documentation when I can’t remember an element or attribute. That’s normal.

Focus on understanding how HTML works rather than memorizing a huge list of tags.

Using HTML for Styling

HTML should describe the structure and meaning of your content.

For styling, use CSS.

For example, don’t choose a heading element simply because you want large text.

Use the appropriate heading based on the document structure and let CSS control its appearance.

Ignoring Semantic HTML

Beginners often put everything inside <div> elements.

While <div> is useful, it doesn’t describe the meaning of the content.

Using semantic elements such as <header>, <nav>, <main>, <article>, and <footer> can make your HTML structure clearer.

Forgetting Accessibility

Accessibility should not be something I think about only at the end of a project.

Simple things such as meaningful alt text for informative images, properly associated labels for form controls, and logical heading structures can make websites much easier to use.

Final Thoughts

HTML is one of the simplest technologies to get started with, but it is also one of the most important technologies in web development.

When I look at a modern web application built with React, Angular, or another framework, HTML concepts are still there underneath the abstraction.

That’s why I recommend learning HTML properly before jumping into JavaScript frameworks.

You don’t need to learn hundreds of tags on your first day.

Start with the basics:

HTML document structure
        ↓
Headings and paragraphs
        ↓
Links and images
        ↓
Lists
        ↓
Forms
        ↓
Semantic HTML
        ↓
Accessibility basics

Then start building.

Create a personal profile page. Build a simple blog page. Create a contact form. Make a small documentation website.

The more pages you build, the more naturally HTML will start to make sense.

And once HTML becomes comfortable, moving on to CSS and JavaScript becomes much easier.