What is HTML? — Module 01 | Frontend Learning Roadmap

1. Introduction

If you have ever visited a website — any website — you have seen HTML in action. HTML is the very first technology you need to learn as a frontend developer. Without it, there are no web pages.

The good news? HTML is not a programming language. It has no complicated logic. It is a markup language — a way of labelling content so a browser knows how to display it.

In this lesson you will learn exactly what HTML is, how it works, and why it matters. By the end you will understand the big picture of web development and be ready to write your first HTML code.

2. Theory

What Does HTML Stand For?

HTML stands for HyperText Markup Language.

Word	Meaning
HyperText	Text that links to other text — this is what makes the web a "web" of connected pages
Markup	Adding labels (tags) to content to give it meaning and structure
Language	A set of rules that a browser understands

What Does HTML Do?

HTML describes the structure and content of a web page. It answers questions like:

Is this text a heading or a paragraph?
Is this a list of items?
Is this an image or a link?
Is this a form where a user can type input?

The browser reads your HTML file and renders it — converts it into the visual page you see on screen.

How Does a Browser Use HTML?

When you open a web page, here is what happens:

Your browser requests an HTML file from a server (or opens a local file on your computer)
The browser reads the HTML from top to bottom
It builds a visual representation of the page based on the tags it finds
The rendered page appears on your screen

HTML Tags and Elements

HTML uses tags to mark up content. A tag is a word surrounded by angle brackets: <tagname>

Most tags come in pairs — an opening tag and a closing tag. The closing tag has a forward slash:

<tagname> Content goes here </tagname>

An element is the combination of the opening tag + content + closing tag:

Part	Example	What it is
Opening tag	`<p>`	Starts the element
Content	`Hello, world!`	The actual text or nested elements
Closing tag	`</p>`	Ends the element
Full element	`<p>Hello, world!</p>`	A paragraph element

HTML, CSS, and JavaScript — What Is the Difference?

Technology	Role	Analogy
HTML	Structure and content	The walls and rooms of a house
CSS	Style and appearance	The paint, furniture, and decoration
JavaScript	Behaviour and interactivity	The electricity and plumbing

You learn HTML first because CSS and JavaScript are both applied to HTML. Without HTML, there is nothing to style or interact with.

3. Real World Example

Think about a newspaper. A newspaper has structure:

A big headline at the top
A smaller subheading below it
Paragraphs of text for the article body
Images with captions
Lists of bullet points

HTML does exactly this — it marks up content to say what each piece is. A browser then knows how to display a heading differently from a paragraph, an image differently from a link.

Every website you have ever visited — Google, YouTube, Instagram, Wikipedia — is built on HTML as its foundation.

4. Code Example

Here is the simplest complete HTML page possible:

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

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

  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>

</html>

If you save this code as index.html and open it in a browser, you will see a heading that says "Hello, World!" and a paragraph below it.

5. Code Breakdown

Let's go through every line of the example above:

Code	What It Does
`<!DOCTYPE html>`	Tells the browser "this is an HTML5 document". Always the very first line.
`<html lang="en">`	The root element — everything else goes inside this. `lang="en"` tells browsers the page is in English.
`<head>`	Contains information about the page — not visible content. Think of it as the page's settings.
`<meta charset="UTF-8">`	Sets the character encoding — ensures letters, numbers, and special characters display correctly.
`<title>My First Page</title>`	Sets the tab title shown in the browser tab at the top of the screen.
`</head>`	Closes the head section.
`<body>`	Contains all visible content — text, images, links, buttons. Everything the user sees.
`<h1>Hello, World!</h1>`	A level-1 heading — the biggest, most prominent heading on the page.
`<p>This is my first web page.</p>`	A paragraph of text.
`</body>`	Closes the body section.
`</html>`	Closes the root HTML element. Always the last line.

6. Common Mistakes

Mistake 1 — Forgetting to close tags

Wrong: My text

Right: My text

Unclosed tags can cause the entire page layout to break in unexpected ways.

