Deep Diving Into Concepts.
1. What HTML is and why we use it
Generic example (day to day analogy)
Think of building a house.
Walls, rooms, doors → structure
Paint, tiles → appearance
Lights, switches → behavior
HTML is like the structure of the house.
1. What is HTML
HTML stands for HyperText Markup Language
It is used to define the structure of a webpage
It tells the browser what content exists
HTML answers:
What is this content?
2. What HTML does
Creates headings and paragraphs
Places images and links
Divides content into sections
Gives meaning to content
HTML does not control design or interaction.
3. Why we use HTML
To build the basic structure of webpages
To organize content properly
To help browsers understand the page
To support CSS and JavaScript
To make content accessible and searchable
Without HTML, there is no webpage.
2. What an HTML tag is
1. What an HTML tag is
An HTML tag is used to define an element on a webpage
It tells the browser what kind of content it is
Tags are written inside angle brackets
< >Most tags have an opening and a closing part
Example:
<p>This is a paragraph</p>
HTML tags give meaning and structure to content, which is why they are important.
3. Opening tag, closing tag, and content
1. Opening tag, closing tag, and content
Opening tag tells the browser where an element starts
Closing tag tells the browser where an element ends
Content is the text or elements inside the tags
Example:
<p>Hello World</p>
Here:
<p>is the opening tag</p>is the closing tagHello Worldis the content
Together, they form a complete HTML element.
4. What an HTML element means
1. What an HTML element means
An HTML element is a complete unit in HTML
It includes the opening tag, content, and closing tag
It represents one piece of content on a webpage
The browser treats each element as a separate item
Example
<h1>Welcome</h1>
<h1>→ opening tagWelcome→ content</h1>→ closing tag
Together, these form one HTML element.
5. Self-closing (void) elements
1. Self-closing (void) elements
Self-closing (void) elements are HTML elements that do not have content
They do not need a closing tag
They represent standalone items on a webpage
The browser understands them as complete elements by themselves
Common examples
<img src="image.jpg">
<br>
<hr>
<input>
Simple understanding
No opening + closing pair
No content inside
Just one tag that does the job
6. Block-level vs inline elements
Explained In Tabular Form
| Point | Block-level elements | Inline elements |
| 1. Line usage | Starts on a new line | Stays in the same line |
| 2. Width behavior | Takes full available width | Takes only content width |
| 3. Height & width | Can set height and width | Cannot set height and width |
| 4. Layout impact | Pushes other elements to next line | Flows with text |
| 5. Margin & padding | All margins and padding work | Only left/right margins work properly |
| 6. Use case | Used for layout and sections | Used for text-level styling |
| 7. Common behavior | Acts like a container | Acts like a wrapper |
One example each
- Block-level example
<div>This is a block element</div>
- Inline example
<span>This is an inline element</span>
Block-level = structure and layout
Inline = text and small styling
7. Commonly used HTML tags
The Usage Of HTML Tags Depends Upon The Task That Has Been Assigned But These Tags Are Almost Used & Most Important Tags.
1. Commonly used HTML tags
<html>– Root element of the webpage<head>– Contains metadata, title, links, scripts<title>– Sets the page title shown in browser tab<body>– Holds all visible content
2. Text-related tags
<h1>to<h6>– Headings (h1 is largest)<p>– Paragraph<span>– Inline text container<br>– Line break
3. Layout and structure tags
<div>– Block-level container<section>– Groups related content<article>– Independent content block<header>– Top section of a page or section<footer>– Bottom section
4. Media tags
<img>– Displays images<video>– Plays video<audio>– Plays audio
5. Link and navigation tags
<a>– Creates hyperlinks<nav>– Navigation links
6. List tags
<ul>– Unordered list<ol>– Ordered list<li>– List item
7. Form-related tags
<form>– Form container<input>– Input field<label>– Label for input<button>– Clickable button