🧠HTML Notes by Priyanshu

Namaste and hello, world! 👋

I’m Priyanshu Negi — chai lover, tech explorer, and your friendly guide to student-friendly gadgets and dev tips. Welcome back to CodeWithChaii, where we blend coding wisdom with the warmth of chai ☕.

If you’re new here, check out my intro post: Welcome to CodeWithChaii — it’s where the chai-flavored tech journey began!

Today, I’m sharing My own Hand-Written Notes of HTML... — In my new Blog Format with Cheatsheet & Practics Questions for my Chai lovers.

TOH..!! Sab apne Chai ke saath taiyar rahe or Kambal me Ghus jaye-- Toh chaliye shuru karte hain! 🍵❄️

📌 INTRODUCTION TO HTML

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It organizes content on the web, making information readable and interactive for users and browsers

📌 What is HTML?

HTML stands for HyperText Markup Language.

HTML stands for HyperText Markup Language. It uses tags to define elements on a web page, such as headings, paragraphs, lists, images, and links. Browsers interpret these tags to display content in a structured way

HyperText: Text that links to other pages (like clicking a YouTube title).
Markup Language: Uses tags to tell browsers how to show content.

🏗️ Basic Structure of an HTML Page

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

Component Explanation

<!DOCTYPE html>: Declares the document type and version of HTML.
<html> : Root element of the HTML document.
<head> : Contains metadata (info about the document).
<title> : Sets the title of the webpage, shown in the browser tab.
<body> : Contains the visible content of the webpage.
<h1> : Largest heading.
<p> : Paragraph.

🏷️HTML Elements and Tags

Most tags have opening and closing pairs: <h1>Heading</h1>
Some tags are self-closing: <br />

Headings

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Sub-section</h3>

Paragraphs and Line Breaks

<p>This is a paragraph.</p>
<br />

Text Formatting

<p>This is <b>bold</b> text and <i>italic</i> text.</p>
<p>A <strong>strongly emphasized</strong> section.</p>
<p><u>Underlined</u> content.</p>

📋 Lists

Unordered List:

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

Ordered List:

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

📊 Tables

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Priyanshu</td>
    <td>95</td>
  </tr>
</table>

📝 Forms

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <input type="submit" value="Send">
</form>

🎧 Media

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>

🔗Links

<a href="https://www.example.com">Visit Example Website</a>

📸Images

<img src="image.jpg" alt="Descriptive Text">

📥Tables

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>15</td>
  </tr>
</table>

📌Full Example

<!DOCTYPE html>
<html>
<head>
  <title>Sample Page</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first web page using HTML.</p>
  <ul>
    <li>Learn HTML</li>
    <li>Practice everyday</li>
  </ul>
  <a href="https://www.example.com">Check more examples</a>
  <img src="sample.jpg" alt="Sample Image">
</body>
</html>

🔖 Common Tags with Examples

Tag	Purpose	Example
<h1>	Heading	<h1>Welcome</h1>
<p>	Paragraph	<p>Text here</p>
<a>	Link	<a href="https://google.com">Google</a>
<img>	Image	<img src="pic.jpg" alt="Image">
<br>	Line break	Line 1<br>Line 2
<hr>	Horizontal line	<hr>

🧩 Misc Tags

Tag	Use Case
<div>	Block container
<span>	Inline container
<iframe>	Embed webpage
<button>	Clickable button

📦Block, Inline, and Semantic Elements🧠

📦Block-Level Elements

Block elements start from a new line and take up the full available width. They organize content into sections.

Element	Description
<div>	Generic container for grouping elements
<p>	Paragraph
<h1>-<h6>	Heading levels
<ul>, <ol>	Unordered / ordered lists
<table>	Table
<article>	Independent, self-contained content
<section>	Thematic grouping
<header>, <footer>	Intro / closing for sections or page
<blockquote>	Long quotations
<form>	Input form

📦Block Element Example

<div>
  <h1>About Me</h1>
  <p>Hello! I am a student learning web development.</p>
</div>

📦Inline Elements

Inline elements do not start on a new line and only take up as much width as needed.

Element	Use
<span>	Generic inline container
<a>	Hyperlinks
<img>	Images
<b>, <strong>	Bold text
<i>, <em>	Italic or emphasized text
<br>	Line break
<small>	Smaller text
<label>	Form label

📦Inline Element Example

<p>I am learning <strong>HTML</strong> and <em>CSS</em> with <a href="#">example links</a>.</p>

🧠Semantic HTML Tags

Semantic elements describe their meaning, improving accessibility and SEO.

