Introduction
HTML — HyperText Markup Language — is the basic building block of every website on the internet. If you want to understand how web pages are created and displayed in a browser, learning HTML is the perfect starting point. These Class 10 HTML notes are designed to help students understand the fundamental concepts of HTML in a clear and simple way. In this guide, you will learn how to create HTML documents, use important tags, add images, create links, design tables, and build forms. It also introduces basic CSS to style web pages with colors, fonts, and layouts. These Class 10 HTML notes provide practical examples and explanations that make learning easy for beginners and help students build a strong foundation in web development.
Learn every HTML tag, CSS style, form element, table, link, and media embed — step by step, with real code and clear explanations.
1. HTML Document Structure and Core Tags
Creating and Saving Your First HTML File
To begin, you open any plain-text editor — Notepad on Windows, TextEdit on Mac, or VS Code on any system — and type your HTML code. Next, you save the file with a .html extension, for example index.html. After that, you simply open the file in any web browser, and the browser instantly reads and displays your page. Therefore, you need absolutely no server or paid hosting to start practising HTML today.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body bgcolor="#ffffff" text="#333333"
link="#0000ee" vlink="#551a8b" alink="#ff0000">
<h1>Welcome to HTML!</h1>
<p>This is my first paragraph.</p>
</body>
</html>The Four Essential Structural Elements
Specifically, every HTML document relies on four core elements. First, the <html> tag wraps all content and signals to the browser that this is an HTML document. Second, the <head> tag holds invisible metadata such as the page title and CSS links. Third, the <title> tag sets the text shown in the browser’s tab. Fourth, and most importantly, the <body> tag holds all visible content — text, images, links, and everything the user actually sees on screen.
| Tag | Purpose | Visible to User? |
|---|---|---|
| <html> | Root element — wraps everything | No |
| <head> | Metadata, title, CSS links | No |
| <title> | Text shown in the browser tab | Tab bar only |
| <body> | All visible page content | Yes |
Body Tag Attributes for Colour Control
Moreover, the <body> tag accepts five colour-related attributes. Specifically, bgcolor sets the page background colour, text changes the default text colour, link colours unvisited links, vlink colours visited links, and alink colours a link at the exact moment the user clicks it. Therefore, by setting these five attributes together, you control the entire colour scheme of your page from a single tag.
The <!DOCTYPE html> declaration must appear on line one. Consequently, it tells the browser to use modern HTML5 standards, ensuring your page renders correctly across all devices and browsers.
2. Text Formatting, Headings, and Comments
Heading Tags from h1 to h6
HTML provides six levels of headings, ranging from <h1> (the largest) down to <h6> (the smallest). Specifically, <h1> represents the most important heading — you should therefore use only one per page for readability and SEO. In contrast, <h2> through <h6> serve as section and sub-section headings. Furthermore, browsers automatically apply bold formatting and distinct size differences to each heading level.
Essential Inline Formatting Tags
In addition to headings, HTML offers several inline tags for formatting individual words within a paragraph. For example, <b> makes text bold, <i> makes it italic, and <u> adds an underline. Moreover, <br> inserts a line break without starting a new paragraph, while <hr> draws a full-width horizontal dividing line. As a result, these simple tags give you precise control over the layout of every sentence.
<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>
<br> <!-- Line break -->
<hr> <!-- Horizontal dividing line -->
<!-- This is a comment. The browser ignores it. -->Using HTML Comments
Furthermore, HTML comments let you leave notes inside your code that the browser completely ignores and never displays. Consequently, you use them to explain complex sections, temporarily disable code during testing, or leave reminders for other developers. You write them between <!– and –> markers. Therefore, visitors to your page will never see comment text no matter how long it is.
3. Lists: Ordered, Unordered, and Description
Unordered Lists with Bullet Points
An unordered list uses the <ul> tag to display items with bullet points. Accordingly, you use it when the order of items does not matter — for instance, a list of features or topics. Moreover, the type attribute customises the bullet style with values disc, circle, or square. Each item goes inside a separate <li> tag.
Ordered Lists with Sequential Numbering
In contrast, an ordered list uses <ol> and numbers each item automatically. Therefore, you use it for step-by-step instructions or rankings. Additionally, the type attribute changes the counter style — 1, A, a, I, or i. Furthermore, the start attribute lets you begin counting from any number you choose.
Description Lists for Terms and Definitions
Additionally, HTML provides a third type — the description list. Specifically, <dl> is the container, <dt> holds each term, and <dd> holds each definition. As a result, description lists are ideal for glossaries, FAQs, and technical documentation.
| Tag | Attribute | Values / Effect |
|---|---|---|
| <ol> | type | 1, A, a, I, i — counter style |
| <ol> | start | Any number — list begins here |
| <ul> | type | disc, circle, square |
| <dl> | — | Description list container |
| <dt> | — | Definition term |
| <dd> | — | Definition description |
<!-- Unordered list -->
<ul type="square">
<li>Apple</li>
<li>Mango</li>
</ul>
<!-- Ordered list starting at C -->
<ol type="A" start="3">
<li>Step Three</li>
<li>Step Four</li>
</ol>
<!-- Description list -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>4. Font Tags and Text Appearance
What the Font Tag Does
The <font> tag controls the visual appearance of text directly inside an HTML document. Although modern web development uses CSS for all text styling, the font tag remains part of the Class 9 school syllabus and appears regularly in examination questions. Therefore, you must understand it fully to write correct HTML for school projects and confidently read older code in legacy websites.
The Three Key Font Attributes
In particular, the font tag accepts three essential attributes. First, the face attribute sets the typeface — for example, Arial or Times New Roman. Second, the size attribute sets text size on a scale from 1 (smallest) to 7 (largest); additionally, you can use relative values like +2 or -1. Third, the color attribute sets the text colour using a colour name like “red” or a hex code like “#bf3a2b”. Furthermore, you can combine all three attributes in one tag.
| Attribute | Purpose | Example Value |
|---|---|---|
| face | Sets the font family (typeface) | “Arial”, “Georgia” |
| size | Text size — 1 (min) to 7 (max) | “5”, “+2”, “-1” |
| color | Text colour — name or hex code | “red”, “#bf3a2b” |
<font face="Arial" size="5" color="#bf3a2b">
Custom font, size and colour applied together.
</font>Today, developers use CSS properties — font-family, font-size, and color — instead. However, since <font> remains in the syllabus, you must practise both approaches for your examinations.
5. Inserting Images, Superscript, and Subscript
The img Tag and Its Attributes
Images make web pages significantly more engaging. Consequently, you use the self-closing <img> tag to embed them. In addition, the tag relies on four key attributes: src (file path), width, height, and alt (alternative text). All four work together to ensure the image loads correctly, displays at the right size, and remains accessible to every user.
| Attribute | Description | Example |
|---|---|---|
| src | Path to the image file | “photo.jpg” |
| width | Image width in pixels or % | “400”, “80%” |
| height | Image height in pixels or % | “300” |
| alt | Text if image fails to load | “A mountain view” |
Why the alt Attribute Is Non-Negotiable
Furthermore, the alt attribute is absolutely essential. Specifically, screen readers use it to describe images to visually impaired users. Moreover, search engines read the alt text to understand image content, which consequently improves your page’s search ranking. Therefore, always write a meaningful, descriptive value — never leave it empty.
Superscript and Subscript for Science and Maths
In addition, HTML provides two tags for special text positioning. The <sup> tag raises text above the baseline for exponents and footnotes. Conversely, the <sub> tag lowers text below the baseline for chemical formulas. As a result, both tags are used frequently in science and mathematics writing.
<img src="photo.jpg" width="480"
height="320" alt="Mountain landscape at sunrise">
<!-- Chemistry subscript -->
<p>H<sub>2</sub>O is water.</p>
<!-- Physics superscript -->
<p>E = mc<sup>2</sup></p>6. HTML Forms: Collecting User Input
Why Forms Are Essential
HTML forms allow websites to collect data from users. Therefore, every login page, registration form, and search bar relies on the <form> element. Specifically, the action attribute sets the URL where data is sent, and method specifies how — either get or post. Consequently, most forms that handle sensitive data use method=”post” because it hides the data from the URL.
Input Types and Their Uses
Moreover, the <input> element is the most versatile tag in forms. Its type attribute determines exactly what kind of field appears. Consequently, one tag can produce a textbox, password field, radio button, or checkbox simply by changing the type value.
- Textbox (type=”text”) — accepts single-line text such as names
- Password (type=”password”) — masks characters for privacy
- Radio Buttons (type=”radio”) — lets users select exactly one option
- Checkbox (type=”checkbox”) — allows selecting one or more options
- Dropdown List (<select>) — presents a list of fixed choices
- Combobox — combines a dropdown with a free-text entry field
<form action="submit.php" method="post">
<input type="text" name="username" placeholder="Your Name">
<input type="password" name="pwd" placeholder="Password">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="checkbox" name="agree"> I agree to terms
<select name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
</select>
<input type="submit" value="Submit Form">
</form>All radio buttons in the same group must share an identical name attribute. Otherwise, the browser treats each one as independent, and the user can consequently select multiple options — which defeats the purpose entirely.
7. Embedding Audio and Video in HTML
The HTML5 Audio Element
Modern HTML5 makes embedding multimedia straightforward. Accordingly, the <audio> tag handles sound natively in all modern browsers — no Flash plugin is needed. Specifically, the controls attribute adds a built-in play/pause/volume player. Furthermore, autoplay starts audio immediately on page load, and loop repeats it continuously.
The HTML5 Video Element
Similarly, the <video> tag embeds video without any plugin. In addition to controls, width, and height, the poster attribute shows a thumbnail before the video plays. Consequently, this improves the user experience significantly. Moreover, always provide multiple <source> tags so the browser picks the format it supports best. As a result, your video plays correctly on any device or browser.
<!-- Audio player -->
<audio controls autoplay loop>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>
<!-- Video player with poster thumbnail -->
<video width="640" height="360"
controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support video.
</video>8. Creating Tables with HTML
The Four Core Table Tags
Tables organise data into rows and columns, making them ideal for timetables, result sheets, and comparisons. Therefore, you need four core tags: <table> creates the container, <tr> adds a row, <th> adds a bold header cell, and <td> adds a standard data cell. Consequently, you always nest them in this specific order for correct rendering.
Merging Cells with rowspan and colspan
Additionally, HTML tables support cell merging for complex layouts. Specifically, rowspan merges a cell vertically across multiple rows, while colspan merges it horizontally across multiple columns. As a result, you use both attributes together to create professional layouts like school timetables and report cards. Moreover, the browser handles the merging automatically once you specify the number value.
<table border="1" cellpadding="8">
<tr>
<th>Subject</th> <th>Marks</th> <th>Grade</th>
</tr>
<tr>
<td rowspan="2">Science</td>
<td>Physics: 88</td> <td>A</td>
</tr>
<tr>
<td>Chemistry: 92</td> <td>A+</td>
</tr>
<tr>
<td colspan="2">Total</td> <td>180/200</td>
</tr>
</table>Use <th> instead of <td> for column or row headers. Consequently, screen readers correctly identify the headers, making your table accessible without any extra effort.
9. Links, Anchors, and Navigation
The Anchor Tag and the href Attribute
Links are the feature that transforms pages into a connected “World Wide Web.” Therefore, the <a> tag is one of HTML’s most important elements. Specifically, the href attribute sets the destination — an external URL, an internal page, a file, or a section within the current page using #id. Consequently, this makes long pages far easier to navigate.
Email Links with mailto
Additionally, using mailto: inside href creates a direct email link. When a user clicks it, their email app opens with the address already filled in. Consequently, this is widely used on contact pages and requires no server-side code at all.
Controlling Where Links Open with target
Furthermore, the target attribute controls where the linked page opens. Specifically, _blank opens the link in a new tab, while _self (the default) opens it in the same tab. As a result, you use _blank for external links to keep your own page open alongside the destination.
<!-- External link — new tab -->
<a href="https://www.google.com" target="_blank">Visit Google</a>
<!-- Internal page link -->
<a href="about.html" target="_self">About Us</a>
<!-- Email link -->
<a href="mailto:info@example.com">Email Us</a>
<!-- Same-page anchor -->
<a href="#intro">Back to Introduction</a>| target Value | Behaviour |
|---|---|
| _self | Opens in the same tab (default) |
| _blank | Opens in a new tab or window |
| _parent | Opens in the parent frame |
| _top | Opens in the full browser window |
10. Cascading Style Sheets (CSS)
What CSS Does and Why You Need It
CSS controls the entire visual presentation of your HTML content. Therefore, it transforms plain, unstyled HTML into a beautiful professional website. Furthermore, CSS follows a cascade — styles flow from parent to child elements, and more specific selectors always override general ones. As a result, one external CSS file can style an entire multi-page website from a single location.
Three Ways to Write CSS
Specifically, you write CSS in three ways. First, inline CSS goes directly inside an HTML tag using the style attribute. However, this is the least recommended approach because it mixes design with structure. Second, internal CSS sits inside a <style> block in the <head>. Third, and best of all, external CSS lives in a separate .css file linked via <link>. Consequently, external CSS lets you update an entire website’s appearance by editing one file.
Colour, Background, and Border Properties
Moreover, CSS gives you precise control over colours and borders. The color property changes text colour, while background-color fills the background. Additionally, border-style sets the border line type — solid, dashed, dotted, or double. Furthermore, the outline property draws a line outside the border without affecting layout. As a result, you can layer both for strong visual effects.
Spacing, Dimensions, and Float
In addition, width and height control element size using pixels, percentages, or auto. The margin property adds space outside the element. Furthermore, the float property positions an element left or right and allows surrounding content to wrap around it. Consequently, you commonly use float: left to make text flow naturally around an image.
Typography: Font Family, Size, Style, and Alignment
Furthermore, CSS handles all font styling through four key properties. The font-family property sets the typeface with a fallback — for example ‘Georgia’, serif. The font-size property sets size in pixels or rem. The font-style property switches between normal and italic. Finally, text-align controls horizontal alignment with values left, right, center, or justify. Therefore, combining these properties gives you complete control over your page’s typography.
/* Colour and background */
body {
color: #333333;
background-color: #ffffff;
}
/* Typography */
h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.4rem;
font-style: normal;
text-align: center;
}
/* Box model */
.card {
width: 320px;
height: auto;
margin: 20px auto;
border-style: solid;
outline: 2px dashed #bf3a2b;
}
/* Float layout */
img.left {
float: left;
margin: 0 16px 12px 0;
}| CSS Property | What It Controls | Example Value |
|---|---|---|
| color | Text colour | #333333, red |
| background-color | Background fill | #ffffff, lightblue |
| border-style | Border line type | solid, dashed, dotted |
| margin | Space outside element | 16px, auto |
| height / width | Element dimensions | 200px, 50%, auto |
| outline | Line outside the border | 2px solid red |
| font-family | Typeface with fallback | ‘Arial’, sans-serif |
| font-style | Normal or italic | normal, italic |
| font-size | Text size | 16px, 1.2rem |
| float | Wraps surrounding content | left, right, none |
The more specific selector always wins. Specifically, an ID (#id) overrides a class (.class), which overrides an element selector (p). Therefore, plan selectors carefully from the start to avoid hard-to-debug conflicts.
Frequently Asked Questions
You only need a plain-text editor and a web browser. Specifically, Notepad, TextEdit, or VS Code all work perfectly. After you save the file as .html, you open it in Chrome or Firefox and the browser renders it instantly. Consequently, HTML is one of the most accessible skills to start learning because it requires no paid tools.
HTML defines the structure and content of a page — headings, paragraphs, images, and links. CSS, on the other hand, controls how that content looks — colours, fonts, spacing, and layout. Therefore, you always write HTML first and then apply CSS on top. They work together but serve completely different purposes.
rowspan merges a cell vertically across multiple rows, while colspan merges it horizontally across multiple columns. Furthermore, you can use both on the same cell simultaneously. As a result, these attributes are essential for building timetables and report card table layouts.
The alt attribute serves two critical purposes. First, screen readers use it to describe images to visually impaired users. Second, search engines read it to understand image content, which consequently improves your page’s search ranking. Therefore, always write a meaningful, descriptive value — never leave it empty.
For audio, the best-supported formats are MP3 and OGG. For video, MP4 works in all modern browsers, while WebM provides a great open-source alternative. Consequently, always include two <source> tags so the browser picks the format it supports best.
Yes, absolutely. HTML provides the structural foundation that CSS then styles. Therefore, you cannot meaningfully apply CSS without first understanding HTML elements. However, you can start exploring basic CSS concepts early — even while you are still mastering HTML fundamentals.
It tells the browser to open the link in a new tab. Consequently, your current page stays open while the linked content loads separately. You typically use it for external links so that visitors do not navigate away from your site entirely.
An ordered list (<ol>) numbers each item — use it when order matters, such as step-by-step instructions. In contrast, an unordered list (<ul>) shows bullet points — use it when sequence does not matter. Moreover, both list types use the same <li> tag for every individual item.
Conclusion
HTML is, without doubt, the most important skill any aspiring web developer can learn first. Throughout this guide, you have explored every fundamental topic — from creating your first document and using core tags, to styling with CSS, building forms, embedding multimedia, organising tables, and linking pages together.
Furthermore, each concept builds naturally on the previous one. Therefore, practise consistently and build small real-world projects as you go — even a simple class timetable reinforces every skill covered here. As a result, you will gain confidence quickly and be ready for JavaScript and advanced frameworks with a solid foundation.
Finally, remember that every professional developer started exactly where you are right now. Consequently, start building today, and the rest will follow naturally.