DEV Community

Priyanshu verma
Priyanshu verma

Posted on

Understanding HTML Tags and Elements

What Is HTML ?

Introduction: HTML as the Skeleton of a Webpage

When you open a website, you see text, images, buttons, and links.
But behind all of that, there is a basic structure holding everything together.

That structure is HTML.

Just like:

Skeleton gives shape to the human body

HTML gives structure to a webpage

Without HTML, a webpage would have no organized content.

What Is HTML and Why Do We Use It ?

HTML stands for HyperText Markup Language.

HTML is used to:

  • Structure content on the web

  • Tell the browser what each piece of content is

  • Create headings, paragraphs, images, links, and sections

HTML does not style or animate pages.
Its duty is only to define structure and meaning.

What is an HTML Tag ?

An HTML tag is a keyword wrapped inside angle brackets < >.

for example

<p>, <h1>, <input>
Enter fullscreen mode Exit fullscreen mode

Think like :

  • This content is a paragraph
  • This content is a heading

Opening Tag, Closing Tag, and Content

Most HTML tags come in pairs.

<p>Welcome to My Blog</p>
Enter fullscreen mode Exit fullscreen mode
  • <p> -> Opening Tag
  • </p> -> Closing Tag
  • Welcome to My Blog -> Content

What Is an HTML Element?

This is a common beginner confusion.

An HTML element includes everything together:

  • Opening tag
  • Content
  • Closing tag
<p> Hello Cohort </p> 
Enter fullscreen mode Exit fullscreen mode

Rule:

  • Tag = label
  • Element = complete structure

Self-Closing (Void) Elements

Some HTML elements do not have content.
These are called self-closing or void elements.

Examples:

<img> <br> <hr>

Why no closing tag?

  • Because there is nothing inside them

Real-life analogy:

  • A doorbell — you press it, but nothing goes inside it

Common void elements:

<img> – image

<br> – line break

<hr> – horizontal line

Block-Level vs Inline Elements

HTML elements behave differently on a page.

Block-Level Elements

Block elements:

  • Start on a new line
  • Take full width

Examples:

<h1>Heading</h1> <p>lorem</p>
Enter fullscreen mode Exit fullscreen mode

Analogy: - A new paragraph in a notebook

Inline Elements

Inline elements:

  • Stay in the same line
  • Take only required space

Example:

<span>Text</span>
<a>Link</a>
<strong>Bold</strong>
Enter fullscreen mode Exit fullscreen mode

Real-life analogy: - A word inside a sentence

Commonly Used HTMl Tags

<h1>
<p>
<div>
<span>
<input>
<br>
<hr>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)