HTML & CSS - Mastery / HTML Basics

HTML Tags and Elements

🧐 Tags and Elements

If you’re new to web development, these two words will pop up a lot. They might seem a little confusing at first, but once you understand them, everything starts to make sense.

❓So, What Exactly is a Tag?

A tag is basically a label that tells the browser what something is on your page. Think of it like a command that says, “Hey browser, this is a paragraph!” or “This is a heading!”

Tags are written in angle brackets like this:

- <p> ... </p>
- Most tags come in pairs:
- An opening tag: <p>
- A closing tag: </p>
- The only difference? The closing tag has a forward slash (/).

🌱 And What is an Element?

An element is the full thing: the opening tag, the content inside, and the closing tag.

Here’s an example:

Put all of that together and you have an h1 element. Easy, right?

🚫 Some Tags Don’t Need a Closing

Not all tags come in pairs. Some are what we call self-closing tags — they stand on their own and don’t wrap around any content.

A few common ones:

<img>, <br>, <hr>

These are used for things like images or line breaks. They end with a slash and a closing angle bracket (/>).

💡 Quick Recap

Term

What It Means

Tag

The label inside < >, like <p> or <h1>

Opening Tag

Starts the element — e.g., <p>

Closing Tag

Ends the element — e.g., </p>

Element

Full structure: tag + content + tag

Self-closing

Doesn’t need a closing tag — like <img />

🧠 Tip

When you look at a web page, everything you see — the text, the images, the headings — is made up of these tags and elements. Once you get comfortable with them, the rest of HTML becomes much easier.