HTML Notes for Class 8
A beginner-friendly guide with examples and short exercises.
Table of Contents
1 1. What is HTML?
2 2. Basic Structure of an HTML Page
3 3. Elements & Tags
4 4. Attributes
5 5. Headings & Paragraphs
6 6. Lists (Ordered & Unordered)
7 7. Links & Images
8 8. Tables
9 9. Forms (Input Basics)
10 10. Semantic Tags
11 11. Audio & Video (Multimedia)
12 12. Best Practices
13 13. Mini Exercises & Answers
1. What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create web
pages. HTML uses tags to tell the browser how to display content like text, images, links, and forms.
Key ideas:
• HTML is not a programming language; it is a markup language.
• Browsers (like Chrome, Firefox) read HTML and render the page.
• HTML works together with CSS (for styling) and JavaScript (for interactivity).
2. Basic Structure of an HTML Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Explanation: <!DOCTYPE html> tells the browser to use HTML5. The page is wrapped by <html>.
The <head> contains information about the page, while <body> contains the visible content.
3. Elements & Tags
An element usually has an opening tag, content, and a closing tag. Example: <p>This is a
paragraph</p>. Some elements are empty (self-closing) like <br>.
4. Attributes
Attributes give extra information to tags. They are written inside the opening tag as name="value".
Example:
<img src="cat.jpg" alt="A cute cat" width="300">
Here, src is the image file, alt is alternative text, and width sets the width.
5. Headings & Paragraphs
<h1>Main Title</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text. Another sentence goes here.</p>
<h1> is the largest heading and <h6> is the smallest.
6. Lists (Ordered & Unordered)
<h3>Unordered List</h3>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ol>
7. Links & Images
<a href="https://www.example.com" target="_blank">Visit Example</a>
<br>
<img src="flower.jpg" alt="Pink flower" />
The href attribute sets the link target. target="_blank" opens the link in a new tab.
8. Tables
<table border="1">
<tr>
<th>Name</th>
<th>Class</th>
<th>Marks</th>
</tr>
<tr>
<td>Amit</td>
<td>8</td>
<td>92</td>
</tr>
<tr>
<td>Ria</td>
<td>8</td>
<td>88</td>
</tr>
</table>
9. Forms (Input Basics)
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>
<label for="class">Class:</label>
<select id="class" name="class">
<option>6</option>
<option>7</option>
<option>8</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
Forms collect user input. Common controls are text boxes, numbers, passwords, checkboxes,
radios, and dropdowns.
10. Semantic Tags
Semantic tags describe the meaning of content. Examples include <header>, <nav>, <main>,
<section>, <article>, <aside>, and <footer>.
<header>
<h1>My Blog</h1>
</header>
<nav>Home | About | Contact</nav>
<main>
<section>
<article>
<h2>Post Title</h2>
<p>Some interesting content...</p>
</article>
</section>
</main>
<footer>© 2025 My Blog</footer>
11. Audio & Video (Multimedia)
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
12. Best Practices
• Always include <!DOCTYPE html> and proper opening/closing tags.
• Use meaningful file names and alt text for images.
• Keep your code clean and properly indented.
• Validate your HTML using online validators.
• Separate concerns: HTML for structure, CSS for style, JavaScript for behavior.
13. Mini Exercises
A. Create a Simple Profile Page
Make a page with your name as an <h1>, a short paragraph about yourself, a list of 3 hobbies, and a
link to your favorite website.
B. Build a Small Table
Create a table with 3 students and their marks in Math and Science.
C. Make a Contact Form
Make a form that asks for name, email, class, and a submit button.
Sample Solutions
<!-- A: Profile Page -->
<h1>Priya Sharma</h1>
<p>I am in Class 8. I love reading and coding.</p>
<ul>
<li>Drawing</li>
<li>Cycling</li>
<li>Music</li>
</ul>
<a href="https://www.wikipedia.org">My favorite site</a>
<!-- B: Table -->
<table border="1">
<tr><th>Name</th><th>Math</th><th>Science</th></tr>
<tr><td>Arjun</td><td>90</td><td>88</td></tr>
<tr><td>Neha</td><td>85</td><td>91</td></tr>
<tr><td>Rahul</td><td>78</td><td>80</td></tr>
</table>
<!-- C: Contact Form -->
<form>
Name: <input type="text"><br>
Email: <input type="email"><br>
Class: <input type="number"><br>
<input type="submit" value="Send">
</form>
Quick Reference: Common Tags
Tag Purpose Example
<h1> ... </h1> Main Heading <h1>Title</h1>
<p> ... </p> Paragraph <p>Hello</p>
<a href='...'> Hyperlink <a href='https://...'>Link</a>
<img src='...'> Image <img src='pic.jpg' alt='desc'>
<ul><li>...</li></ul> Bulleted list <ul><li>Item</li></ul>
<ol><li>...</li></ol> Numbered list <ol><li>Step</li></ol>
<table>...</table> Table <table>...</table>
<form>...</form> Form <form action='...'>...</form>
End of Notes
Happy Coding! ■
