Understanding HTML Tags and Elements

HTML: The Skeleton of a Webpage

Do you know how a webpage is created? It surely involves a ton of steps and work, but the first and foremost thing is to give our webpage a structure.

Just as the human body has a skeleton holding its structure and core, similarly, HTML functions as the structure of a webpage.

When you open a webpage, what do you see , text, images, buttons, links. It might look complex. But underneath it all there is HTML.

---

What Is HTML?

HTML (HyperText Markup Language) is the standard language used to create webpages. Is it a programming language ? UHHH don’t go there it is a generation long debate.

But HTML is not a programming language. Instead, it is a markup language, which means it uses tags to describe and organize content.

In simple terms:

HTML tells the browser what content exists and how it is structured.

---

Why HTML Is Called the Skeleton

Now we have got a idea about , What is HTML? Let us look at what foundation HTML sets for the Webpage.

HTML defines:

• Headings

• Paragraphs

• Images

• Links

• Lists

• Sections of a page

Without HTML:

• There would be no structure

• Browsers wouldn’t know what text is a heading or a paragraph

• Content would be meaningless blocks of text

HTML answers questions like:

• “This is a heading”

• “This is a paragraph”

• “This is an image”

• “This is a navigation section”

In-short HTML gives semantic meaning to the Webpage structure so browsers , screen readers and search engines would understand without any confusion.

---

What is a HTML Tag?

Now we know that HTML is a markup language.

So HTML works by using tags to describe content. Any content you see,

• Text

• Image

• Links

on the webpage is encapsulated inside a tag.

A HTML tag tells the browser what a piece of content is and how it should be treated.

Without tags, a browser is unable to interpret the meaning of your content . We will see HTML tags in detail.

---

The Basic Structure of an HTML Tag

A typical HTML element has three parts:

• Starting —>Opening Tag

• Content

• Ending —>Ending Tag

For example

<p>Karan Aujla</p>

Let’s break this down:

This is a paragraph tag , symbolizing that the content Karan Aujla is a pragraph

• <p> → Opening tag

• Karan Aujla → Content

• </p> → Closing tag

Together, they form an HTML element.

---

Opening Tag

The opening tag:

• Marks where the element starts

• Contains the tag name inside angle brackets

Example:

<p>

This tells the browser:

“A paragraph starts here.”

---

Content

The content is the information inside the tags.

Example:

<p>This is a paragraph</p>

Here, “This is a paragraph” is the content the user sees.

---

Closing Tag

The closing tag:

• Marks where the element ends

• Looks like the opening tag, but with a /

Example:

</p>

This tells the browser:

“The heading ends here.”

Do you know why we need a closing tag?

IMPORTANT

Suppose the closing tag wasn't created, how would the browser know where the paragraph ends? The browser might interpret the list below the paragraph as part of the paragraph tag. This would create errors. So, closing tags are needed.

---

Box Analogy

Think of an HTML tag like a labeled box :

• The opening tag is the label that says what goes inside

• The content is what’s placed in the box

• The closing tag seals the box

Example:

<div>
I write code tshirt from Chaicode.
</div>

The browser knows exactly where the box starts and ends.

---

Do all tags need a closing? Aren't There Exceptions?

You guessed it right. Some tags don’t need closure , they are mentally strong. LOL!!

Some tags are self-closing and don’t wrap content .

For Example:

<img src="image.jpg">
<hr>
<br>

These tags:

• Don’t have content

• So they don’t need a closing tag

This tags are interpreted solely , such as

1. This is an image with the given path.

2. This is a horizontal divider line between two sections

3. This is symbolizes breaking the continuity of the paragraph.

But most HTML elements use opening + content + closing.

---

What an HTML element means?

Along-with tags there are HTML elements too which are often used together.

HTML Tag vs HTML Element

• An HTML tag is the syntax you write (<p>, </p>)

• An HTML element is the complete unit formed by the tags and the content inside them

In simple terms:

An HTML element is everything from the opening tag to the closing tag, including the content.

Tag are a part of HTML Element , not the other way around.

---

Structure of an HTML Element

Example:

<p>This is a paragraph.</p>
|                        |
--------------------------
            |
            |
        HTML ELEMENT

This entire line is one HTML element, made up of:

• Opening tag → <p>

• Content → This is a paragraph.

• Closing tag → </p>

Some of the HTML elements are :

• <h1> → Main heading

• <p> → Paragraph

• <a> → Link

• <img> → Image

Together, they define one meaningful piece of a webpage.

---

Nesting of Elements .

It is possible to insert one element inside other element . In-fact some elements are by default nested.

Example:

<div>
  <h2>Title</h2>
  <p>Description text</p>
</div>

