Skip to main content

Command Palette

Search for a command to run...

HTML Explained: The Basic Building Blocks of a Webpage

Published
2 min read
K

I write technical articles for developers who already know the basics but want clarity. No hand-holding, no fluff — just structured explanations for people revisiting concepts or fixing confusion.

When you open a website, the first thing you’re actually seeing is HTML.

Think of HTML as the skeleton of a webpage.
It decides what exists on the page — not how it looks.


What HTML is and why we use it

HTML (HyperText Markup Language) is used to structure web content.

It tells the browser:

  • this is a heading

  • this is a paragraph

  • this is a button

  • this is an image

Without HTML, there’s nothing to style or interact with.


What is an HTML tag

An HTML tag is a keyword wrapped in angle brackets.

Example:

<p>

Tags tell the browser what kind of content something is.


Opening tag, closing tag, and content

Most tags come in pairs.

Example:

<p>Hello world</p>
  • <p> → opening tag

  • </p> → closing tag

  • Hello world → content

Together, they form something meaningful.


What an HTML element means

An HTML element includes:

  • opening tag

  • content

  • closing tag

So, a tag is just part of it.
The full thing is called an element.

This difference confuses beginners a lot, and that’s normal.


Self-closing (void) elements

Some elements don’t need closing tags.

Examples:

<img />
<br />
<input />

These are called void elements because they don’t wrap content.


Block-level vs inline elements

HTML elements behave differently.

Block-level elements

  • take full width

  • start on a new line

Examples: div, p, h1

Inline elements

  • take only needed space

  • stay in the same line

Examples: span, a, strong


Commonly used HTML tags

Some very common ones:

  • h1 to h6 → headings

  • p → paragraph

  • div → container

  • span → inline container

  • a → links

  • img → images

  • button → buttons

These cover most basic layouts.


One simple tip

Right-click any webpage → Inspect.

You’ll see real HTML in action.
That’s the fastest way to understand how things are built.


Final thought

HTML is simple on purpose.

You don’t need to memorize everything — just understand how tags and elements fit together. Everything else builds on top of this.

More from this blog

rishabh-aka-blue

12 posts

Articles are written for developers who already have some exposure to the topic but want:

A structured explanation Clear mental models Practical clarity over surface-level tutorials