Understanding HTML Tags and Elements

I used to think websites were just images and colors, but it turns out there is this thing called HTML. It's like the skeleton of a person and it's not pretty, but without it, the whole body would just be a pile of skin on the floor.

Here is what I learned about how it actually works…

1. What is HTML?

HTML stands for HyperText Markup Language. We don't use it to "program" (like math), we use it to "mark up" our text so the browser knows what is a heading, what is a paragraph, and what is a link. It is the raw structure of every site we visit.

2. Tags vs. Elements (The Confusion)

I used to use these words for the same thing, but there is a small difference:

* The Tag: This is just the code part, like <p> (opening) or </p> (closing).

* The Element: This is the whole package. It's the opening tag + the content inside + the closing tag.

3. Self-Closing (Void) Elements

Most tags need a closing tag so the browser knows when to stop. But some tags are loners. They don't have any content inside, so they close themselves.

* Example: <img> for pictures or <br> for a line break. We don't need a </img> because there's nothing to put inside it!

4. Block-level vs. Inline

This is where we usually get stuck…

* Block-level: These guys are "greedy." They take up the whole width of the page. If we put two <div> tags, they will stack on top of each other.

* Inline: These are "friendly." They only take up as much space as they need. If we use a <span>, another element can sit right next to it on the same line.

5. Commonly Used Tags

Here are the ones we see everywhere:

* <h1> to <h6>: Headings (1 is the biggest).

* <p>: For regular paragraphs.

* <a>: For links (the "a" stands for anchor).

* <ul> and <li>: For making bullet point lists.

My suggestion to understand this would be Try it yourself

If we want to see this in real life, we can just right-click any website and click Inspect. It shows us the skeleton of the site.