This nesting has establishes a relationship between the two elements .

Here:

• <div> is a parent element

• <h2> and <p> are child elements

This nesting creates the structure of the page.

This unordered list is a default nested element .
<ul>
    <li></li>
    <li></li>
</ul>

---

HTML TAG vs HTML ELEMENT

---

Block-Level vs Inline Elements

In HTML, elements are categorized based on how they behave in the layout.

The two most common categories are block-level elements and inline elements. .

---

Block-Level and In-Line Elements

Block level elements

Block-level elements always start on a new line and stretch to fill the entire width of their parent container by default.

“/n“ is added by default in this type of elements

Key Features

• Start on a new line

• Take up full width

• Push content above and below them

• Used to define page structure and layout

• Can nest other block and inline elements

Common Examples

<div>, <p>, <h1>, <section>, <article>, <ul>

<h1>Heading</h1>

<div>
<p>This is a paragraph.</p>
<p>This paragraph appears below the first one.</p>
<div>

<section>
<h2>Contact details<h2>
<p>93233456</p>
</section>

<ul>
     <li>HTML</li>
     <li>CSS</li>
</ul>

Each element appears on its own line, stacked vertically.

---

Inline Elements

Inline elements do not start on a new line. They stay within the flow of text and take up only as much space as their content.

“/n“ is not added by default in this type of elements

Key Characteristics

• Do not start on a new line

• Width and height depend on content

• Used to style or link parts of text

• Cannot contain block-level elements

Common Examples

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

Example

<p>This is <strong>important</strong> and <em>emphasized</em> text.</p>

<span>This is a single line </span>

<img src="KaranAujla.jpg" alt="Karan Aujla">

<a href="https://www.w3schools.com">Visit W3Schools</a>

The inline elements appear within the sentence without breaking the line.

---

Visual Difference (Mental Model)

• Block-level elements → Think of them as stacked boxes

• Inline elements → Think of them as words inside a sentence

---

Mixing Block and Inline Elements

You can nest inline elements inside block elements:

<div>
  <p>This is a <span>highlighted</span> word.</p>
</div>

But you generally should not place block elements inside inline elements. It is a bad practice and degrades the readability of your html file.

The Difference

BLOCK LINE ELEMENTS

---

INLINE ELEMENTS

---

Encourage Learners to Inspect HTML in the Browser

There are some habits which would pick you and keep you aside from the average “copy paste“ coders.

Inspecting webpages directly in the browser is one of them. You don’t need fancy tools or advanced knowledge just curiosity and a browser.

If you’re learning HTML, this habit can dramatically speed up your understanding.

Why Inspecting HTML Is So Powerful

Inspecting helps you:

• See how elements are structured

• Understand how tags are nested

• Learn how layouts are built

• Connect what you write with what you see

at the production level. You can just go and inspect the whole structure of amazon.com.

If you are more passionate go and replicate the html of amazon.com , in this learning journey of html.

I guarantee that would keep you aside from average developers.

You’re learning from the internet itself.

---

How to Inspect HTML (The Easy Way)

But tell us how to do it ? See it’s easy , just a few clicks away.

On any webpage:

• Right-click → Inspect

• Or press F12

This opens the browser’s Developer Tools. (DEV tools are going to start appearing in your dreams )

The Elements tab shows the HTML structure of the page. Observe it carefully and try to interpret.

---

When inspecting HTML, focus on:

• How <div>, <section>, and <header> are used

• The difference between block-level and inline elements

• Class and ID names

• Parent and child relationships

You’ll start recognizing patterns very quickly.

---

You Can Experiment Safely!!

You can edit HTML in the inspect tab from the browser. It will give you a feeling of working on an actual website.

• You can edit HTML live in the browser

• You won’t break the actual website

• Refreshing resets everything

Try changing text, removing elements, or adding tags you’ll learn instantly.

---

Commonly Used HTML Tags (HTML Cheatsheet)

---

Examples

<header>
  <h1>My Blog</h1>
</header>

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

<section>
  <article>
    <h2>Post Title</h2>
    <p>Post content goes here.</p>
  </article>
</section>

<footer>
  <p>© 2026 My Website</p>
</footer>

---

<Conclusion>Wrapping the content</Conclusion>

So ill now you would have gotten a glimpse of the HTML.

You are now ready to build your own webpage skeleton .

After completing this journey you will go one level up and deep dive into the world of CSS and JS.

Think of a webpage like a house:

• HTML → Structure and walls

• CSS → Paint and decoration

• JavaScript → Electricity and automation

Without the structure, nothing else makes sense.

HTML is the skeleton of the web—it gives structure, meaning, and organization to every webpage.

Once you understand HTML, everything else in web development becomes easier to build on top of it.