HTML COMPLETE BEGINNER NOTES
1. What is HTML?
HTML (HyperText Markup Language) is the standard language used to create
web pages.
HTML provides the structure of a webpage.
Think of a website as a house:
HTML = Structure (Walls, Rooms)
CSS = Design (Paint, Decoration)
JavaScript = Functionality (Lights, Fans, Buttons)
2. Features of HTM
Easy to learn
Platform independent
Supported by all browsers
Used to create web pages
Can be combined with CSS and JavaScript
3. Structure of HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to HTML.</p>
</body>
</html>
Explanation
Tells browser that this is an HTML5 document.
Root element of webpage.
Contains information about webpage.
Title shown on browser tab.
Contains visible webpage content.
4. HTML Tags
HTML uses tags enclosed in angle brackets.
Example:
<p>This is paragraph</p>
Opening Tag
<p>
Closing Tag
</p>
Example
<h1>Programming Fundamentals</h1>
Opening Tag:
<h1>
Closing Tag:
</h1>
5. HTML Elements
An element consists of:
<tag>Content</tag>
Example:
<p>Hello Students</p>
Complete line is an HTML element.
6. HTML Attribute
Attributes provide extra information.
Syntax:
<tag attribute="value">
Example:
<a href="[Link]
Visit Google
</a>
Here:
href
is an attribute.
Example
<img src="[Link]">
src tells browser which image to display.
Example
<p style="color:red">
Hello
</p>
style is an attribute.
7. Heading
HTML provides six heading levels.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Example
<h1>University Website</h1>
<h2>Computer Science Department</h2>
<h3>Programming Fundamentals</h3>
8. Paragraph
Paragraph tag:
<p>
This is a paragraph.
</p>
Example
<p>
HTML is used to create webpages.
</p>
Output:
HTML is used to create webpages.
9. Line Brea
<br>
Moves text to next line.
Example:
Hello<br>
World
Output:
Hello
World
10. Horizontal Line
<hr>
Creates a horizontal line.
Example:
<p>Section 1</p>
<hr>
<p>Section 2</p>
11. Text Formatting Tags
Bold
<b>Bold Text</b>
Italic
<i>Italic Text</i>
Underline
<u>Underline Text</u>
Strong
<strong>Important Text</strong>
Emphasis
<em>Important Text</em>
Example
<b>HTML</b>
<i>CSS</i>
<u>JavaScript</u>
12. Lists
Lists are used to display items.
There are three types:
1. Ordered List
2. Unordered List
3. Description List
Ordered Lis
Numbered list.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Output:
1. HTML
2. CSS
3. JavaScript
Unordered List
Bulleted list.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Output:
• HTML
• CSS
• JavaScript
Description List
<dl>
<dt>HTML</dt>
<dd>Used for structure</dd>
</dl>
13. Hyperlinks
Used to connect webpages.
Syntax:
<a href="URL">
Text
</a>
Example
<a href="[Link]
Google
</a>
Example 2
<a href="[Link]">
About Page
</a>
14. Images
Used to display images.
Syntax:
<img src="[Link]" alt="Image">
Example
<img src="[Link]" alt="Student">
15. Tables
Tables organize data.
Basic Table
<table border="1">
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Ali</td>
<td>90</td>
</tr>
</table>
Explanation
Table
<table>
Creates table.
Table Row
<tr>
Creates row.
Table Header
<th>
Creates heading.
Table Data
<td>
Creates data cell.
Example
Student Marks Table
Name Marks
Ali 90
Sara 85
16. Forms
Forms collect user input.
Basic Form
<form>
Name:
<input type="text">
</form>
Common Input Types
Text
<input type="text">
Password
<input type="password">
Email
<input type="email">
Number
<input type="number">
Radio Button
<input type="radio">
Checkbox
<input type="checkbox">
Submit Button
<input type="submit">
Complete Form Example
<form>
Name:
<input type="text">
<br><br>
Email:
<input type="email">
<br><br>
Password:
<input type="password">
<br><br>
<input type="submit">
</form>
17. Buttons
<button>
Click Me
</button>
Example
<button>
Register
</button>
18. HTML Comments
Comments are ignored by browser.
<!-- This is comment -->
Example
<!-- Student Registration Form -->
19. Semantic HTML
Semantic tags describe meaning of content.
Examples:
<header>
<nav>
<section>
<article>
<footer>
Example
<header>
Website Header
</header>
<nav>
Menu
</nav>
<section>
Content
</section>
<footer>
Copyright 2026
</footer>
20. HTML5 Features
Audio
Video
Semantic Tags
Canvas
Local Storage
Better Forms
Audio Example
<audio controls>
<source src="song.mp3">
</audio>
Video Example
<video controls>
<source src="video.mp4">
</video>
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Student Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>HTML Notes</p>
<img src="[Link]">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<a href="[Link]
Google
</a>
</body>
</html>