HTML Basics

When you open any website, what do you actually see?

Text.

Images.

Buttons.

Links.

Headings.

Behind all of that, there is HTML.

Think of HTML as the skeleton of a website. Without a skeleton, a body cannot stand. Without HTML, a website cannot exist.

Let’s understand HTML step by step, in very simple words.

What is HTML and why do we use it?

HTML stands for HyperText Markup Language.

That sounds complicated, but it is not.

HTML is just a way to tell the browser what things are.

• This is a heading
• This is a paragraph
• This is a button
• This is an image

Browsers do not understand English like humans understand.

So we use HTML to describe content in a language in which the browsers understand.

HTML does not make things colorful or add colors or nice looking.

HTML does not add animations.

HTML only gives structure.

Structure first.

Design later.

HTML is like the skeleton of a webpage

Imagine building a house.

• Skeleton / structure → walls, rooms → HTML
• Paint, colors → CSS
• Switches, doors, actions → JavaScript

HTML answers questions like:

• What is a heading?
• What is a paragraph?
• What is a section?
• What is a button?

What is an HTML tag?

An HTML tag is a keyword written inside brackets (<>)

Example:

<p>

This is a tag.

Tags tell the browser what kind of content is coming.

Some common tags:

• <p> → paragraph
• <h1> → heading
• <div> → container
• <span> → small inline text

Opening tag, closing tag, and content

Most HTML tags come in pairs.

Example:

<p>Hello World</p>

Let’s break it:

• <p> → opening tag
• Hello World → content
• </p> → closing tag

The closing tag always has a slash /.

Think of it like a box:

• You open the box
• Put something inside
• Close the box

What is an HTML element?

This is the part that usually confuses some people.

Tag ≠ Element

An HTML element includes:

• Opening tag
• Content
• Closing tag

<p>Hello World</p>

• <p> → tag ( opening tag )
• </p> → tag ( closing tag )
• The full line → element

So:

• Tag is just the label
• Element is the complete thing

self-closing (void) elements

Some elements do not have content.

So they do not need a closing tag.

Examples:

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

These are called:

• self-closing elements
• void elements

They are used when there is nothing to wrap. An image does not have text inside it. A line break does not need content.

Block-level vs Inline elements

block-level and inline are type of elements.

›Block-level elements

Block elements:

• Start on a new line
• Take full width

Examples:

• <div>
• <p>
• <h1>

Example:

<p>This is paragraph one</p>
<p>This is paragraph two</p>

Each paragraph goes to a new line automatically.

›Inline elements

• Stay in the same line
• Take only needed space

Like

• <span>
• <a>
• <strong>

Example:

<p>Hello<span>world</span></p>

world stays inside the same line.

›Easy way to remember

• Block = big boxes, new line
• Inline = small words inside a line

Commonly used HTML tags (Beginner list)

Here are the tags you will use most often:

<h1>Heading</h1>
<p>Paragraph</p>

<div>Container</div>
<span>Inline text</span>

<a href="#">Link</a>
<img src="image.jpg">

<ul>
  <li>Item</li>
</ul>

Simple examples

›Example 1: Heading and paragraph

<h1>Introduction</h1>
<p>My self punyansh singla</p>

›Example 2: div and span

<div>
  <p>Hello<span>friend</span></p>
</div>

• div groups content
• span styles small text inside <p></p> or any tag

HTML tag vs HTML element (final clarity)

• <p> → tag
• </p> → tag
• <p>Hello</p> → element

Learn by inspecting real websites

One of the best ways to learn html is:

1. Open any website
2. Right-click
3. Click Inspect

You will see Html code written by others