1. Introduction to HTML (Detailed – One
Page)
Definition:
HTML (HyperText Markup Language) is the standard markup language used to create and
structure content on web pages. It provides a way to organize text, images, links, and
multimedia so that web browsers (like Chrome, Edge) can display them properly.
Breaking the Term HTML:
1. HyperText
HyperText refers to text that contains links (called hyperlinks) which allow users to
navigate from one webpage to another. This is what makes the web “connected.”
Example: Clicking a link takes you from one site to another.
2. Markup Language
A markup language uses tags to “mark” or define different parts of a document.
These tags tell the browser how content should be structured.
Example: <p> defines a paragraph, <h1> defines a heading.
Purpose of HTML:
The main purpose of HTML is to define the structure of a webpage. It organizes content into
meaningful sections such as:
● Headings
● Paragraphs
● Lists
● Links
● Images
● Forms
Without HTML, a webpage would just be plain unstructured text.
How HTML Works:
HTML works with the help of tags and elements. A browser reads the HTML file line by line
and renders it into a visual webpage.
Steps:
1. Developer writes HTML code
2. File is saved with .html extension
, 3. Browser reads the file
4. Browser converts tags into visible content
Example:
<h1>Hello</h1>
The browser displays: Hello (as a large heading)
Key Features of HTML:
1. Simple and Easy to Learn
HTML has a straightforward syntax and is beginner-friendly.
2. Platform Independent
HTML works on any device and any operating system (Windows, Mac, Linux).
3. Supports Multimedia
HTML allows embedding images, audio, and video.
4. Used with Other Technologies
● HTML → Structure
● CSS → Styling (colors, layout)
● JavaScript → Functionality (logic, interactivity)
Important Points to Remember:
● HTML is not a programming language because it does not include logic like loops or
conditions.
● HTML is used only for structure and layout.
● It uses tags enclosed in angle brackets < >.
● Most tags come in pairs: opening and closing tags.
2. Structure of HTML Document (Detailed
– One Page)
Definition:
The structure of an HTML document refers to the standard layout or skeleton that every
webpage follows. It defines how content is organized so that browsers can correctly interpret
and display it.
Basic Structure of an HTML Document:
<!DOCTYPE html>
, <html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage.</p>
</body>
</html>
Explanation of Each Part:
1. <!DOCTYPE html>
● This is the document type declaration.
● It tells the browser that the document is written in HTML5.
● It must be written at the very top of the file.
● It ensures proper rendering of the webpage.
2. <html> Tag
● This is the root element of the HTML document.
● All other elements are placed inside this tag.
● It represents the entire webpage.
3. <head> Section
● Contains metadata (data about data).
● Information inside <head> is not displayed on the webpage.
● It includes:
○ Title of the page
○ Character encoding
○ CSS links
○ Meta tags
Example:
<head>
<title>My Webpage</title>
</head>
4. <title> Tag
● Defines the title of the webpage.
● This title appears on the browser tab.
● It is important for SEO and user experience.
Page)
Definition:
HTML (HyperText Markup Language) is the standard markup language used to create and
structure content on web pages. It provides a way to organize text, images, links, and
multimedia so that web browsers (like Chrome, Edge) can display them properly.
Breaking the Term HTML:
1. HyperText
HyperText refers to text that contains links (called hyperlinks) which allow users to
navigate from one webpage to another. This is what makes the web “connected.”
Example: Clicking a link takes you from one site to another.
2. Markup Language
A markup language uses tags to “mark” or define different parts of a document.
These tags tell the browser how content should be structured.
Example: <p> defines a paragraph, <h1> defines a heading.
Purpose of HTML:
The main purpose of HTML is to define the structure of a webpage. It organizes content into
meaningful sections such as:
● Headings
● Paragraphs
● Lists
● Links
● Images
● Forms
Without HTML, a webpage would just be plain unstructured text.
How HTML Works:
HTML works with the help of tags and elements. A browser reads the HTML file line by line
and renders it into a visual webpage.
Steps:
1. Developer writes HTML code
2. File is saved with .html extension
, 3. Browser reads the file
4. Browser converts tags into visible content
Example:
<h1>Hello</h1>
The browser displays: Hello (as a large heading)
Key Features of HTML:
1. Simple and Easy to Learn
HTML has a straightforward syntax and is beginner-friendly.
2. Platform Independent
HTML works on any device and any operating system (Windows, Mac, Linux).
3. Supports Multimedia
HTML allows embedding images, audio, and video.
4. Used with Other Technologies
● HTML → Structure
● CSS → Styling (colors, layout)
● JavaScript → Functionality (logic, interactivity)
Important Points to Remember:
● HTML is not a programming language because it does not include logic like loops or
conditions.
● HTML is used only for structure and layout.
● It uses tags enclosed in angle brackets < >.
● Most tags come in pairs: opening and closing tags.
2. Structure of HTML Document (Detailed
– One Page)
Definition:
The structure of an HTML document refers to the standard layout or skeleton that every
webpage follows. It defines how content is organized so that browsers can correctly interpret
and display it.
Basic Structure of an HTML Document:
<!DOCTYPE html>
, <html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage.</p>
</body>
</html>
Explanation of Each Part:
1. <!DOCTYPE html>
● This is the document type declaration.
● It tells the browser that the document is written in HTML5.
● It must be written at the very top of the file.
● It ensures proper rendering of the webpage.
2. <html> Tag
● This is the root element of the HTML document.
● All other elements are placed inside this tag.
● It represents the entire webpage.
3. <head> Section
● Contains metadata (data about data).
● Information inside <head> is not displayed on the webpage.
● It includes:
○ Title of the page
○ Character encoding
○ CSS links
○ Meta tags
Example:
<head>
<title>My Webpage</title>
</head>
4. <title> Tag
● Defines the title of the webpage.
● This title appears on the browser tab.
● It is important for SEO and user experience.