Element	Purpose
<header>	Section/page header (navigation/title)
<nav>	Navigation links
<main>	Main content
<article>	Self-contained content
<section>	Groups related content
<aside>	Side notes or ads
<figure>, <figcaption>	Image with caption
<footer>	Footer for section/page

🧠Semantic Element Example

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#home">Home</a> |
    <a href="#about">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Learning HTML</h2>
    <p>HTML stands for HyperText Markup Language and is used to create web pages.</p>
  </article>
</main>

<footer>
  <p>© 2025 My Blog</p>
</footer>

📦 Block vs Inline Elements Summary

Category	Starts New Line	Full Width	Examples
Block	Yes	Yes	<div>, <p>, <h1>, <section>
Inline	No	No	<a>, <span>, <img>, <strong>
Semantic	Mixed	Depends	<header>, <nav>, <main>, <footer>

Block Elements: Take up full width and start on a new line.

<div>
<p>
<h1> to <h6>
<ul>, <ol>, <li>
<table>
<form>

Inline Elements: Stay within the flow of text, don’t break lines.

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

🧠 Semantic Tags in HTML5 Summary

Semantic tags clearly describe their purpose. They improve accessibility and SEO.

Tag	Purpose
<header>	Top section of a page
<nav>	Navigation links
<main>	Main content
<section>	Logical grouping of content
<article>	Independent content (e.g., blog post)
<aside>	Sidebar or extra info
<footer>	Bottom section of a page
<figure>, <figcaption>	Images with captions

📚 Full HTML Tag Reference

This is a quick overview of commonly used tags from beginner to advanced:

Tag	Category	Use
<html>	Structure	Root of document
<head>	Structure	Metadata container
<title>	Head	Page title
<meta>	Head	Charset, viewport, etc.
<link>	Head	External CSS
<script>	Head/Body	JavaScript
<style>	Head	Internal CSS
<body>	Structure	Visible content
<h1> to <h6>	Text	Headings
<p>	Text	Paragraph
<a>	Text	Hyperlink
<img>	Media	Image
<video>, <audio>	Media	Multimedia
<table>	Layout	Tabular data
<form>	Forms	User input
<input>, <textarea>	Forms	Fields
<button>	Forms	Clickable button
<div>	Layout	Block container
<span>	Layout	Inline container
<header>, <footer>	Semantic	Page sections
<nav>, <section>	Semantic	Navigation and grouping

📌 HTML Cheatsheet

Category	Tag	Description	Example
📄 Document Structure	`<!DOCTYPE>`	Declares document type (HTML5)	`<!DOCTYPE html>`
	`<html>`	Root container for HTML document	`<html lang="en">...</html>`
	`<head>`	Metadata container including title, scripts, styles	`<head>...</head>`
	`<body>`	Main content visible to user	`<body>...</body>`
	`<title>`	Sets webpage title in browser tab	`<title>My Page</title>`
	`<meta>`	Metadata like charset, viewport etc.	`<meta charset="UTF-8">`
💬 Text Content Tags	`<h1>-<h6>`	Headings from largest to smallest	`<h1>Main Title</h1>`
	`<p>`	Paragraph	`<p>Hello world.</p>`
	`<br>`	Line break	Line 1 `<br>` Line 2
	`<hr>`	Horizontal rule (line)	`<hr>`
	`<pre>`	Preformatted text	`<pre>Text aligned</pre>`
	`<blockquote>`	Long quotations	`<blockquote>Quote...</blockquote>`
	`<code>`	Code snippet	`<code>console.log('Hello');</code>`
	`<kbd>`	Keyboard input	`<kbd>Ctrl+C</kbd>`
	`<samp>`	Sample output	`<samp>Syntax error</samp>`
	`<var>`	Variable	`<var>x</var>`
	`<mark>`	Highlighted text	`<mark>Important</mark>`
	`<strong>`	Strong (bold)	`<strong>Warning</strong>`
	`<em>`	Emphasized (italic)	`<em>Emphasis</em>`
	`<b>`	Bold text	`<b>Bold</b>`
	`<i>`	Italic text	`<i>Italic</i>`
	`<small>`	Smaller text	`<small>Fine Print</small>`
	`<u>`	Underlined text	`<u>Underline</u>`
	`<del>`	Strikethrough	`<del>Old</del>`
	`<ins>`	Inserted text	`<ins>New</ins>`
