Understanding HTML Tags and Elements

If you’ve ever looked at a beautifully designed website and wondered what lies beneath the surface, the answer is HTML (Hyper Text Markup Language).

Think of a webpage like a human body. CSS is the skin, hair and stylish clothes; JavaScript is the nervous system that makes things move but HTML is the skeleton. It provides structure that holds everything together. Without it, the browser wouldn’t know if a piece of text is a major headline or just a tiny footnote.

What is an HTML Tag?

An HTML tag is like a set of instructions. It tells the browser, "Hey, treat the text inside these brackets in a specific way"

To make it simple, think of tags as labeled boxes. If you put a sandwich in a box labeled "Lunch," people know what's inside. In HTML, if you put text inside a tag labeled <h1>, the browser knows it’s a primary heading.

The Anatomy: Opening, Closing, and Content

Most HTML tags come in pairs to wrap around the content they are describing. Here is the breakdown:

Opening Tag: This starts the instruction. It looks like this: <p>.
Content: The actual text or media you want to show (e.g., "Hello World!").
Closing Tag: This tells the browser the instruction is over. It looks just like the opening tag but has a forward slash: </p>.

Example: <h1>This is a heading</h1>

Tag vs. Element: What’s the Difference?

These terms are often used interchangeably, but there is a subtle distinction that will make you sound like a pro:

The Tag is just the individual piece of code (the <p> or the </p>).
The Element is the entire package—from the opening tag all the way to the closing tag, including the content inside.

Analogy: If a "tag" is a bread slice, the "element" is the whole sandwich

The Outliers: Self-Closing (Void) Elements

Not every element needs a closing tag. Some are "loners" because they don't wrap around content; they just insert something into the page. These are called void elements.

<img>: Inserts an image
<br>: Forces a line break
<input>: Creates a text field for users

Since there’s no text to wrap, you don't need a </img>. It does the job all by itself.

Block-Level vs. Inline Elements

The way elements sit on a page usually falls into two categories:

Block-level elements: These are the "space hogs." They always start on a new line and take up the full width available (like a brick in a wall).
- Examples: <div>, <h1>, <p>.
Inline elements: These are the "sharers" They only take up as much width as necessary and allow other elements to sit next to them (like words in a sentence).
- Examples: <span>, <a> (links), <strong>

Commonly Used HTML Tags

You can build a surprisingly good website using just a handful of tags:

Tag	Name	What it does
`<h1>` to `<h6>`	Headings	Creates titles (h1 is the biggest)
`<p>`	Paragraph	Groups sentences into a block of text
`<a>`	Anchor	Creates a hyperlink to another page
`<div>`	Division	A container used to group other elements
`<ul>` / `<li>`	Lists	Creates bulleted lists
`<img>`	Image	Displays a picture

Pro Tip: Go "Under the Hood"

The best way to learn HTML is to see it in the wild. Next time you’re on a website you like, right-click anywhere and select "Inspect" (or press F12).

A window will pop up showing the raw HTML of that page. You can hover over the code to see which tags correspond to which parts of the site. Don't worry you can't "break" the website by doing this; you're just looking at a local copy!

Command Palette