DEV Community

Cover image for Understanding HTML Tags and Elements
Mohd Asif Ansari
Mohd Asif Ansari

Posted on

Understanding HTML Tags and Elements

#webdev #beginners #tutorial #html

If you're starting web development, HTML is the first thing you'll learn. But what exactly are tags and elements? Let's break it down simply.

What is HTML?

HTML (HyperText Markup Language) is the skeleton of every webpage.

Think of it like:

  • HTML = Structure (skeleton)
  • CSS = Styling (skin, clothes)
  • JavaScript = Behavior (movement, actions)

Example:
Without HTML, there's no webpage. Without CSS, it looks plain. Without JavaScript, it's static.

HTML gives structure: headings, paragraphs, links, images, buttons.

What is an HTML Tag?

A tag is a marker that tells the browser "this is a heading" or "this is a paragraph."

Simple analogy: Tags are like labels on boxes. They tell you what's inside.

Syntax:

<tagname>
Enter fullscreen mode Exit fullscreen mode

Tags usually come in pairs: opening and closing.

Opening Tag, Closing Tag, and Content

Most tags have three parts:

<p>This is a paragraph</p>
Enter fullscreen mode Exit fullscreen mode

Breaking it down:

  • <p> = Opening tag (starts the paragraph)
  • This is a paragraph = Content (what's inside)
  • </p> = Closing tag (ends the paragraph)

Another example:

<h1>Welcome to My Website</h1>
Enter fullscreen mode Exit fullscreen mode
  • <h1> = Opening tag
  • Welcome to My Website = Content
  • </h1> = Closing tag

What is an HTML Element?

An element is the whole thing: opening tag + content + closing tag.

<p>Hello World</p>
Enter fullscreen mode Exit fullscreen mode

This entire thing is an element.

Tag vs Element:

  • Tag: <p> or </p> (just the marker)
  • Element: <p>Hello World</p> (the complete package)

Simple way to remember:

  • Tag = The label
  • Element = Label + Content

Common HTML Tags

Let's look at some basic tags you'll use all the time.

Headings 

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
Enter fullscreen mode Exit fullscreen mode
  • h1 is the biggest, h6 is the smallest
  • Use h1 for page title, h2 for sections

Paragraph 

<p>This is a paragraph of text.</p>
Enter fullscreen mode Exit fullscreen mode
  • For regular text content

Links 

<a href="https://google.com">Click here</a>
Enter fullscreen mode Exit fullscreen mode
  • href tells where the link goes
  • Text between tags is what you click

Images 

<img src="photo.jpg" alt="A photo">
Enter fullscreen mode Exit fullscreen mode
  • src is the image file
  • alt describes the image

Div (Container) 

<div>
  <h1>Title</h1>
  <p>Some text</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Groups content together
  • Used for layout and styling

Span (Inline Container) 

<p>This is <span>highlighted</span> text</p>
Enter fullscreen mode Exit fullscreen mode
  • For styling small parts of text
  • Doesn't break the line

Self-Closing (Void) Elements

Some elements don't have content, so they don't need a closing tag.

Examples:

<img src="photo.jpg" alt="Photo">
<br>
<hr>
<input type="text">
Enter fullscreen mode Exit fullscreen mode

Why no closing tag?
These elements don't contain text or other elements. They're complete on their own.

Common self-closing tags:

  • <img> - Images
  • <br> - Line break
  • <hr> - Horizontal line
  • <input> - Form inputs
  • <meta> - Metadata
  • <link> - External resources

Note: You might see <img /> or <br /> - the / is optional in HTML5.

Block-Level vs Inline Elements

This is important for understanding how elements behave on the page.

Block-Level Elements

Take up the full width available and start on a new line.

Example:

<div>First block</div>
<div>Second block</div>
<p>Third block</p>
Enter fullscreen mode Exit fullscreen mode

Result:

┌─────────────────────┐
│ First block         │
└─────────────────────┘
┌─────────────────────┐
│ Second block        │
└─────────────────────┘
┌─────────────────────┐
│ Third block         │
└─────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Each one takes the full width and stacks vertically.

Common block elements:

  • <div>, <p>, <h1>-<h6>, <ul>, <li>, <section>

Inline Elements

Only take up as much width as needed and don't start a new line.

Example:

<p>This is <span>inline</span> and <strong>also inline</strong> text.</p>
Enter fullscreen mode Exit fullscreen mode

Result:

This is inline and also inline text.
Enter fullscreen mode Exit fullscreen mode

Everything stays on the same line.

Common inline elements:

  • <span>, <a>, <strong>, <em>, <img>

Visual Comparison

Block elements (stack vertically):

<div>Box 1</div>
<div>Box 2</div>
Enter fullscreen mode Exit fullscreen mode 
┌────────┐
│ Box 1  │
└────────┘
┌────────┐
│ Box 2  │
└────────┘
Enter fullscreen mode Exit fullscreen mode

Inline elements (flow horizontally):

<span>One</span><span>Two</span><span>Three</span>
Enter fullscreen mode Exit fullscreen mode 
OneTwoThree
Enter fullscreen mode Exit fullscreen mode

Practical Example

Let's build a simple webpage:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage. I'm learning HTML!</p>

    <p>I'm a <strong>student</strong> learning web development.</p>

    <a href="https://google.com">Visit Google</a>

    <hr>

    <img src="photo.jpg" alt="My photo">
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Breaking it down:

  • <html> - Root element (contains everything)
  • <head> - Metadata (not visible on page)
  • <title> - Page title (shows in browser tab)
  • <body> - Visible content
  • <h1>, <h2> - Headings
  • <p> - Paragraphs
  • <strong> - Bold text (inline)
  • <a> - Link
  • <hr> - Horizontal line (self-closing)
  • <img> - Image (self-closing)

Tag vs Element - Final Clarity

Tag:

<p>  or  </p>
Enter fullscreen mode Exit fullscreen mode

Just the markers with angle brackets.

Element:

<p>This is a paragraph</p>
Enter fullscreen mode Exit fullscreen mode

The complete thing: opening tag + content + closing tag.

Think of it like:

  • Tag = Quotation marks (" ")
  • Element = The entire quoted sentence

Try This Yourself

Open any webpage, right-click, and select "Inspect" (or press F12).

You'll see the HTML structure. Look for:

  • Opening and closing tags
  • Block vs inline elements
  • Self-closing tags
  • Nested elements (elements inside elements)

This is the best way to learn!

Common Beginner Mistakes

1. Forgetting closing tags

<!-- Wrong -->
<p>Text

<!-- Right -->
<p>Text</p>
Enter fullscreen mode Exit fullscreen mode

2. Incorrect nesting

<!-- Wrong -->
<p><strong>Text</p></strong>

<!-- Right -->
<p><strong>Text</strong></p>
Enter fullscreen mode Exit fullscreen mode

3. Using block elements inside inline elements

<!-- Wrong -->
<span><div>Content</div></span>

<!-- Right -->
<div><span>Content</span></div>
Enter fullscreen mode Exit fullscreen mode

Quick Reference

Block Elements (stack vertically):

<div>, <p>, <h1>-<h6>, <ul>, <li>, <section>
Enter fullscreen mode Exit fullscreen mode

Inline Elements (flow horizontally):

<span>, <a>, <strong>, <em>, <img>
Enter fullscreen mode Exit fullscreen mode

Self-Closing:

<img>, <br>, <hr>, <input>, <meta>, <link>
Enter fullscreen mode Exit fullscreen mode

Most Used Tags:

  • Headings: <h1> to <h6>
  • Paragraph: <p>
  • Link: <a>
  • Image: <img>
  • Container: <div>
  • Inline text: <span>
  • Bold: <strong>
  • Italic: <em>

Summary

HTML = Structure of webpages

Tag = Marker like <p> or </p>

Element = Complete package: <p>Content</p>

Block elements = Stack vertically, take full width

Inline elements = Flow horizontally, take only needed width

Self-closing = No content, no closing tag needed

Start with these basics, and you'll understand 90% of HTML. The rest is just learning more tags for specific purposes.

Top comments (0)