DEV Community

Cover image for Understanding HTML Tags and Elements
Souvik Guha Roy
Souvik Guha Roy

Posted on

Understanding HTML Tags and Elements

#webdev #programming #html #development

Absolutely—this is a great foundation already. I’ll polish it, expand the explanations, fix flow and clarity, and make it feel more human, friendly, and blog-ready, while keeping it beginner-friendly and detailed.
Here’s an improved and refined version 👇

What Is HTML? A Beginner-Friendly Guide to the Building Blocks of the Web

Have you ever stopped to think about how a house is built?

Before a single brick is laid, an architect creates a blueprint. That blueprint shows where the rooms go, how big the house will be, and how everything is structured. Once the blueprint is ready, builders use it to bring the house to life.

A website works in a very similar way.

HTML acts as the blueprint of a website. It defines the structure and layout—what goes where—so the browser knows how to display the content.

In this blog, we’ll cover:

  • What HTML is and why we use it
  • What HTML tags are
  • Opening tags, closing tags, and content
  • What an HTML element is
  • Self-closing (void) elements
  • Block-level vs inline elements
  • Commonly used HTML tags

Let’s get started 🚀

What Is HTML?

HTML stands for HyperText Markup Language.
To really understand it, let’s break it down word by word.

1. Hypertext

Hypertext is text that contains links to other text or pages.

Normal text:

Visit our website
Enter fullscreen mode Exit fullscreen mode

Hypertext:

<a href="https://example.com">Visit our website</a>
Enter fullscreen mode Exit fullscreen mode

Here, clicking the text takes you to another page. That’s hypertext in action.

2. Markup

Markup means adding special tags or symbols to text to define its structure and meaning.

Without markup:

This is a heading
Enter fullscreen mode Exit fullscreen mode

With markup:

<h1>This is a heading</h1>
Enter fullscreen mode Exit fullscreen mode

The browser understands that this text should be displayed as a heading because of the <h1> tag.

3. Language

HTML is called a language because it follows a set of rules that computers and browsers understand.
It tells the browser how to display content, not how it should look visually.

HTML and the Human Body Analogy

HTML is often referred to as the skeleton of a web page.

But just like a skeleton isn’t enough to make a human, HTML alone isn’t enough to make a complete website.

A website needs:

  • HTML → Skeleton (structure)
  • CSS → Skin (design and appearance)
  • JavaScript → Brain (logic and functionality)

Each has its own role, and together they create a full, interactive website.

Why Do We Need HTML?

HTML is essential because:

  • It creates and structures web pages
  • It tells the browser what each piece of content is
  • Without HTML, a browser wouldn’t know what is a heading, a paragraph, an image, or a link

Simply put, HTML gives meaning to content.

HTML Tags

A website is made up of different types of content, such as:

  • Headings
  • Paragraphs
  • Images
  • Links

To control how these appear, HTML uses tags.

Anything written inside angle brackets < > is called an HTML tag.

Examples of HTML tags: 

<p>   <!-- Paragraph tag -->
<img> <!-- Image tag -->
<a>   <!-- Anchor (link) tag -->
Enter fullscreen mode Exit fullscreen mode

Tags tell the browser what kind of content it is dealing with.

HTML Elements

An HTML element usually consists of:

  1. An opening tag
  2. The content
  3. A closing tag

Example:

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

Here:

  • <p> is the opening tag
  • This is a paragraph is the content
  • </p> is the closing tag

Self-Closing (Void) Elements

Some elements don’t have content, so they don’t need a closing tag. These are called self-closing or void elements.

Examples:

<img>
<br>
<hr>
Enter fullscreen mode Exit fullscreen mode

These elements perform a task (like displaying an image or adding a line break) without wrapping content.

Block-Level vs Inline Elements

HTML elements are generally divided into two categories: block-level and inline elements.

Block-Level Elements

Block-level elements:

  • Take up the full width of the page
  • Always start on a new line

Think of them like students who need a separate room to study. When they enter, everyone else moves to a new space.

Examples of block-level elements:

<div>
<p>
<h1> to <h6>
<section>
<article>
<header>
<footer>
<nav>
<main>
<ul>  <!-- unordered list -->
<ol>  <!-- ordered list -->
<li>  <!-- list item -->
<form>
<table>
<blockquote>
<hr>
Enter fullscreen mode Exit fullscreen mode

These elements are commonly used to structure the layout of a webpage.

Inline Elements

Inline elements:

  • Take up only as much width as needed
  • Stay on the same line as other elements
  • Are usually used inside block-level elements

Example:

<p>This <strong>paragraph</strong> is good.</p>
Enter fullscreen mode Exit fullscreen mode

Here, <strong> doesn’t break the line—it just styles part of the text.

Common inline elements include:

<span>
<a>
<strong>
<em>
<b>
<i>
<u>
<small>
<mark>
<label>
<sup>
<sub>
Enter fullscreen mode Exit fullscreen mode

Commonly Used HTML Tags

Let’s look at some important and frequently used HTML tags.

Text & Content

  • <h1> to <h6> → Headings (from largest to smallest)
  • <p> → Paragraph
  • <br> → Line break
  • <hr> → Horizontal line

Links & Media

  • <a> → Adds a hyperlink
  • <img> → Displays an image
  • <video> → Adds video content
  • <audio> → Adds audio content

Lists

  • <ul> → Unordered list
  • <ol> → Ordered list
  • <li> → List item

Layout & Sections

  • <div> → Block-level container
  • <span> → Inline container
  • <header> → Top section of a page
  • <footer> → Bottom section of a page

Final Thoughts

HTML might seem overwhelming at first—and that’s completely normal.
Every web developer started exactly where you are now.

The key is practice. The more you write HTML, the more natural it becomes. Over time, these tags and concepts will start to make sense automatically.

Take it step by step, experiment, and enjoy the learning process 💻✨

Top comments (0)