Understanding HTML Tags and Elements

What Is HTML and Why Do We Use It?

Imagine you're building a house. Before you paint the walls or add furniture, you need a skeleton—a frame that gives the house its structure. HTML (HyperText Markup Language) is the skeleton of every webpage you visit.

HTML tells the browser what content to display and how to organize it. It doesn't make things pretty (that's CSS's job) or interactive (that's JavaScript's job), but without HTML, there would be nothing on the screen at all.

When you visit a website and see headings, paragraphs, images, and links, you're looking at HTML in action.

What Is an HTML Tag?

An HTML tag is like a label you put on content to tell the browser what that content is.

Think of tags as instructions wrapped in angle brackets. If you wanted to tell the browser "this text is a paragraph," you'd wrap it in paragraph tags.

Tags almost always come in pairs: an opening tag and a closing tag. Together with the content between them, they create structure and meaning.

Basic structure:

html

<tagname>Content goes here</tagname>

The opening tag <tagname> says "start treating this content as a tagname," and the closing tag </tagname> (notice the forward slash) says "stop."

Opening Tag, Closing Tag, and Content

Let's break down a real example:

html

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

• Opening tag: <p> — tells the browser "a paragraph is starting"

• Content: This is a paragraph of text. — the actual information

• Closing tag: </p> — tells the browser "the paragraph is ending"

Here's another example with a heading:

html

<h1>Welcome to My Website</h1>

• Opening tag: <h1> — marks the start of a top-level heading

• Content: Welcome to My Website — the heading text

• Closing tag: </h1> — marks the end of the heading

The browser reads these tags and knows exactly how to display the content. A paragraph looks different from a heading because the tags tell the browser what each piece of content represents.

What Is an HTML Element?

Here's where people often get confused: a tag is not the same as an element.

An element is the whole package: the opening tag, the content, and the closing tag combined.

html

<h1>Welcome to My Website</h1>

This entire thing is called an h1 element, even though it contains h1 tags.

Think of it this way:

• Tag: The label itself (<h1> or </h1>)

• Element: The complete piece (<h1>Welcome to My Website</h1>)

When developers say "add a paragraph element to the page," they mean add the opening tag, some content, and the closing tag—the complete package.

Self-Closing (Void) Elements

Not all elements need closing tags. Some elements don't contain any content, so they're written as a single tag. These are called self-closing elements or void elements.

Common self-closing elements:

html

<img src="photo.jpg" alt="A beautiful sunset">
<br>
<hr>
<input type="text">

• <img> displays an image—it doesn't wrap around text content

• <br> creates a line break—there's nothing to "contain"

• <hr> creates a horizontal line—just a visual separator

• <input> creates a form field—the field itself is the element

Notice there's no </img> or </br>. These elements are complete as they are.

Some people write self-closing tags with a slash at the end like <img /> or <br />, which is valid but not required in HTML5.

Block-Level vs Inline Elements

HTML elements fall into two main categories based on how they behave on the page.

Block-Level Elements

Block-level elements take up the full width available and always start on a new line. They're like stacking boxes—each one sits on top of the other.

Common block-level elements:

html

<div>This is a container</div>
<p>This is a paragraph</p>
<h1>This is a heading</h1>
<ul>
  <li>List item</li>
</ul>

If you had three paragraphs in a row, they'd stack vertically:

html

<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>

Result: Each paragraph appears on its own line, stacked on top of each other.

Inline Elements

Inline elements only take up as much width as they need and don't start a new line. They flow within text like words in a sentence.

Common inline elements:

html

<span>This is a span</span>
<a href="page.html">This is a link</a>
<strong>This is bold text</strong>
<em>This is italic text</em>

Here's how inline elements work within a paragraph:

html

<p>This is a <strong>very important</strong> message with a <a href="info.html">link</a>.</p>

Result: The strong text and link appear within the same line as the rest of the paragraph, not on separate lines.

Quick comparison:

• Block elements: Think of them as boxes stacked vertically

• Inline elements: Think of them as words flowing horizontally in a sentence

Commonly Used HTML Tags

Here are the tags you'll use most often when building webpages.

Headings

html

<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Smaller Heading</h4>
<h5>Even Smaller</h5>
<h6>Smallest Heading</h6>

Headings go from h1 (most important) to h6 (least important). Use h1 for your main page title, then h2 for major sections, h3 for subsections, and so on.

Text Content

html

<p>A paragraph of text.</p>
<span>A piece of inline text.</span>
<strong>Bold/important text</strong>
<em>Italic/emphasized text</em>

Containers

html

<div>A generic block container</div>
<span>A generic inline container</span>

These are like blank boxes you can put other content inside. They're useful for grouping elements together.

Links and Images

html

<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="Description of image">

Lists

html

<ul>
  <li>Unordered list item (bullet point)</li>
  <li>Another item</li>
</ul>

<ol>
  <li>Ordered list item (numbered)</li>
  <li>Another numbered item</li>
</ol>

Line Breaks and Horizontal Rules

html

<br>
<hr>

<br> creates a line break, and <hr> creates a horizontal line across the page.

Buttons and Inputs

html

<button>Click me</button>
<input type="text" placeholder="Enter your name">

Putting It All Together

Here's a simple HTML example using several elements:

html

<h1>My Favorite Recipes</h1>

<p>Welcome to my collection of <strong>delicious recipes</strong>!</p>

<h2>Chocolate Chip Cookies</h2>

<p>These cookies are <em>amazing</em> and easy to make.</p>

<ul>
  <li>Flour</li>
  <li>Sugar</li>
  <li>Chocolate chips</li>
</ul>

<p>Visit my <a href="about.html">about page</a> to learn more.</p>

In this example:

• We have block-level elements (h1, h2, p, ul) that stack vertically

• We have inline elements (strong, em, a) that flow within the text

• Each element serves a specific purpose and gives meaning to the content

Inspect HTML in Your Browser

The best way to learn HTML is to see it in action. Every browser lets you inspect the HTML of any webpage.

Try this:

1. Visit any website

2. Right-click on any text or image

3. Select "Inspect" or "Inspect Element"

4. You'll see the HTML code for that page

You'll notice the opening tags, closing tags, and content, just like we discussed. Try clicking around different parts of the page—you'll see different HTML elements light up.

This is how professional developers learn and debug. Don't be afraid to explore!

Summary

HTML is the structure of webpages—the skeleton that holds everything together.

Tags are the labels written in angle brackets like <p> and </p> that tell the browser what content is.

Elements are the complete package: opening tag + content + closing tag (like <p>This is text</p>).

Self-closing elements like <img> and <br> don't need closing tags because they don't contain content.

Block-level elements (like <div>, <p>, <h1>) stack vertically and take full width.

Inline elements (like <span>, <a>, <strong>) flow horizontally within text.

Start simple, use the browser's inspect tool to explore real websites, and practice writing your own HTML. Before long, these tags will become second nature, and you'll be building the skeleton of your own webpages.