HTML Basics

HTML Tags

⏱ 4 min read📖 Beginner

HTML tags are how you talk to the browser. You write them, the browser reads them, and it builds the page exactly the way you described.

You have opened plenty of websites up to now. Think about the last time you were curious about something. Maybe you wanted to know about Scarlett Johansson. You typed her name into Google, clicked the Wikipedia page, and a whole page loaded in front of you.

You saw something like this on that page:

Her name in big bold letters at the very top
A short description right below it
Sections with titles like "Early Life" and "Career"
Paragraphs of text inside each section
A photo sitting neatly on the side

Everything was in its place. Easy to scan. Easy to read.

Every single thing you saw on that page was there because of HTML tags. The big bold name at the top was there because of a tag. The paragraphs were there because of tags. The sections, the spacing, the structure of the whole page — all of it came from tags.

Without them the browser has no idea what to do. Let us prove that right now.

What Happens Without Tags

Say we want to write something about a fictional character called Nadia. Just plain text, no tags:

The words are there on the screen. That means it is working. But take a closer look:

Everything is squished into one block
"Nadia" does not look like a title
The sentences sit right next to each other with no breathing room
It looks nothing like the Scarlett Johansson Wikipedia page

It works, but it does not look right. It does not feel like a proper page at all.

The browser does not know Nadia is a heading. It does not know the next lines are paragraphs. To the browser it is all just text. And that is exactly why we need HTML tags.

Writing Your First Tag

Tags are written inside angle brackets like this:

< >

If we want something to be a paragraph we use the paragraph tag. The paragraph tag is simply the letter p inside angle brackets:

<p>Your paragraph text here</p>

Notice there are two parts:

The opening tag <p> — this is where the paragraph starts
The closing tag </p> — this is where the paragraph ends
The only difference is the forward slash in the closing tag

When the browser reads this it understands that everything between <p> and </p> is one paragraph. That is how it knows where it starts and where it ends.

Let us wrap our text in <p> tags:

💡

Click Try It Yourself to open the editor and experiment with the code.

The two paragraphs appear underneath each other. Clearly separated and easy to read, just like paragraphs in a book or an article. Each one feels complete on its own.

The paragraphs look great now. But "Nadia" at the top is still just plain text. It does not stand out the way a title should. Let us fix that.

Making a Heading

For the main heading we use the <h1> tag. h1 means heading 1. The number 1 is there because it represents the most important heading on the page:

<h1>Write Your Heading</h1>

Let us add <h1> to Nadia:

It actually looks like a heading now. It is bigger, it is clear, and it naturally stands out from the paragraphs below it. Everything feels more organized. The main heading at the top, the content underneath it, just the way we expect a page to look.

Tags That Do Not Need Closing

Every tag you have written so far comes in pairs. One to open, one to close. That makes sense because <h1> and <p> wrap around content. The browser needs to know where that content begins and where it ends.

But some tags do not wrap around anything at all. You have probably seen this on Wikipedia pages. Right below the main title there is a thin horizontal line separating it from the content below. To add that to your page use the <hr> tag:

<hr>

Let us add it to our page:

<h1>Nadia</h1>
<hr>
<p>Nadia is a software developer and coding teacher.</p>
<p>She has been building websites for over ten years.</p>

Here is why <hr> does not need a closing tag:

For a paragraph you tell the browser "from here to here, this is one paragraph"
For a heading, same thing
But a line is always just a line
It simply appears across the page
There is nothing inside it and nothing to mark the start or end of

💡

Tags like <hr> are called self-closing tags or empty tags. You will come across a few more of them as you keep going.

Putting It All Together

Here is the complete Nadia page with everything from this lesson:

Try editing it on your own. Put your name in the <h1> instead of Nadia. Write a few paragraphs about yourself. Get used to the structure. The more you write it the more natural it feels.

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.