Varun
HTML
🟢 1. Introduction to HTML
Full Form: HyperText Markup Language
Role in Web Development:
Acts as the backbone of every website.
Defines structure of a page, while CSS adds design, and JavaScript adds interactivity.
HyperText: Refers to the ability to link pages together (via hyperlinks).
Markup Language: Uses tags to “mark” different parts of content (like headings,
paragraphs, links).
👉 Think of HTML as the skeleton of the body, CSS as the skin & style, and JavaScript as
the brain & movement.
🟢 2. Structure of a Basic HTML Document
Every HTML page follows a standard layout:
Page 1 of 11
, Varun
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to web development.</p>
</body>
</html>
🔍 Explanation of Parts:
1.<!DOCTYPE html> → Declares that the document is HTML5.
2.<html> → The root element. Everything goes inside it.
3. <head> → Stores metadata (info about the page, not visible).
Examples: title, SEO keywords, stylesheet links, favicon.
4. <title> → Title of the page (appears on browser tab).
5. <body> → The visible content (text, images, buttons, forms).
💡 Pro Tip: Always include meta viewport for mobile-friendly websites.
Page 2 of 11
, Varun
🟢 3. HTML Tags & Elements
Tag: A keyword inside < > used to mark content.
Example: <p> is a paragraph tag.
Element: Tag + Content + Closing Tag.
Example: <p>This is text</p>
📌 Types of Tags:
1.Paired Tags → Have opening & closing.
Example: <h1>Heading</h1>
2. Empty (Void) Tags → No closing.
Example: <br>, <hr>, <img>
💡 Remember: HTML is not case-sensitive (<p> = <P>).
🟢 4. Comments in HTML
Syntax: <!-- This is a comment -->
Use:
To leave notes inside code.
To disable parts of code temporarily.
Ignored by the browser.
Page 3 of 11
, Varun
💡 Best Practice: Write comments for teamwork & readability.
🟢 5. Headings & Text Formatting
📖 Headings
Tags: <h1> → <h6>
<h1> = most important, <h6> = least.
SEO Tip: Only 1 <h1> per page (Google ranks based on it).
📖 Paragraphs
<p>This is a paragraph.</p>
📖 Text Styling
<b> or <strong> → Bold
<i> or <em> → Italics
<u> → Underline
<mark> → Highlight text
<small> → Smaller text
<del> → Strikethrough
Page 4 of 11
HTML
🟢 1. Introduction to HTML
Full Form: HyperText Markup Language
Role in Web Development:
Acts as the backbone of every website.
Defines structure of a page, while CSS adds design, and JavaScript adds interactivity.
HyperText: Refers to the ability to link pages together (via hyperlinks).
Markup Language: Uses tags to “mark” different parts of content (like headings,
paragraphs, links).
👉 Think of HTML as the skeleton of the body, CSS as the skin & style, and JavaScript as
the brain & movement.
🟢 2. Structure of a Basic HTML Document
Every HTML page follows a standard layout:
Page 1 of 11
, Varun
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to web development.</p>
</body>
</html>
🔍 Explanation of Parts:
1.<!DOCTYPE html> → Declares that the document is HTML5.
2.<html> → The root element. Everything goes inside it.
3. <head> → Stores metadata (info about the page, not visible).
Examples: title, SEO keywords, stylesheet links, favicon.
4. <title> → Title of the page (appears on browser tab).
5. <body> → The visible content (text, images, buttons, forms).
💡 Pro Tip: Always include meta viewport for mobile-friendly websites.
Page 2 of 11
, Varun
🟢 3. HTML Tags & Elements
Tag: A keyword inside < > used to mark content.
Example: <p> is a paragraph tag.
Element: Tag + Content + Closing Tag.
Example: <p>This is text</p>
📌 Types of Tags:
1.Paired Tags → Have opening & closing.
Example: <h1>Heading</h1>
2. Empty (Void) Tags → No closing.
Example: <br>, <hr>, <img>
💡 Remember: HTML is not case-sensitive (<p> = <P>).
🟢 4. Comments in HTML
Syntax: <!-- This is a comment -->
Use:
To leave notes inside code.
To disable parts of code temporarily.
Ignored by the browser.
Page 3 of 11
, Varun
💡 Best Practice: Write comments for teamwork & readability.
🟢 5. Headings & Text Formatting
📖 Headings
Tags: <h1> → <h6>
<h1> = most important, <h6> = least.
SEO Tip: Only 1 <h1> per page (Google ranks based on it).
📖 Paragraphs
<p>This is a paragraph.</p>
📖 Text Styling
<b> or <strong> → Bold
<i> or <em> → Italics
<u> → Underline
<mark> → Highlight text
<small> → Smaller text
<del> → Strikethrough
Page 4 of 11