⛱️ Grouping Content	`<div>`	Generic container (block)	`<div>Content</div>`
	`<span>`	Generic inline container	`<span>text</span>`
	`<section>`	Thematic grouping	`<section>...</section>`
	`<article>`	Self-contained composition	`<article>Blog post</article>`
	`<header>`	Header of page/section	`<header>Title</header>`
	`<footer>`	Footer of page/section	`<footer>Contact</footer>`
	`<nav>`	Navigation links	`<nav><a>Home</a></nav>`
	`<aside>`	Sidebar content	`<aside>Related</aside>`
	`<main>`	Main content	`<main>Content</main>`
🔗 Hyperlinks	`<a>`	Create hyperlinks	`<a href="example.com">Link</a>`
🔗 Hyperlinks	`<link>`	External resources	`<link rel="stylesheet" href="style.css">`
📋 Lists	`<ul>`	Unordered list	`<ul><li>Item</li></ul>`
	`<ol>`	Ordered list	`<ol><li>Step 1</li></ol>`
	`<li>`	List item	`<li>Item</li>`
	`<dl>`	Description list	`<dl><dt>Term</dt><dd>Def</dd></dl>`
	`<dt>`	Definition term	`<dt>Term</dt>`
	`<dd>`	Definition desc	`<dd>Description</dd>`
📸 Images & Media	`<img>`	Embed image	`<img src="img.jpg" alt="Desc">`
	`<audio>`	Embed audio	`<audio controls><source src="sound.mp3"></audio>`
	`<video>`	Embed video	`<video controls><source src="video.mp4"></video>`
	`<source>`	Media source	`<source src="file.mp4" type="video/mp4">`
	`<track>`	Subtitles	`<track src="subs.vtt" srclang="en">`
	`<figure>`	Content w/ caption	`<figure><img><figcaption>Cap</figcaption></figure>`
	`<figcaption>`	Figure caption	See above
📥 Tables	`<table>`	Defines table	`<table>...</table>`
	`<caption>`	Table caption	`<caption>Title</caption>`
	`<thead>`	Header grouping	`<thead><tr>...</tr></thead>`
	`<tbody>`	Main body rows	`<tbody>...</tbody>`
	`<tfoot>`	Footer rows	`<tfoot>...</tfoot>`
	`<tr>`	Table row	`<tr>...</tr>`
	`<th>`	Header cell	`<th>Heading</th>`
	`<td>`	Data cell	`<td>Data</td>`
	`<col>`	Column properties	`<col span="2">`
📃 Forms	`<form>`	Form container	`<form action="/submit"></form>`
	`<input>`	Input control	`<input type="text">`
	`<textarea>`	Multi-line input	`<textarea rows="4"></textarea>`
	`<button>`	Clickable button	`<button>Send</button>`
	`<select>`	Dropdown	`<select><option>One</option></select>`
	`<option>`	Dropdown option	See above
	`<label>`	Input label	`<label for="id">Name:</label>`
	`<fieldset>`	Group elements	`<fieldset>...</fieldset>`
	`<legend>`	fieldset caption	`<legend>Info</legend>`
	`<datalist>`	Predefined options	`<datalist id="list"><option></datalist>`
	`<output>`	Calculation result	`<output>0</output>`
🧩 Other Tags	`<script>`	JavaScript code	`<script src="script.js"></script>`
	`<noscript>`	No JS content	`<noscript>Enable JS</noscript>`
	`<style>`	CSS styles	`<style>body{color:red;}</style>`
	`<canvas>`	Graphics area	`<canvas id="canvas"></canvas>`
	`<embed>`	External content	`<embed src="file.swf">`
	`<object>`	Embedded object	`<object data="file.swf"></object>`
	`<param>`	Object params	`<param name="autoplay" value="true">`
	`<template>`	JS templates	`<template><div>Content</div></template>`
🚀 Quick Reference: `<!DOCTYPE html>` → Root \| `<html><head><body>` → Structure \| `<h1><p><a><img>` → Content \| `<ul><ol><table><form>` → Lists/Tables/Forms

🧪 Practice Section

✅ MCQs

What does HTML stand for?
1. Hyper Text Markup Language
2. Home Tool Markup Language
3. Hyperlinks and Text Markup Language
4. Hyper Transfer Markup Language
Which tag is used to define a hyperlink in HTML?
1. <a>
2. <link>
3. <href>
4. <url>
What is the correct HTML element for inserting a line break?
1. <break>
2. <br>
3. <lb>
4. <newline>
Which attribute is used to specify an alternate text for an image, if the image cannot be displayed?
1. alt
2. src
3. title
4. longdesc
Which HTML tag is used to define an unordered list?
1. <list>
2. <ol>
3. <ul>
4. <li>
How can you open a link in a new tab or window?
1. target="_blank"
2. target="_newtab"
3. href="_blank"
4. src="_blank"
What tag is used to create a table row?
1. <td>
2. <tr>
3. <table>
4. <th>
Which attribute is used to define inline styles for HTML elements?
1. style
2. class
3. styles
4. font
Which element is used for defining the main heading of an HTML document?
1. <head>
2. <h1>
3. <header>
4. <title>
HTML5 introduced new semantic elements. Which of the following is NOT a semantic element?
1. <article>
2. <section>
3. <div>
4. <footer>