Mistake 2 — Missing the DOCTYPE declaration

Forgetting <!DOCTYPE html> on line 1 puts the browser into "quirks mode" — an old compatibility mode that renders pages differently. Always include it.

Mistake 3 — Putting content outside the body

Visible content (text, images, etc.) must go inside <body>...</body>, not outside it or inside <head>.

Mistake 4 — Confusing the title with the heading

The <title> tag (in <head>) sets the browser tab text — not visible on the page. The <h1> tag (in <body>) is the visible heading on the page. They are different things.

7. Best Practices

Always include the HTML boilerplate

Every HTML file should start with <!DOCTYPE html>, <html lang="en">, <head> with at minimum <meta charset="UTF-8"> and <title>, and <body>. Never skip these.

Use proper indentation

Indent nested elements by 2 spaces. Indented code is much easier to read and debug. VS Code can auto-indent with Alt+Shift+F.

Write lowercase tag names

HTML is not case-sensitive, but the standard is to write all tag names in lowercase: <html> not <HTML>. Lowercase is cleaner and universally expected.

Use meaningful titles

The <title> should describe the page: "Contact Us — My Company" is better than just "Page".

8. Practice Exercise

Do this exercise before moving on. It takes about 5 minutes.

Open VS Code
Create a new file: File → New File
Save it as practice.html on your Desktop
Type the following HTML exactly as shown:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Practice Page</title>
  </head>
  <body>
    <h1>Hello, I am learning HTML!</h1>
    <p>Today I learned what HTML is.</p>
    <p>HTML stands for HyperText Markup Language.</p>
  </body>
</html>

Save the file (Ctrl+S)
Right-click the file tab in VS Code → Open with Live Server
Your browser should open and display the page

Expected result: You should see a large heading saying "Hello, I am learning HTML!" and two paragraphs below it.

9. Assignment

Create a simple "About Me" HTML page using only what you have learned so far.

Your page must include:

A correct HTML boilerplate (DOCTYPE, html, head, body)
A <title> that says your name
An <h1> heading with your name
At least 2  paragraphs — one about who you are, one about why you are learning HTML

Save the file as about-me.html and open it in your browser.

Challenge (optional): Look up the <hr> tag and the   tag. What do they do? Try using them in your page.

10. Interview Questions

Q1: What is HTML?

Answer: HTML stands for HyperText Markup Language. It is the standard language used to create and structure the content of web pages. It uses tags to define elements such as headings, paragraphs, links, images, and forms. Browsers read HTML and render it as a visual web page.

Q2: What is the difference between HTML, CSS, and JavaScript?

Answer: HTML provides the structure and content of a web page. CSS controls the visual styling — colours, fonts, layout. JavaScript adds interactivity and behaviour — responding to clicks, fetching data, updating content. A common analogy is: HTML is the skeleton, CSS is the skin and clothes, JavaScript is the muscles and brain.

Q3: What is the purpose of the DOCTYPE declaration?

Answer: <!DOCTYPE html> tells the browser which version of HTML the document uses. For HTML5 (the current standard), it is simply <!DOCTYPE html>. Without it, browsers may enter "quirks mode" and render the page inconsistently.

Q4: What is the difference between an HTML element and an HTML tag?

Answer: A tag is just the label — for example  or . An element is the complete unit: the opening tag + content + closing tag. So Hello is the element, while  and  are individual tags.

Q5: What goes inside the <head> vs the <body>?

Answer: The <head> contains metadata about the page — not visible to users. This includes the page title, character encoding, CSS links, and meta tags for SEO. The <body> contains all visible content — everything the user can see and interact with on the page.

11. Additional Resources

MDN Web Docs — HTML — The most complete and accurate HTML reference
W3Schools — HTML Introduction — Simple beginner-friendly reference
WHATWG HTML Specification — The official HTML standard (advanced)

After completing this lesson, open your browser's developer tools (F12) on any website and click the Elements tab. You will see the raw HTML that built that page!