Lesson 1 of 6

Intro to HTML

Estimated time: 1.5–2 hours

What You Will Learn

What HTML is and why it matters
How web pages work in your browser
How HTML tags and elements are structured
The basic skeleton of every HTML document
How to write your very first "Hello World" web page

What is HTML?

Welcome to your very first coding lesson! We are thrilled to have you here. If you have never written a single line of code before, you are in exactly the right place. By the end of this lesson, you will have built your first web page — and that is something to be genuinely proud of.

HTML stands for HyperText Markup Language. That sounds like a mouthful, so let us break it down:

HyperText means text that can link to other text. When you click a link on a website, that is hypertext in action.
Markup means you are "marking up" plain text with special instructions that tell the browser how to display it — things like "this is a heading," "this is a paragraph," or "this is an image."
Language simply means it is a standardized way of writing those instructions so that every browser understands them the same way.

Here is a helpful way to think about it: imagine you are building a house. HTML is like the frame and structure of that house — the walls, the floors, the roof, the doorways. It does not handle the paint colors or the furniture arrangement (that is what CSS and JavaScript are for, which we will learn later). HTML defines what is on the page and how it is organized.

Every single website you have ever visited — Google, YouTube, Wikipedia, your favorite local Lansing restaurant's menu page — is built with HTML at its core. It is the universal foundation of the web, and learning it is the first step toward building anything online.

Tip You do not need to memorize everything right away. Coding is a skill you build over time through practice. Professional developers look things up constantly — and so will you. The goal right now is simply to understand the big ideas.

What is a Web Page?

A web page is, at its heart, just a text file. That is it! There is nothing magical about it. It is a plain text file with a .html extension (like index.html) that your web browser — Chrome, Firefox, Safari, Edge — knows how to read and display visually.

When you type a web address into your browser and press Enter, your browser downloads that HTML text file from a server somewhere in the world. Then it reads through the HTML instructions and renders (draws) the page you see on your screen — the headings, paragraphs, images, links, and everything else.

You can actually peek behind the curtain on any website. Try this right now: go to any web page, right-click anywhere on the page, and select "View Page Source" (or press Ctrl + U on Windows or Cmd + Option + U on Mac). What you see is the raw HTML that makes that page work. It might look overwhelming right now, but by the end of this course, you will be able to read and understand much of it.

Note You will sometimes hear people say "HTML is not a programming language." Technically, that is true — it is a markup language, meaning it describes structure rather than performing calculations or logic. But do not let that discourage you. HTML is absolutely real coding, and it is the essential first skill every web developer learns.

HTML Tags and Elements

HTML uses tags to tell the browser what each piece of content is. Tags are special keywords surrounded by angle brackets: < and >.

Most HTML tags come in pairs — an opening tag and a closing tag:

<p>This is a paragraph.</p>

Let us break that down:

<p> is the opening tag. It says, "Hey browser, a paragraph is starting here."
This is a paragraph. is the content — the actual text displayed on the page.
</p> is the closing tag. Notice the forward slash / before the tag name. It says, "The paragraph ends here."

Together, the opening tag + content + closing tag make up an HTML element. Think of tags as the bookends that surround your content.

Here are a few common tags you will see throughout this course:

<h1> through <h6> — Headings (h1 is the largest, h6 is the smallest)
<p> — Paragraph
<a> — A link (anchor)
<img> — An image
<ul> and <li> — An unordered (bulleted) list and its items

Some tags are self-closing, meaning they do not need a closing tag because they do not wrap around content. For example, the image tag:

<img src="photo.jpg" alt="A description of the photo">

The <img> tag does not have a </img> closing tag — it stands on its own because it does not contain text content. Instead, it uses attributes (like src and alt) to provide information about the image.

Tip Do not worry about memorizing every tag right now. We will introduce new tags gradually throughout the course. For now, just understand the pattern: opening tag, content, closing tag.