Which attribute specifies an input element as required before form submission?
1. must
2. required
3. need
4. validate
Which tag is used to define the title of a table column?
1. <td>
2. <th>
3. <tr>
4. <col>
What is the default display value of the <span> element?
1. block
2. inline
3. table
4. none
Which HTML element is used to specify a footer for a document or section?
1. <bottom>
2. <footer>
3. <section>
4. <aside>
The attribute that specifies the destination URL of a hyperlink is:
1. href
2. src
3. link
4. url

🧾 Fill Ups

The <________> tag is used to define an image in HTML.
The ________ attribute is used within form <input> elements to specify the type of input.
To create a drop-down list, the <________> tag is used.
The correct way to add a comment in HTML is .
<!DOCTYPE html> declares the document type and version of __________.
The tag <________> is used to define a paragraph.
To combine cells horizontally in a table, the attribute ________ is used.
HTML attributes are always written in __________ and should be quoted.
The semantic element <nav> is used to define ______________.
The <meta> tag provides ______________ about the HTML document.
The <________> element is used to group related elements in a form.
The HTML5 element used to embed video content is <________>.
To make a list item ordered (with numbers), use the <________> tag.
CSS can be embedded within an HTML document inside the <________> tag.
The <________> element is used to define emphasized text, typically displayed in italics.

🧾 Theory Short Questions

What is the role of the <form> element in HTML?
Name three types of list elements in HTML.
How do you include an external CSS stylesheet in an HTML file?
Explain the difference between the <div> and <span> tags.
What is the purpose of the id attribute in HTML?
What is the purpose of the action attribute in the <form> tag?
List three input types supported by the <input> element.
What is the difference between id and class attributes?
How do you make a checkbox selected by default?
What function does the <label> element serve in forms?

🧾 Theory Long Questions

Explain the difference between block-level and inline elements in HTML with examples.
Describe the structure of a basic HTML5 document.
What are semantic HTML elements? Why are they important?
How do HTML forms work? List at least 3 different types of form inputs.
What is the use of the <iframe> tag in HTML? Mentions its attributes.
Explain the box model in CSS and how HTML elements are affected by it.
Describe the differences between the <section>, <article>, and <div> elements. li> Provide use cases for each.Explain the process of creating a basic HTML form that collects a user's name, email, and password, mentioning the attributes needed for validation.
Discuss the importance of semantic HTML for SEO and accessibility. Provide examples of semantic tags.
How do you embed multimedia (audio and video) in an HTML page? Discuss control attributes and fallback content.

🖥️Practical Questions

Create a basic HTML5 document with a title "My First Webpage".
Add a heading (<h1>) and a paragraph describing your favorite hobby.
Insert an image with an alternate text describing the image.
Create a hyperlink to your favorite website opening in a new tab.
Build an ordered list of your top 5 travel destinations.
Make an unordered list of your favorite foods.
Create a table with 3 rows and 2 columns to show a schedule with headers.
Create a form to collect user's name (text), age (number), and gender (radio buttons).
Add a submit button to your form.
Create a dropdown (<select>) with 4 options for choosing a country.
Add a checkbox with a label to agree to terms and conditions.
Embed a YouTube video using the <iframe> tag.
Add an HTML5 audio player to play a sample mp3 file.
Use semantic tags to create a webpage layout with a header, navigation menu, main content area, and footer.
Create a nested list showing categories and subcategories.
Add an image map with clickable areas linking to different URLs.
Create a form with validation that requires an email input and password with minimum 8 characters.
Use inline CSS to change thr color of a single heading to blue.
Add a comment inside the HTML code explaining the purpose of a specific section.
Create an HTML table using <thead>, <tbody>, and <tfoot> tags with footer summary.
Create a webpage with heading, paragraph, link, and image.
Create a form with name, email, and submit button.

Bas doston, aaj ke liye itna hi! Agar aapko yeh tutorial pasand aaya ho toh comment zaroor karein, aur CodeWithChaii ko follow karna na bhoolein.

Agli baar milenge ek naye topic ke saath—tab tak ke liye, chai piyo aur code karo! ☕💻

~ CodeWithChaii

🧠 Complete HTML Tutorial - (ZERO👶🏻 TO HERO🦸🏻)