Skip to content

What is a Tag?

You have already seen a few tags — <h1>, <p>, <button>. Now let's properly understand what a tag is and how it works. This is the foundation of everything in HTML.

The anatomy of a tag

Most HTML tags come in pairs — an opening tag and a closing tag. The content goes in between.

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

Breaking it down:

  • <p> — the opening tag. The p is the tag name, wrapped in angle brackets < >
  • This is a paragraph. — the content
  • </p> — the closing tag. Same as the opening, but with a / before the name

That / is how the browser knows the tag is closing and not opening.

Tags tell the browser what something IS

You are not telling the browser how to draw things. You are telling it what things are. The browser already knows how to draw them.

<h1>I am a big heading</h1>
<p>I am a paragraph.</p>
<button>I am a button</button>

Three different tags — three completely different things on screen.

Tags can go inside other tags

This is called nesting. It is how you add meaning to parts of your content.

<p>I already know <strong>Python</strong>.</p>

Here <strong> sits inside <p>. The word "Python" will appear bold because <strong> means "this matters". The paragraph tag wraps the whole sentence.

One rule: always close the inner tag before you close the outer one.

✅ Correct: 

<p>I know <strong>Python</strong> already.</p>

❌ Wrong: 

<p>I know <strong>Python</p></strong>

Self-closing tags

Some tags have no content — they just do something on their own. These do not need a closing tag.

<br>
<hr>
  • <br> — a line break (like pressing Enter in the middle of a paragraph)
  • <hr> — a horizontal line across the page

They stand alone. No closing tag. No content.

Try it in VSCode

Open your first.html file and add this:

<p>I already know <strong>Python</strong>. Now I am learning <em>HTML</em>.</p>
<hr>

Save (Ctrl + S), go to your browser, refresh (F5). You should see bold and italic text, with a line underneath.

  • <strong> = bold
  • <em> = italic (em stands for emphasis)

Challenge

In your first.html, write a sentence that uses both <strong> and <em> in it. Something like:

The <strong>frontend</strong> is what you see. The <em>backend</em> is what thinks.

Save and refresh. What do they look like in the browser?

← Where Python Fits In    Next: Headings and Paragraphs →