HTML Tags

You just set up your editor. You have a place to write code. Now it is time to actually use it.

In this lesson you are going to learn about HTML tags. Tags are the most important concept in HTML. Everything else you learn in this course builds on top of this one idea. So let us take it slow and make sure it really clicks.

What Are HTML Tags

You have opened plenty of websites. Think about the last time you looked someone up online. You typed a name, clicked a result, and a whole page loaded in front of you.

You saw something like this:

• A 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 Nadia. Just plain text, no tags at all. Type this into your editor and see what happens:

The words are there on the screen. Good. 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 a real webpage.

The browser is not being difficult. It genuinely does not know what any of this is. Is Nadia a heading? Is it just a name? Is the next line a paragraph or more text? It has no idea. To the browser it is all just one blob of text.

That is exactly what HTML tags fix.

How to Write an HTML Tag

Tags are written inside angle brackets like this:

< >

Most tags come in pairs. An opening tag and a closing tag. The only difference between them is a forward slash in the closing one.

Here is the paragraph tag:

<p>Your text goes here</p>

The opening tag <p> tells the browser this is where the paragraph starts. The closing tag </p> tells it where the paragraph ends. Everything in between is the paragraph.

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.

Now let us wrap Nadia's text in paragraph tags and see what the browser does with it:

The two paragraphs now sit clearly underneath each other. Separated. Easy to read. Just like paragraphs in a book or an article. Each one feels complete on its own.

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 is the most important heading on the page.

<h1>Your heading here</h1>

Let us add it to Nadia's page:

Now it actually looks like a heading. Big, bold, impossible to miss. 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.

That is the power of tags. You label something and the browser handles the rest.

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.

If you look at a Wikipedia page you will notice a thin horizontal line right below the main title. It separates the heading from the content below. To add that line to your page you use the <hr> tag:

<hr>

Just that. One tag. No closing tag needed. Let us add it to Nadia's page:

The line appears right below the heading exactly where it should be.

The reason <hr> does not need a closing tag is simple. A paragraph has a start and an end because text goes inside it. But a horizontal line is just a line. There is nothing inside it. It appears and that is it.

Putting It All Together

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

Try editing it yourself. Put your own name in the <h1>. Write a few sentences about yourself in the paragraphs. The more you type these tags the more natural they feel. That is how it sticks.

You now know how HTML tags work. You can write a heading. You can write paragraphs. You can add a dividing line.

In the next lesson we go deeper into headings. You will learn how to add sections and subsections to Nadia's page, just like the ones you see on a real Wikipedia article.

Next — HTML Headings