Basic Document Structure

Every HTML page follows the same basic structure — a kind of skeleton that tells the browser what it is working with. Let us walk through each part:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello!</h1>
  <p>Welcome to my page.</p>
</body>
</html>

Here is what each part does:

<!DOCTYPE html> — This is a declaration (not a tag) that tells the browser, "This document is written in modern HTML5." You put it at the very top of every HTML file. Think of it as a label on the outside of a package that says what is inside.
<html lang="en"> — This is the root element that wraps everything on the page. The lang="en" attribute tells the browser the page is written in English, which helps screen readers and search engines.
<head> — The head section contains information about the page that the user does not see directly. Things like the page title, links to stylesheets, and metadata go here. Think of it as the backstage area of a theater.
<title> — This sets the text that appears in the browser tab. Try changing it in the example above and notice how it would affect what you see at the top of your browser.
<body> — This is where all the visible content goes — everything the user actually sees on the page. Headings, paragraphs, images, links, and all other content live inside the body. This is the stage where the performance happens.

Note Every HTML page you create throughout this course (and in your future career!) will start with this same basic skeleton. It is worth getting comfortable with it now. Before long, typing it out will feel as natural as writing your name.

Your First "Hello World" Page

Now it is your turn! A "Hello World" page is a time-honored tradition in programming — it is the simplest possible program or page you can create, and it proves that everything is working. Every developer started here, and now so do you.

Use the interactive editor below to build a complete HTML page. We have given you a starting point. Try the following:

Change the text inside the <title> tag to something personal, like your name.
Change the heading text inside the <h1> tag.
Edit the paragraph text inside the <p> tag to say anything you like.
Try adding a second paragraph below the first one using another <p> tag.
Click Run to see your page come to life!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello World</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my very first web page. I built this!</p>
</body>
</html>

Tip Do not be afraid to experiment! You cannot break anything here. Try changing the text, adding new lines, or even deleting parts to see what happens. Experimenting is one of the best ways to learn. If something goes wrong, you can always reload the page to start fresh.

Congratulations — you just built your first web page! That block of code you see above is real, valid HTML. Every website on the internet started from something just like this. Take a moment to appreciate what you just did. You told a computer exactly how to display content, and it listened. That is what coding is all about.

Knowledge Check

Let us see how much you picked up from this lesson. Do not worry — these are just for practice, and you can try as many times as you like.

1. What does HTML stand for?

Hyper Transfer Markup Language HyperText Markup Language High-Tech Modern Language Home Tool Markup Language

Correct! HTML stands for HyperText Markup Language. "HyperText" refers to text that links to other text, and "Markup Language" means it uses tags to describe the structure of content.

2. Which tag is used to define the visible content of a web page?

<head> <title> <body> <html>

That is right! The <body> tag contains everything the user can see on the page — headings, paragraphs, images, links, and more. The <head> tag holds behind-the-scenes information that is not displayed directly.

3. What is the correct way to close an HTML paragraph tag?

<p/> </p> <p end> <close p>

Exactly! Closing tags use a forward slash before the tag name: </p>. This tells the browser where the element ends. Remember the pattern: <tag> to open, </tag> to close.

Lesson Summary

Great work making it through your first lesson! Here is a quick recap of what you learned:

HTML (HyperText Markup Language) is the standard language for creating web pages. It defines the structure and content of every page on the internet.
A web page is simply a text file with HTML instructions that a browser reads and displays.
HTML uses tags that come in pairs (opening and closing) to wrap around content and create elements.
Every HTML page has the same basic skeleton: a DOCTYPE declaration, an <html> root element, a <head> for metadata, and a <body> for visible content.
You built your very first Hello World web page — and that is a real accomplishment!

In the next lesson, we will dive deeper into the most common HTML elements — headings, paragraphs, links, images, and lists — so you can start building pages with richer content. See you there!

Finished this lesson?

Next: HTML Elements →